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
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> ) }
With some basic styles, some table markup and few columns, you're already well on your way to creating a drop-dead powerful table.
