feat: added row number along side of grades table - #8089
Conversation
Coverage Report for CI Build 30763734002Coverage increased (+0.001%) to 90.504%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
|
Hi @YheChen, I don't think this is the right approach here; the row numbers should be independent of the contents of the rows (i.e., the row numbers shouldn't move when the rows are sorted. Instead, they should always appear in ascending order next to the table (but not as a separate column). |
My bad, it is correctly implemented now. |
| const columnHelper = createColumnHelper(); | ||
| export const SELECTION_COLUMN_ID = "select"; | ||
| const FILTER_VARIANT_SELECT = "select"; | ||
| const ROW_NUMBER_GUTTER_WIDTH = 40; |
There was a problem hiding this comment.
Define this as a CSS variable in _constants.scss. Also let's reduce the size to 30.
| .rt-tr { | ||
| counter-increment: table-row-number; | ||
|
|
||
| &::before { |
There was a problem hiding this comment.
In terms of styling, please have this be the same background colour as the header cells. Also please apply this background colour to the full header rows as well (so that the empty top-left corners still appear have the background colours applied.
|
|
||
| const tableHeaders = ( | ||
| <div className="rt-thead -header" style={{minWidth: centerTotalSize}}> | ||
| <div className="rt-thead -header" style={{minWidth: tableTotalSize}}> |
There was a problem hiding this comment.
Overall this is great, but looking through the tables on various pages I'm not sure we should apply this universally. Can you please add a showRowNumbers prop to the Table component to control conditionally showing these row numbers? And then make the default false, so that it's only true for the assignment summary grades table.
3 participants
Proposed Changes
(Describe your changes here. Also describe the motivation for your changes: what problem do they solve, or how do they improve the application or codebase? If this pull request fixes an open issue, use a keyword to link this pull request to the issue.)
Added ascending row numbers alongside tables using React Table v8, making it easier to identify each row’s current position. The numbers appear in a fixed gutter rather than a table column, so they remain sequential when rows are sorted or filtered.
Fixes #7307
Screenshots of your changes (if applicable)
Type of Change
(Write an
Xor a brief description next to the type or types that best describe your changes.)Checklist
(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the
[ ]into a[x]in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)Before opening your pull request:
After opening your pull request:
Questions and Comments
(Include any questions or comments you have regarding your changes.)