Upgrade Student Table to react-table v8 #7826
Upgrade Student Table to react-table v8 #7826david-yz-liu merged 17 commits intoMarkUsProject:masterfrom
Conversation
| return data.sections[value] || ""; | ||
| }, | ||
| enableColumnFilter: Boolean(data.sections), | ||
| filterFn: (row, columnId, filterValue) => { |
There was a problem hiding this comment.
The filtering for both "Section" and "Active?" columns is not working. As a starting point, the filter dropdowns aren't showing the correct labels
| if (isNaN(filterValue)) { | ||
| return true; | ||
| } | ||
| return row.getValue(columnId) === filterValue; |
There was a problem hiding this comment.
This filtering isn't working either (I suspect a type mismatch)
| }, | ||
| }); | ||
|
|
||
| export const selectionColumn = columnHelper.display({ |
There was a problem hiding this comment.
This column should not be resizable
| getCheckboxProps: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| let StudentTable = withSelection(RawStudentTable); |
There was a problem hiding this comment.
You can rename the existing RawStudentTable into StudentTable. (The only reason we had both before was because of this withSelection call, but now that's no longer needed.)
| </div> | ||
| )} | ||
| <div className="rt-tbody" style={{minWidth: table.getCenterTotalSize()}}> | ||
| {loading && table.getRowModel().rows.length > 0 && <LoadingSpinner />} |
There was a problem hiding this comment.
As we discussed at our meeting, let's leave the loading spinner at the bottom for now; I think you can revert the related changes here.
Pull Request Test Coverage Report for Build 22721551632Details
💛 - Coveralls |
david-yz-liu
left a comment
david-yz-liu
left a comment
There was a problem hiding this comment.
Nice work, @lizzie-liu!
3 participants
Proposed Changes
Student Tableto use @tanstack/react-table v8Tablecomponent to support row selection using TanStack’s built-in row selection APITablecomponent to render a loading spinner at the top of the table when it's in loading stateloading={true}and rows exist (see Screenshot 1)Notes:
I had to manually implement the loading spinner UI since TanStack Table v8 is a headless library with no built-in UI components, unlike the old table which had built-in loading overlay rendering in its core table implementation.
The original table displayed the loading spinner overlayed on top of the last few rows of the table, but I placed the loading spinner at the top instead since:
.rt-tbodyhasoverflow-y: scrollandflex-direction: columnI did implement a version with the original bottom-overlay positioning (see Screenshot 2), but it required inline CSS for absolute positioning, which I think would be harder to maintain?
Would it be better to keep the original bottom-overlay behavior despite the inline styling, or is the top placement (current implementation) a better option?
Details
Screenshot 1
Screenshot 2
Associated documentation repository pull request (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.)