TanStack Table — Headless UI for Building Powerful Data Tables

Introduction

TanStack Table (formerly React Table) is a headless table library that provides the logic for sorting, filtering, pagination, grouping, and column management without dictating any markup or styles. It supports React, Vue, Solid, Svelte, and vanilla JS.

What TanStack Table Does

• Manages column definitions, row models, and cell rendering logic
• Provides built-in sorting, filtering, pagination, and grouping pipelines
• Supports column pinning, resizing, reordering, and visibility toggles
• Handles row selection and expansion with nested sub-rows
• Offers virtualization-ready APIs for tables with thousands of rows

Architecture Overview

The library is built around a core that processes data through composable row model pipelines. Each feature (sorting, filtering, grouping) is a separate pipeline stage that transforms the row array. The headless design means the core returns state objects and handler functions while the consumer renders them into whatever DOM or component structure they choose.

Self-Hosting & Configuration

• Install the adapter for your framework: @tanstack/react-table, @tanstack/vue-table, etc.
• Define columns with accessors, headers, and cell renderers
• Compose row model functions (getSortedRowModel, getFilteredRowModel) to enable features
• Use manual mode for server-side sorting, filtering, and pagination
• Pair with @tanstack/react-virtual for virtualized row rendering

Key Features

• Fully headless with zero styling opinions or CSS dependencies
• Framework adapters for React, Vue, Solid, Svelte, and vanilla TS
• Column grouping, multi-sort, faceted filtering, and global search
• Row pinning, column pinning, and column resizing with drag handles
• TypeScript-first with strongly typed column definitions and row data

Comparison with Similar Tools

• AG Grid — batteries-included with built-in themes, but larger bundle and commercial license for advanced features
• MUI DataGrid — Material Design styling included, React-only
• Handsontable — spreadsheet-style editing, commercial license required
• React Data Grid — rich features but tightly coupled to its own renderer
• Tabulator — framework-agnostic with built-in UI, heavier footprint

FAQ

Q: Is TanStack Table free? A: Yes. It is MIT-licensed and free for all uses.

Q: How do I handle large datasets? A: Use server-side mode for data fetching and pair with @tanstack/virtual for row virtualization.

Q: Can I use it without React? A: Yes. TanStack Table has adapters for Vue, Solid, Svelte, and a vanilla JS core.

Q: Does it include built-in styling? A: No. It is headless by design. You provide all markup and CSS.

Sources

• https://github.com/TanStack/table
• https://tanstack.com/table/latest