Trey
Back

TanStack Table

TanStack Table is a headless table library supporting multiple frameworks including React, Vue, and Svelte. It provides full control over UI markup and styling while offering powerful datagrid features like sorting, filtering, grouping, and pagination. With over 27,000 GitHub stars, it's an industry-standard table solution.

table
tabledatagridheadless-uidata-managementvirtualization

๐ŸŽฎ Playground

Loading playground...
Use cases
  • โ€ขAdmin dashboards and back-office systems requiring complex data management
  • โ€ขLarge dataset tables with sorting, filtering, and grouping (virtualization supported)
  • โ€ขCustom datagrid implementations aligned with design systems
  • โ€ขSaaS applications requiring server-side pagination and infinite scrolling
  • โ€ขMulti-framework projects needing consistent table logic across platforms
Good for
  • โœ“100% customizable UI with headless architecture for perfect design system integration
  • โœ“Official support for 7+ frameworks including React, Vue, Svelte, Angular, and Solid
  • โœ“Enterprise-grade features built-in: sorting, filtering, grouping, aggregation, row selection, virtualization
  • โœ“Lightweight yet optimized for server-side rendering and large dataset handling
  • โœ“Full TypeScript support with type safety and autocomplete
Not good for
  • โœ—No default UI provided due to headless approach, requiring initial setup time
  • โœ—Learning curve exists due to powerful features and API familiarity required
  • โœ—May be over-engineering for simple table requirements
Installation
$ npm install @tanstack/react-table
Example
import { useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table"

const data = [
  { name: "Alice", email: "alice@example.com" },
  { name: "Bob", email: "bob@example.com" },
  { name: "Charlie", email: "charlie@example.com" },
]

const columns = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
]

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

  return (
    <table style={{ width: "100%", borderCollapse: "collapse" }}>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id} style={{ border: "1px solid #ccc", padding: "8px", textAlign: "left" }}>
                {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} style={{ border: "1px solid #ccc", padding: "8px" }}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}
Comparison

"More flexible than AG Grid, more features than react-table v7."

Trust Metrics

27.7K

GitHub Stars

7.9M

Weekly Downloads

Last Commit:Dec 6, 2025
Used by
FacebookAmazonMicrosoft
View on GitHubView on npm