TanStackTable

Headless UI for building powerful tables & datagrids

Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit while retaining 100% control over markup and styles.

456

Contributors on GitHub

174,901

Dependents on GitHub

Learn about TanStack Ads Hide Ads

Just a quick look...

import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table'

const data = [{ id: 1, name: 'Ada' }]
const columns = [{ accessorKey: 'name', header: 'Name' }]

export default function SimpleTable() {
  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((hg) => (
          <tr key={hg.id}>
            {hg.headers.map((header) => (
              <th key={header.id}>
                {flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

Designed for zero design

What good is a powerful table if that super hip designer you just hired can't work their UI magic on it? TanStack Table is headless by design, which means 100% control down to the very smallest HTML tag, component, class and style. Pixel Perfection? Go for it!

Big Power, Small Package

Don't be fooled by the small bundle size. TanStack Table is a workhorse. It's built to materialize, filter, sort, group, aggregate, paginate and display massive data sets using a very small API surface. Wire up your new or existing tables and watch your users become instantly more productive.

Extensible

TanStack table ships with excellent defaults to get you off the ground as fast as possible, but nothing is stopping you from customizing and overriding literally everything to your liking. Feeling tenacious enough to build your own Sheets/Excel/AirTable clone? Be our guest 😉

Loved by Developers

See what teams are saying

"Introducing Table and Data Table components. Powered by TanStack Table. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation."

shadcn

@shadcn · Vercel

"I made a version using React Aria Components with arrow key navigation, multi selection, screen reader announcements, and more. Works great with TanStack Table too!"

Devon Govett

@devongovett · Adobe

"TanStack Table is the perfect choice if you need a lightweight, unopinionated, and fully customizable solution. It gives you the power and leaves the presentation up to you."

Developer Review

Community ·

"Linear-style table filters using shadcn and TanStack Table. Open source. You'll be able to use this as an add-on to the Data Table component."

Kian Bazza

@kianbazza · Developer

"Introducing Table and Data Table components. Powered by TanStack Table. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation."

shadcn

@shadcn · Vercel

"I made a version using React Aria Components with arrow key navigation, multi selection, screen reader announcements, and more. Works great with TanStack Table too!"

Devon Govett

@devongovett · Adobe

"TanStack Table is the perfect choice if you need a lightweight, unopinionated, and fully customizable solution. It gives you the power and leaves the presentation up to you."

Developer Review

Community ·

"Linear-style table filters using shadcn and TanStack Table. Open source. You'll be able to use this as an add-on to the Data Table component."

Kian Bazza

@kianbazza · Developer

Framework Agnostic & Feature Rich

Lightweight (10 - 15kb) Tree-Shaking Headless Cell Formatters Auto-managed internal state Opt-in fully controlled state Sorting Multi Sort Global Filters Columns Filters Pagination Row Grouping Aggregation Row Selection Row Expansion Column Ordering Column Visibility Column Resizing Virtualizable Server-side/external Data Nested/Grouped Headers Footers

Take it for a spin!

With some basic styles, some table markup and few columns, you're already well on your way to creating a drop-dead powerful table.

Maintainers

Tanner Linsley

Kevin Van Cott

Riccardo Perra

View All Maintainers →

Partners

Table You?

We're looking for TanStack Table Partners to join our mission! Partner with us to push the boundaries of TanStack Table and build amazing things together.

Let's chat

View Previous Partners →

Built with TanStack Table

See how developers are using this library

View all projects