TanStack Table

NaN

Contributors on GitHub

NaN

Dependents on GitHub

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

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 😉

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 →

An ad on an open source project? What is this, 1999?

Please... TanStack is 100% privately owned, with no paid products, venture capital, or acquisition plans. We're a small team dedicated to creating software used by millions daily. What did you expect?

Check out our ethos to learn more about how we plan on sticking around (and staying relevant) for the long-haul.

TanStackTable

Headless UI for building powerful tables & datagrids

Designed for zero design

Big Power, Small Package

Extensible

Framework Agnostic & Feature Rich

Partners

Sponsors

Take it for a spin!