Overview:
TanStack Table is a headless table library that allows developers to have full control over markup and styles. It is compatible with React, Solid, Vue, Svelte, and TypeScript/JavaScript. The library does not ship with components, markup, or styles, making it highly customizable and portable. It can even be used in React Native. For developers looking for a lightweight table with complete control over implementation, TanStack Table is a great choice.
Features:
- Agnostic core (JS/TS)
- Framework bindings for React, Vue, and Solid
- Lightweight (approximately 14kb with tree-shaking)
- 100% TypeScript (but not required)
- Headless (customizable with 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
Installation:
To install TanStack Table, you can follow these steps:
- Open your command-line interface.
- Run the following command to install the library:
npm install tanstack-table
- Once the installation is complete, you can import the library into your project using the following code:
import { Table } from 'tanstack-table';
- You can now use the
Table
component in your project to build powerful tables and data grids.
Summary:
TanStack Table is a headless table library that provides developers with full control over markup and styles. It is compatible with various frameworks like React, Solid, Vue, Svelte, and TypeScript/JavaScript. The library offers a range of features including filtering, sorting, grouping, row selection, and more. It is lightweight and highly customizable, making it a great choice for developers looking for a versatile table solution. With TanStack Table, developers can build powerful tables and data grids for their applications.