React Table v8 (alpha)

This is an alpha version of React Table v8. It is not ready for production use, but it is ready to be taste-tested!

Looking for version 7? Click here!

Hooks for building lightweight, fast and extendable datagrids for React, Vue, Solid and TS/JS

Enjoy this library? Try them all! React Query, React Form, React Charts

Visit /docs for docs, guides, API and more!

Quick Features

• Agnostic core (JS/TS)
• 1st-class framework bindings for React, Vue, Solid
• ~14kb or less (with tree-shaking)
• 100% TypeScript (but not required)
• Headless (100% customizable, Bring-your-own-UI)
• Auto out of the box, opt-in controllable state
• Filters (column and global)
• Sorting (multi-column, multi-directional)
• Grouping & Aggregation
• Pivoting (coming soon!)
• Row Selection
• Row Expansion
• Column Visibility/Ordering/Pinning/Resizing
• Table Splitting
• Animatable
• Virtualizable
• Server-side/external data model support

Notable Changes

• Full rewrite to TypeScript
• Removal of plugin system to favor more inversion of control
• Vastly larger and improved API
• Better controlled state management
• Better support for server-side operations
• Complete (but optional) data pipeline control
• Agnostic Core
• Framework Adapters

Migration

There are a fair amount of breaking changes (they're worth it, trust us!):

• Turns out that TypeScript makes your code a lot better/safer, but also usually requires breaking changes to architecture.
• Plugin system has been removed so plugins must be rewritten to wrap/compose the new useTable hook. Contact us if you need help!
• Column configuration options have changed, but only slightly.
• Table options are mostly the same, with some larger changes around optional state management/control and data pipeline control
• The tableInstance while similar in spirit to v7 has been reconfigured to be much faster.

Todo (in order of priority)

• Rewrite Core
  • Core
  • Columns
  • Headers
  • Visibility
  • Pinning
  • Filters
  • Sorting
  • Grouping
  • Expanding
  • Column Sizing
  • Pagination
  • Row Selection
• Migrate Examples
  • column-visibility
  • column-ordering
  • column-pinning
  • basic
  • filters
  • sorting
  • pagination
  • column-sizing
  • row-selection
  • expanding
  • grouping-and-aggregation
  • editable-data
  • kitchen-sink
  • 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

Installation

npm install @tanstack/react-table@alpha
# or
yarn add @tanstack/react-table@alpha

How to help?

• 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 useTable internally. 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.

Become a Sponsor