Table

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:

1. Open your command-line interface.
2. Run the following command to install the library:

npm install tanstack-table

3. Once the installation is complete, you can import the library into your project using the following code:

import { Table } from 'tanstack-table';

4. 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.