Start by installing the @tanstack/react-table package in your project alongside Reshaped.
npm install @tanstack/react-table
TanStack Table provides all the necessary utilities for managing data and table state, while allowing integration with external design systems to render the table interface.
Here's a simple example to illustrate how both libraries interact with each other:
import { useReactTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, ColumnDef, flexRender, } from "@tanstack/react-table"; function App() { const data = [/* your data */]; const columns = React.useMemo( () => [ { accessorKey: "firstName", header: () => "First name", }, { accessorKey: "lastName", header: () => "Last name", }, { accessorKey: "age", header: () => "Age", }, ], [], ); const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), }); return ( <Table> <Table.Head> {table.getHeaderGroups().map((headerGroup) => ( <Table.Row key={headerGroup.id}> {headerGroup.headers.map((header) => { return ( <Table.Heading key={header.id} colSpan={header.colSpan}> {flexRender( header.column.columnDef.header, header.getContext(), )} </Table.Heading> ); })} </Table.Row> ))} </Table.Head> <Table.Body> {table.getRowModel().rows.map((row) => { return ( <Table.Row key={row.id}> {row.getVisibleCells().map((cell) => { return ( <Table.Cell key={cell.id}> {flexRender(cell.column.columnDef.cell, cell.getContext())} </Table.Cell> ); })} </Table.Row> ); })} </Table.Body> </Table> ); }
For more examples, visit the TanStack Table examples section in their documentation: