chroma-react icon indicating copy to clipboard operation
chroma-react copied to clipboard

Refactor TableModule with TanStack Table

Open shawnzhu opened this issue 1 year ago • 2 comments

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 use react-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

shawnzhu avatar Mar 20 '23 13:03 shawnzhu

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.

shawnzhu avatar Mar 21 '23 15:03 shawnzhu

#333 is a temporary solution before fully adopt TanStack table API

shawnzhu avatar Mar 23 '23 18:03 shawnzhu