TanStack Table - Advanced Data Tables
Build powerful, performant data tables with sorting, filtering, pagination, and fuzzy search using TanStack Table
react-patternsreacttanstacktablesdata-gridsortingfilteringpagination
What is this?
TanStack Table is a headless UI library for building powerful tables and datagrids for React, Vue, Solid, and more. It provides the logic and state management while you control the UI completely.
This showcase demonstrates advanced features like fuzzy filtering, sorting, pagination, and per-column filters with 5,000+ rows of data.
Why use this?
- Framework agnostic: Works with React, Vue, Solid, and more
- Headless: Complete control over your UI and styling
- Performant: Handles 100,000+ rows with virtual scrolling
- Feature-rich: Sorting, filtering, pagination, grouping, and more
- Type-safe: First-class TypeScript support
- Extensible: Custom filters, sorters, and renderers
Interactive Demo
id | firstName | Last Name | Full Name |
|---|---|---|---|
| 0 | Vito | Sauer | Vito Sauer |
| 1 | Kendrick | Jacobs | Kendrick Jacobs |
| 2 | Richmond | Carroll | Richmond Carroll |
| 3 | Giovanny | Ernser | Giovanny Ernser |
| 4 | Kirk | Carroll | Kirk Carroll |
| 5 | Christiana | Monahan | Christiana Monahan |
| 6 | Simeon | Swift | Simeon Swift |
| 7 | Kattie | Price | Kattie Price |
| 8 | Bernita | Macejkovic | Bernita Macejkovic |
| 9 | Matt | Nikolaus | Matt Nikolaus |
Page
1 of 500| Go to page:5000 Rows
{
"columnFilters": [],
"globalFilter": ""
}How it works
Basic Setup
table-basic.tsx
1
Adding Fuzzy Filter
Fuzzy filtering allows for smart, typo-tolerant searching using the match-sorter library:
fuzzy-filter.ts
1
Column Definitions
Define columns with custom filters and sorting:
columns.ts
1
Key Features
- Global Filter: Search across all columns at once
- Column Filters: Individual filters per column with debouncing
- Sorting: Click column headers to sort (with fuzzy rank support)
- Pagination: Navigate through large datasets efficiently
- Performance: Client-side filtering/sorting of thousands of rows
Related Projects
Related project: state-management-tanstack-store
Note: Related project cards will be populated from the registry