TanStack Table

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: