chroma-react
chroma-react copied to clipboard
Refactor TableModule with TanStack Table
Checkout TanStack Table.
This is a follow up of #330 to cover:
- adding react-table as implementation and make it backward compatible.
- when using
config
of TableModule, no changes to existing apps that use it. - when using
columns: ColumnRef[]
to configure TableModule , it will usereact-table
's implementation.
Tasks
- [x] rendering - adapt stanstack table API
- [x] row selection
- [x] sort by column
- [x] sticky column
- [x] row actions
- [x] row click
I spent hours trying to conquer the sorting feature then realized that the sorting in TableModule
is a very special API coupling with custom types and a single hard coded hook (sort). I tried to adapt it with the TanStack table API but it will be LOTS of work.
Action: I will use the feature toggle route to add TanStack API as optional path of TableModule
the deprecate the existing implementation over time.
Sorting in TableModule
In TanStack table terms, it uses manual sorting, which means user must provide sorting functions, sorted data and header click handler. the solution is using a config.header.onSort(props: TableSortClickProps)
and hard coded hook sort
.
Sorting in TanStack react-table
it supports both sorting feature like default sorting functions + state management sortingState
at table API and manual sorting via manualSorting
and onSortingChange
.
So if we want the TanStack table API, it needs to deprecate the existing sorting API.
#333 is a temporary solution before fully adopt TanStack table API