About react-table
React-table, a popular npm package, serves as a versatile tool in creating efficient and flexible datagrids and tables in React applications. It is designed as a headless UI, meaning it provides the logic and structure without dictating the styling, offering developers the freedom to apply custom designs and themes. This flexibility allows for the crafting of tables that perfectly fit the aesthetic and functional requirements of nearly any application. React-table supports features like sorting, filtering, and pagination out of the box, making it an excellent choice for developers looking to implement complex data management capabilities without extensive overhead. Additionally, its lightweight nature ensures that it doesn't add unnecessary bulk to your project, keeping your web applications fast and responsive.
To integrate react-table into your React project, simply run the command `npm install react-table`. This command fetches the latest version of react-table from the npm registry and installs it into your project, making it ready for use within minutes. The installation of react-table via npm ensures that you are using a secure and efficient pathway to manage your project dependencies. Once installed, react-table can be easily configured to meet your specific data handling requirements, whether you are dealing with large datasets or require complex configurations like custom column rendering or manual operation overrides.
React-table is continuously updated and maintained by TanStack, guaranteeing that you have access to the latest improvements and features in data grid technology. Its API is designed to be simple yet powerful, providing clear documentation that helps developers quickly understand and utilize its vast array of functionalities. This makes react-table not only a tool for professional developers but also accessible for newcomers in the React community, facilitating a smoother learning curve and quicker project advancements.
Dependencies
Core dependencies of this npm package and its dev dependencies.
@babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript, @faker-js/faker, @rollup/plugin-babel, @rollup/plugin-commonjs, @rollup/plugin-node-resolve, @rollup/plugin-replace, @rollup/plugin-terser, @size-limit/preset-small-lib, @tanstack/config, @testing-library/jest-dom, @testing-library/react, @testing-library/react-hooks, @types/node, jsdom, knip, nx, prettier, prettier-plugin-svelte, rimraf, rollup, rollup-plugin-size, rollup-plugin-svelte, rollup-plugin-visualizer, sherif, size-limit, typescript, vitest
Documentation
A README file for the react-table code repository. View Code
TanStack Table v8
Headless UI for building powerful tables & datagrids for React, Solid, Vue, Svelte, Qwik and TS/JS.
Enjoy this library?
Try other TanStack libraries:
Visit tanstack.com/table for docs, guides, API and more!
You may know TanStack Table by our adapter names, too!
Summary
TanStack Table is a headless table library, which means it does not ship with components, markup or styles. This means that you have full control over markup and styles (CSS, CSS-in-JS, UI Component Libraries, etc) and this is also what gives it its portable nature. You can even use it in React Native!
If you want a lightweight table with full control over markup and implementation, then you should consider using TanStack Table, a headless table library.
If you want a ready-to-use component-based table with more power but more constraints around markup/styles/implementation, you should consider using AG Grid, a component-based table library from our OSS partner AG Grid.
TanStack Table and AG Grid are respectfully the best table/datagrid libraries around. Instead of competing, we're working together to ensure the highest quality table/datagrid options are available for the entire JS/TS ecosystem and every use-case.
Quick Features
- Agnostic core (JS/TS)
- 1st-class framework bindings for React, Vue, Solid
- ~15kb 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
Migrating from React Table v7
Notable Changes
- Full rewrite to TypeScript with types included in the base package
- Removal of plugin system to favor more inversion of control
- Vastly larger and improved API (and new features like pinning)
- Better controlled state management
- Better support for server-side operations
- Complete (but optional) data pipeline control
- Agnostic core with framework adapters for React, Solid, Svelte, Vue, and potentially more in the future
- New Dev Tools
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 functional API. 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.
Installation
Install one of the following packages based on your framework of choice:
# Npm
npm install @tanstack/angular-table
npm install @tanstack/lit-table
npm install @tanstack/qwik-table
npm install @tanstack/react-table
npm install @tanstack/solid-table
npm install @tanstack/svelte-table
npm install @tanstack/vue-table
npm install @tanstack/table-core #vanilla js that can work with any framework
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.
- Using a plugin? Try rewriting your plugin (v8 doesn't have a plugin system any more) as a functional wrapper that uses TanStack Table 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.