implemented logic to show total row count on tables #441

[MatteoGuarnaccia5]

Description

Added text to show total rows on table and what rows are being shown in the current table state

Testing instructions

• Review code
• Check Actions build
• Review changes to test coverage

Agile board tracking

closes #441

[joelvdavies]

I think it might also be worth adding something like this for the subsystems table/the catalogue categories page.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 98.95833% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 94.55%. Comparing base (5d87c74) to head (b934dcd).
Report is 36 commits behind head on develop.

Files	Patch %	Lines
src/systems/systems.component.tsx	93.33%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #466      +/-   ##
===========================================
+ Coverage    94.08%   94.55%   +0.46%     
===========================================
  Files           63       64       +1     
  Lines        17863    19402    +1539     
  Branches      2438     2701     +263     
===========================================
+ Hits         16807    18345    +1538     
- Misses        1050     1051       +1     
  Partials         6        6              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[joelvdavies]

It now overlaps if there are more pages/the count is larger e.g.

I think its worth getting it to work with xs={12} sm={6} on the two columns so it displays on two separate lines if its smaller e.g.

It didn't work properly with just that change as I also had to set the card view height to 0px again. It also likely needs usage of a breakpoint to do this to change the justifyContent in the grid for the pagingation e.g.

sx={(theme) => ({
    [theme.breakpoints.up('sm')]: { justifyContent: 'flex-end' },
})}

[joelvdavies]

It now overlaps if there are more pages/the count is larger e.g.

I think its worth getting it to work with xs={12} sm={6} on the two columns so it displays on two separate lines if its smaller e.g. It didn't work properly with just that change as I also had to set the card view height to 0px again. It also likely needs usage of a breakpoint to do this to change the justifyContent in the grid for the pagingation e.g.

sx={(theme) => ({
    [theme.breakpoints.up('sm')]: { justifyContent: 'flex-end' },
})}

I think I have improved the behaviour in the latest commit.