This is an alpha version of React Table v8. It is not ready for production use, but it is ready to be taste-tested!
Hooks for building lightweight, fast and extendable datagrids for React
Enjoy this library? Try them all! React Query, React Form, React Charts
Visit /docs for docs, guides, API and more!
- Lightweight at 9kb - 11.5kb (depending on tree-shaking)
- 100% TypeScript, but not required (you can use JS if you want)
- Headless (100% customizable, Bring-your-own-UI)
- Auto out of the box, fully controllable API
- Filters (column and global)
- Sorting (multi-column, multi-directional)
- Grouping & Aggregation
- Pivoting (coming soon!)
- Row Selection
- Row Expansion
- Column Visibility/Ordering/Pinning
- Table Splitting
- Animatable
- Virtualizable
- Resizable
- Server-side/controlled data/state
- Full rewrite to TypeScript
- Removal of plugin system
- Much more inversion of control
- More stable and feature complete API
- Better controlled state management
- Better support for server-side operations
Currently migration will involve rewrites to:
- Any table logic and API surrounding the
useTablehook - Any custom plugins must be rewritten to wrap/compose the new
useTablehook - Table markup API must be rewritten to use the new API. Don't worry, this is not as big of a deal as it sounds :)
- Rewrite Core
- Core
- Columns
- Headers
- Visibility
- Pinning
- Filters
- Sorting
- Grouping
- Expanding
- Column Resizing
- Pagination
- Row Selection
- Migrate Examples
- column-visibility
- column-ordering
- column-pinning
- basic
- filters
- sorting
- grouping-and-aggregation
- pagination
- column-resizing
- editable-data
- pagination-controlled
- kitchen-sink
- kitchen-sink-controlled
- row-dnd
- streaming-rows
- sub-components
- virtualized-rows
- absolute-layout
- block-layout
- animated-framer-motion
- bootstrap
- bootstrap-ui-components
- data-driven-classes-and-styles
- full-width-resizable-table
- full-width-table
- material-ui-components
- material-UI-enhanced-table
- Documentation
- API
- Core
- Columns
- Headers
- Visibility
- Pinning
- Filters
- Sorting
- Grouping
- Expanding
- Column Resizing
- Pagination
- Row Selection
- Guides
- Core
- Columns
- Headers
- Visibility
- Pinning
- Filters
- Sorting
- Grouping
- Expanding
- Column Resizing
- Pagination
- Row Selection
- API
npm install @tanstack/react-table@alpha
# or
yarn add @tanstack/react-table@alpha- Try out the already-migrated examples
- Try it out in your own projects.
- Introspect the types! Even without the docs finished, the library ships with 100% typescript to help you explore its capabilities.
- Read the contribution guidelines
- Write some docs! Start with the API docs and try adding some information about one or more of the features. The types do a decent job of showing what's supported and the capabilities of the library.
- Try your hand at migrating an example to v8! The todo list for the examples is above!
- Using a plugin? Try rewriting your plugin (v8 doesn't have a plugin system any more) as a wrapping hook/function that uses
useTableinternally. The new API is much more powerful and easier to compose. If you find something you can't figure out, let us know and we'll add it to the API.