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

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 }