tanstack/table

★ 27,957TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((TanStack Table))
    What it does
      Headless table logic
      No built-in styles
      You own the HTML
    Features
      Sorting
      Filtering
      Grouping
      Pagination
    Frameworks
      React
      Vue
      Svelte
      Angular
    Use cases
      Admin dashboards
      Analytics UI
      Data management

mindmap root((TanStack Table)) What it does Headless table logic No built-in styles You own the HTML Features Sorting Filtering Grouping Pagination Frameworks React Vue Svelte Angular Use cases Admin dashboards Analytics UI Data management

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a fully custom-styled admin dashboard data table with sorting, filtering, and pagination without fighting pre-built component styles.

USE CASE 2

Create a shared table logic layer that works across React, Vue, and Svelte apps in the same organization.

USE CASE 3

Display and group large datasets in an analytics interface with row selection, aggregation, and column pinning.

Tech stack

TypeScriptJavaScriptReactVueSvelteAngular

Getting it running

Difficulty · moderate Time to first run · 30min

Headless by design, you must write all HTML and CSS yourself, plan extra time for layout if you don't have a component library.

MIT license, use freely for any purpose including commercial projects, just keep the copyright notice.

In plain English

TanStack Table is a "headless" library for building data tables and grids in JavaScript and TypeScript applications. "Headless" means the library provides all the logic and behavior for a table, sorting, filtering, grouping, aggregating rows, selecting rows, pagination, but gives you zero pre-built visual components. You supply all the HTML structure and styling yourself, so the table looks exactly the way you want it without fighting against any default design. The core is framework-agnostic, meaning the same logic works across multiple front-end frameworks. Adapters are available for React, Vue, Solid, Svelte, Angular, and others, all under names like React Table, Vue Table, and so on. This is useful in organizations where different teams use different frameworks but want consistent table behavior. When you use TanStack Table, you call the library to set up your data and column definitions, then it gives you back a table object you can inspect to build your rows and cells however you like. You have full control over what HTML gets rendered and how it is styled, which makes the library suitable for complex admin dashboards, data management UIs, and analytics interfaces where standard table components would be too rigid. You would use this when you need a powerful, flexible data table that handles large datasets with features like sorting, filtering, and grouping, and you want complete design freedom rather than a pre-styled component that is hard to customize.

Copy-paste prompts

Prompt 1

Using TanStack Table with React, show me how to create a sortable table of users with columns for name, email, and role, where clicking a column header toggles sort direction.

Prompt 2

Write a TanStack Table setup in TypeScript that filters rows client-side as the user types in a search box above the table.

Prompt 3

Give me a TanStack Table example with pagination that shows 20 rows per page and navigation buttons for next/previous.

Prompt 4

Show me how to use TanStack Table's groupBy feature to group a list of sales records by region and show subtotals per group.

Open on GitHub → Explain another repo

← tanstack on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.