1.6.0 • Public • Published

npm (scoped) GitHub

React data grid library based on the useReducer pattern

What are the supported feature ?

The component supports advanced data grid features:

  • resizable columns
  • filters
  • sorting
  • paging
  • reorderable columns
  • row selection
  • customizable components (cells, filters, row, pagination, extra pagination info)
  • customizable labels
  • auto-resizing of columns to make all elements visible (either when changing page or when double-clicking int the column resizer)
  • cell range selection
  • fixed columns
  • column visibility

Why useReducer ?

Instead of passing a bunch of callbacks to the table component, your pass the dispatch of your own reducer function. This is much friendlier for React hook-based applications, for several reasons:

  • There are no risk of stale callbacks or need to invoke useCallback because the dispatch of your reducer is guaranteed by React to be stable
  • Your code is much easier to test because your table logic is in your reducer function (a pure javascript function, which is very unit-test friendly)

What about performance ?

The components is tuned to minimize redraw and offers:

  • O(1) column resizing based on dynamic CSS rule edition
  • Efficient row selection (only the selection checkboxes get redrawn)
  • The data part of the table only gets refreshed if the data actually changes
  • Most components are memoized with custom equality tests


Demo and samples

Be sure to check the storybook as it contains several samples, complete with source-code, documentation.


This guide provides info on various ways you can contribute to this project.

Package Sidebar


npm i react-reducer-table

Weekly Downloads






Unpacked Size

177 kB

Total Files


Last publish


  • ulgaal