TanStack Table Has a Free Headless Table Library — Here's How to Use It

#react #table #datagrid #typescript

AG Grid is $1,000+/year. Built-in HTML tables have no sorting or filtering. TanStack Table gives you headless table logic — sorting, filtering, pagination, grouping — you bring the styles.

What Is TanStack Table?

TanStack Table is a headless table library for React, Vue, Svelte, Solid, and vanilla JS. It handles all the logic (sorting, filtering, pagination) — you control the rendering.

Quick Start

npm install @tanstack/react-table

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

const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'role', header: 'Role' },
];

function DataTable({ data }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.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>
  );
}

Features

Sorting

import { getSortedRowModel } from '@tanstack/react-table';

const table = useReactTable({
  data, columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  state: { sorting },
  onSortingChange: setSorting,
});

Filtering

import { getFilteredRowModel } from '@tanstack/react-table';

const table = useReactTable({
  data, columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  state: { globalFilter: searchQuery },
  onGlobalFilterChange: setSearchQuery,
});

Pagination

import { getPaginationRowModel } from '@tanstack/react-table';

const table = useReactTable({
  data, columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
});

// Controls
table.previousPage();
table.nextPage();
table.getPageCount();

Why TanStack Table

Feature	TanStack Table	AG Grid	Material Table
Cost	Free	$1,000+/year	Free
Headless	Yes	No	No
Framework	Any	Any	React only
Bundle size	~15KB	~300KB	~100KB
Sorting	Yes	Yes	Yes
Grouping	Yes	Yes	No
Virtualization	Plugin	Built-in	No
Custom UI	Full control	Themes	Themes