← Back to Articles
2022-07-26frontend

React Table for tabular metrics

  • Change: Commit 52c9f192 called out "needs to be replaced with react-table!!" in its message; react-table v7 was integrated the same day for top visited parcels and top users tables. TanStack React Table v8 was added later when column sorting and pagination needs grew.
  • Why: Plain HTML tables couldn't sort or paginate without manual wiring. react-table v7's headless hook pattern fit Chakra's component model — wrap it in any markup, style with Chakra tokens.
  • Affected Modules: src/components/local/ table components, package.json
  • Trade-offs:
    • Pro: Headless approach kept table markup fully under Chakra's styling control.
    • Con: Two table API versions coexist (v7 hooks API + v8 useReactTable); any new table needs to pick one, which is not obvious from the codebase.