📁 tanstack/table

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.

Get Started

888888888

NPM Downloads 27,264

Stars on Github

456

Contributors on GitHub

172,092

Dependents on GitHub

Just a quick look...

ReactVueAngularSolidLitSvelteQwikVanilla

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>
  )
}

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>
  )
}

Get Started

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 😉

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

Trusted in Production by

IntuitGoogleAmazonAppleAutoZoneMicrosoftCiscoUberSalesforceWalmartWixHPDocusignTripwireYahoo!OcadoNordstromTicketMasterComcast BusinessNozzle.ioIntuitGoogleAmazonAppleAutoZoneMicrosoftCiscoUberSalesforceWalmartWixHPDocusignTripwireYahoo!OcadoNordstromTicketMasterComcast BusinessNozzle.ioIntuitGoogleAmazonAppleAutoZoneMicrosoftCiscoUberSalesforceWalmartWixHPDocusignTripwireYahoo!OcadoNordstromTicketMasterComcast BusinessNozzle.io

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 →