react-reducer-table

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

Documentation

• Reference documentation provides a component-level autogenerated doc
• Overview provides a conceptual overview of what the library can do and how to do it.
• Annotated source provides a groc-generated annotated view of the source code.

Demo and samples

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

Contributing

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