lifeomic / chroma-react

Open source design system from LifeOmic, built with React
https://lifeomic.github.io/chroma-react/
MIT License
48 stars 9 forks source link

Refactor TableModule with TanStack Table #331

Open shawnzhu opened 1 year ago

shawnzhu commented 1 year ago

Checkout TanStack Table.

This is a follow up of #330 to cover:

Tasks

shawnzhu commented 1 year ago

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 commented 1 year ago

333 is a temporary solution before fully adopt TanStack table API