DataTable

Easy to use table and datagrids built using TanStack Table .

#
Documentation

#
Install

Install the required peer dependencies to start using this component:


npm install @tanstack/react-table


pnpm add @tanstack/react-table


yarn add @tanstack/react-table


bun add @tanstack/react-table

#
Usage

Use the table prop to pass a table instance returned from useReactTable() hook. At minimum make sure to include columns, data, and getCoreRowModel when using the hook.


Arthur	Morgan	success	$20
John	Marston	processing	$12.75
Micah	Bell	failed	$1.25

App.tsx


"use client";
 
import { DataTable, DataTableBody } from "@optiaxiom/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <DataTable table={table}>
      <DataTableBody />
    </DataTable>
  );
}

columns.tsx


import { Badge } from "@optiaxiom/react";
import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: number;
  firstName: string;
  lastName: string;
  status: "failed" | "processing" | "success";
}>();
 
const mapStatusToIntent = {
  failed: "danger",
  processing: "warning",
  success: "success",
} as const;
 
export const columns = [
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("status", {
    cell: ({ getValue }) => (
      <Badge intent={mapStatusToIntent[getValue()]}>{getValue()}</Badge>
    ),
    header: "Status",
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

data.ts


export const data = [
  {
    amount: 20,
    firstName: "Arthur",
    lastName: "Morgan",
    status: "success" as const,
  },
  {
    amount: 12.75,
    firstName: "John",
    lastName: "Marston",
    status: "processing" as const,
  },
  {
    amount: 1.25,
    firstName: "Micah",
    lastName: "Bell",
    status: "failed" as const,
  },
];

#
Anatomy


import { DataTable, DataTableBody, DataTableFooter } from "@optiaxiom/react";
 
export default () => (
  <DataTable>
    <DataTableBody>
      <DataTableAction />
      <DataTableCheckbox />
      <DataTableLabel />
    </DataTableBody>
 
    <DataTableFooter />
  </DataTable>
);

#
Vertical scrolling

Headers in DataTable are sticky by default. Set a height on the component to allow scrolling vertically when a large number of rows are present.


1	Edgardo	Lubowitz	$696.47
2	Henri	Paucek-Kshlerin	$719.47
3	Everardo	Kessler	$392.12
4	Granville	Deckow	$59.67
5	Justyn	Nicolas	$175.45
6	Modesta	Reichert	$849.44
7	Francesca	Greenholt	$322.96
8	Audreanne	Keeling	$630.98
9	Herminio	Kautzer	$493.69
10	Tyreek	Muller	$893.39
11	Emilia	Streich	$115.61
12	Jayme	Leannon-Moore	$250.45
13	Reymundo	Little	$120.62
14	Elliot	Parker	$342.76
15	Johnathon	McGlynn	$875.46
16	Marguerite	Boehm	$624.90
17	Dedrick	Marquardt	$763.69
18	Shea	Reilly	$95.71
19	Lauretta	Cronin	$16.12
20	Maurice	Pouros	$153.07
21	Giles	Spinka	$554.38
22	Alta	Jacobi	$357.40
23	Zelda	Ruecker	$704.96
24	Mathew	Jacobi	$593.18
25	Everett	Orn	$240.85
26	Brenda	Okuneva	$105.90
27	Kay	Howe	$846.51
28	Fidel	Simonis	$316.79
29	Katrine	Lebsack	$338.67
30	Yadira	Durgan	$2.68
31	Josie	Wyman	$292.49
32	Kendra	Huels	$257.54
33	Caroline	Streich	$731.08
34	Arjun	Doyle	$983.53
35	Katelin	Gulgowski	$450.64
36	Keshawn	Romaguera	$927.59
37	Amalia	Smitham	$741.86
38	Oscar	Haag	$165.93
39	Berry	Torphy	$665.26
40	Ignatius	Runolfsdottir	$696.31
41	Arvel	Schultz	$565.64
42	Timmy	Marvin	$337.06
43	Arielle	Schuster	$751.65
44	Brant	Conn	$909.88
45	Herman	Cartwright	$399.38
46	Randall	Schowalter	$201.40
47	Katlynn	McCullough	$7.42
48	Mikel	Ortiz	$206.09
49	Lottie	Rodriguez	$29.32
50	Bobby	Bergstrom	$472.91

App.tsx


"use client";
 
import { DataTable, DataTableBody } from "@optiaxiom/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    state: { pagination: { pageIndex: 0, pageSize: data.length } },
  });
  return (
    <DataTable maxH="xs" table={table}>
      <DataTableBody />
    </DataTable>
  );
}

columns.ts


import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: string;
  firstName: string;
  id: number;
  lastName: string;
}>();
 
export const columns = [
  columnHelper.accessor("id", {
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 50 }, (_, index) => ({
  amount: faker.finance.amount(),
  firstName: faker.person.firstName(),
  id: index + 1,
  lastName: faker.person.lastName(),
}));

#
Column pinning

Follow the column pinning guide and use the columnPinning option to pin columns either to the left or right side of the table.


1	Granville.Deckow	Daniella98@gmail.com	Jayden	Beier	Regional Tactics Producer	$696.47
2	Herminio_Kautzer	Modesta.Reichert36@yahoo.com	Eldora	Kunde	Investor Security Administrator	$634.40
3	Evelyn_Johnson	Emilia48@gmail.com	Josianne	Little	Customer Research Assistant	$623.95
4	Aglae15	Linnie.Spinka76@hotmail.com	Clementine	Reilly	Customer Security Agent	$669.32
5	Laura.Corwin	Kayden_Walsh35@yahoo.com	Ellis	Ruecker	Regional Assurance Strategist	$318.76
6	Eula0	Benjamin_Hand@hotmail.com	Rubye	Simonis	Regional Paradigm Director	$513.13
7	Wilmer.Keebler	Elaina_Turcotte@gmail.com	Rae	Streich	Regional Mobility Officer	$905.35
8	Malvina_Ondricka	Timmy_Koch74@gmail.com	Melody	Haag	Internal Directives Consultant	$93.32
9	Tad.Bode	Kennedy33@yahoo.com	Nestor	Schuster	Customer Mobility Associate	$438.21
10	Aletha_Bartoletti47	Colleen_Koss@gmail.com	Toni	Ortiz	Customer Implementation Developer	$562.22
11	Jayden_Hammes	Madalyn.Runte-Marvin@gmail.com	Amani	Jenkins	Forward Operations Administrator	$542.64
12	Alphonso_Wuckert62	Teresa.Bosco50@gmail.com	Alysha	Tremblay	Future Security Manager	$989.04
13	Vivian.Streich	Garret34@yahoo.com	Pink	Dicki	Dynamic Division Developer	$484.91
14	Carolyne2	Daryl.Emard23@yahoo.com	Lorenzo	Lesch	Future Identity Supervisor	$67.44
15	Trisha.Stamm59	Orin87@gmail.com	Verona	Cormier	District Accountability Director	$16.11
16	Tony_White50	Arturo.Swift@gmail.com	Dane	Kling	Customer Branding Specialist	$721.19
17	Fay24	Clovis.Jaskolski85@yahoo.com	Thaddeus	Harvey	International Interactions Orchestrator	$480.89
18	Elise_Bosco	Lori32@hotmail.com	Remington	Carroll	International Usability Administrator	$908.02
19	Cole_Kohler23	Cruz_Robel@yahoo.com	Mattie	Sanford	Chief Intranet Manager	$191.33
20	Forest.Jones	Ollie80@hotmail.com	Ada	Glover	Senior Tactics Representative	$953.70
21	Leopoldo.Cummerata	Emelia_Baumbach@yahoo.com	Alfreda	Hills	Lead Tactics Representative	$279.80
22	Christine.Brakus-Muller	Ray_Witting@yahoo.com	Gussie	Jacobi	Future Security Engineer	$296.90
23	Adonis_Quitzon	Akeem.Stracke52@gmail.com	Augustine	Frami	Internal Group Technician	$868.32
24	Alisha64	Mack.Ryan@yahoo.com	Davon	Bauch-O'Connell	International Tactics Engineer	$542.86
25	Hassie.Effertz85	Eldridge_Grant@gmail.com	Yadira	Tillman-VonRueden	Human Integration Supervisor	$678.10
26	Graham.Morissette99	Hershel80@hotmail.com	Theodore	Watsica	Product Tactics Planner	$893.87
27	Mona53	Cale3@gmail.com	Lewis	Maggio	Senior Branding Coordinator	$220.60
28	Gerry.OConner	Lizzie_Lockman56@yahoo.com	Johnathon	Lesch	Legacy Research Assistant	$359.87
29	Royal60	Alfonso.Schinner44@hotmail.com	Edd	Stokes	Principal Division Agent	$875.77
30	Alexandria_Quigley	Jorge.Flatley@gmail.com	Bonita	Barrows	Global Division Technician	$715.75
31	Carolyne_Rolfson-Lindgren	Dameon_Braun@hotmail.com	Vivian	Upton	Lead Marketing Specialist	$625.91
32	Ayden_Welch1	Ericka35@hotmail.com	Jairo	Dietrich	International Tactics Strategist	$656.34
33	Carter_Farrell-McKenzie	Jacinto11@yahoo.com	Rahsaan	Schroeder	Corporate Implementation Technician	$801.28
34	Ardella94	Norval_Abbott49@hotmail.com	Freeda	Sporer	Forward Markets Consultant	$584.91
35	Effie6	Cora.Kuhic@gmail.com	Sarai	West	Principal Integration Orchestrator	$443.60
36	Raphaelle_Brakus71	Corine17@hotmail.com	Lilliana	Lubowitz	Lead Quality Officer	$994.62
37	Libby53	Anthony.Powlowski@gmail.com	Sheridan	Runte	Legacy Implementation Engineer	$971.37
38	Linwood_Wolf54	Nico.Howe65@yahoo.com	Nickolas	Keeling	Direct Accounts Planner	$947.07
39	Jonathon92	Mabelle85@gmail.com	Felipa	Tromp	Future Research Strategist	$904.12
40	Kayley_Stamm55	Hector_DuBuque48@gmail.com	Barbara	Howell	Global Tactics Coordinator	$841.17
41	Cleve.Wolff67	Matteo.Kerluke96@hotmail.com	Jazmyne	Boehm	Dynamic Response Assistant	$990.24
42	Jarod_McDermott66	Terrill_Weissnat@hotmail.com	Delphine	Rolfson	Dynamic Implementation Representative	$723.47
43	Waldo.Schuster	Jacklyn8@gmail.com	Juliet	Pacocha	Customer Markets Technician	$15.19
44	Milford74	Lester.Mertz23@yahoo.com	Freddie	Rosenbaum	Investor Tactics Specialist	$101.74
45	Damian11	Mossie.Lynch19@hotmail.com	Arnaldo	Treutel	Senior Configuration Coordinator	$369.04
46	Alana.Kassulke	Ryder45@yahoo.com	Maud	Kling	Human Mobility Designer	$932.09
47	Myron.Herman	Gene.Bechtelar1@yahoo.com	Eulah	Ritchie	Internal Division Supervisor	$39.91
48	Norberto.Kemmer	Frankie45@hotmail.com	Frank	Ankunding	Future Tactics Director	$727.19
49	Jayne_Hagenes31	Gunnar.Mueller@hotmail.com	Agustin	Hansen	Central Integration Administrator	$345.90
50	Jerod.Nikolaus3	Asha_Beer@yahoo.com	Diego	Bode	International Tactics Supervisor	$290.65

App.tsx


"use client";
 
import { DataTable, DataTableBody } from "@optiaxiom/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    state: {
      columnPinning: {
        left: ["id", "username"],
      },
      pagination: { pageIndex: 0, pageSize: data.length },
    },
  });
  return (
    <DataTable maxH="xs" table={table}>
      <DataTableBody />
    </DataTable>
  );
}

columns.ts


import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: string;
  email: string;
  firstName: string;
  id: number;
  jobTitle: string;
  lastName: string;
  username: string;
}>();
 
export const columns = [
  columnHelper.accessor("id", {
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("username", {
    header: "Username",
    size: 150,
  }),
  columnHelper.accessor("email", {
    header: "Email",
    size: 250,
  }),
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("jobTitle", {
    header: "Job Title",
    size: 350,
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 50 }, (_, index) => ({
  amount: faker.finance.amount(),
  email: faker.internet.email(),
  firstName: faker.person.firstName(),
  id: index + 1,
  jobTitle: faker.person.jobTitle(),
  lastName: faker.person.lastName(),
  username: faker.internet.username(),
}));

#
Row selection

Follow the row selection guide to allow selecting and highlighting rows.

Use the DataTableCheckbox component to automatically attach selection handlers and make the whole row selectable.

Combine Checkbox/DataTableCheckbox with Cover to make them easier to interact with by spanning the whole cell.

Finally, make sure to use the DataTableLabel in your primary cell to set the label of the row and the checkbox for screen readers.

Hover over the rows to see the checkboxes:


Check to select	1	Diane Reichel	$696.47
Check to select	2	Jeffery Heathcote	$980.77
Check to select	3	Jaime Deckow	$438.57
Check to select	4	Lyle Reilly	$531.55
Check to select	5	Harriet Greenholt	$722.45

App.tsx


"use client";
 
import { DataTable, DataTableBody } from "@optiaxiom/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <DataTable table={table}>
      <DataTableBody />
    </DataTable>
  );
}

columns.tsx


import { Cover, DataTableCheckbox, DataTableLabel } from "@optiaxiom/react";
import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: string;
  id: number;
  name: string;
}>();
 
export const columns = [
  columnHelper.display({
    cell: () => (
      <Cover asChild>
        <DataTableCheckbox />
      </Cover>
    ),
    header: () => (
      <Cover asChild>
        <DataTableCheckbox />
      </Cover>
    ),
    id: "select",
    size: 48,
  }),
  columnHelper.accessor("id", {
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("name", {
    cell: ({ renderValue }) => <DataTableLabel>{renderValue()}</DataTableLabel>,
    header: "Name",
    size: 200,
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 5 }, (_, index) => ({
  amount: faker.finance.amount(),
  id: index + 1,
  name: faker.person.fullName(),
}));

#
Row actions

Use the DataTableAction component to show links, buttons, or dropdown menus within rows that are only visible when the user hovers over the row.

You can enable the primary prop on any one of those actions to mark that as the primary action. This will automatically enable keyboard navigation within the table:

Double click on row to perform primary action.
Use up/down/left/right arrow keys to navigate between rows and actions.

Finally, make sure to use the DataTableLabel in your primary cell to set the label of the row for screen readers.

Hover over the rows to perform more actions:

Name
Toys - Practical Granite Fish	Oct 30, 2025	Diane Reichel
Clothing - Ergonomic Granite Keyboard	Oct 30, 2025	Ira Jacobi
Games - Fresh Concrete Pizza	Oct 30, 2025	Omar Reichert
Grocery - Soft Wooden Keyboard	Oct 29, 2025	Jennie Kautzer
Health - Unbranded Granite Pants	Oct 30, 2025	Florence Streich

App.tsx


"use client";
 
import { DataTable, DataTableBody } from "@optiaxiom/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <DataTable table={table}>
      <DataTableBody />
    </DataTable>
  );
}

columns.tsx


import {
  Box,
  Button,
  DataTableAction,
  DataTableLabel,
  EllipsisMenuButton,
  Flex,
  Link,
  Menu,
  MenuContent,
  MenuTrigger,
  Text,
  toaster,
} from "@optiaxiom/react";
import { IconShare3 } from "@tabler/icons-react";
import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  id: number;
  modified_at: Date;
  modified_by: string;
  name: string;
}>();
 
export const columns = [
  columnHelper.display({
    cell: ({ row }) => (
      <Flex flexDirection="row" justifyContent="space-between" w="full">
        <DataTableLabel asChild>
          <DataTableAction flex="initial" overflow="hidden" primary>
            <Link
              appearance="subtle"
              href="data:,"
              onClick={(event) => {
                event.preventDefault();
                toaster.create(`Clicked: ${row.original.name}`);
              }}
            >
              <Text truncate>{row.original.name}</Text>
            </Link>
          </DataTableAction>
        </DataTableLabel>
 
        <Flex flex="none" flexDirection="row" gap="8">
          <Menu
            options={[
              {
                execute: () =>
                  navigator.clipboard.writeText(row.original.id.toString()),
                label: "Copy ID",
              },
              { label: "Edit" },
              { intent: "danger", label: "Delete" },
            ]}
          >
            <DataTableAction>
              <MenuTrigger asChild>
                <EllipsisMenuButton
                  appearance="subtle"
                  aria-label="More options"
                  size="sm"
                />
              </MenuTrigger>
            </DataTableAction>
            <MenuContent />
          </Menu>
 
          <DataTableAction>
            <Button
              appearance="subtle"
              aria-label="Share"
              icon={<IconShare3 />}
              size="sm"
            />
          </DataTableAction>
        </Flex>
      </Flex>
    ),
    header: "Name",
    id: "name",
    size: 350,
  }),
  columnHelper.accessor("modified_at", {
    cell: ({ renderValue }) => (
      <Box alignItems="center" alignSelf="stretch" display="flex">
        {renderValue()?.toLocaleDateString(undefined, { dateStyle: "medium" })}
      </Box>
    ),
    header: "Modified",
    size: 150,
  }),
  columnHelper.accessor("modified_by", {
    cell: ({ renderValue }) => (
      <Box alignItems="center" alignSelf="stretch" display="flex">
        {renderValue()}
      </Box>
    ),
    header: "Modified By",
    size: 150,
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 5 }, (_, index) => ({
  id: index + 1,
  modified_at: faker.date.recent(),
  modified_by: faker.person.fullName(),
  name: faker.commerce.department() + " - " + faker.commerce.productName(),
}));

#
Pagination

DataTable supports both client-side and server-side pagination. Follow the pagination guide to learn how to implement pagination with TanStack Table.

#
Client side

Simply provide the getPaginationRowModel and pagination options to use client-side pagination.


1	Edgardo	Lubowitz	$696.47
2	Henri	Paucek-Kshlerin	$719.47
3	Everardo	Kessler	$392.12
4	Granville	Deckow	$59.67
5	Justyn	Nicolas	$175.45
6	Modesta	Reichert	$849.44
7	Francesca	Greenholt	$322.96
8	Audreanne	Keeling	$630.98
9	Herminio	Kautzer	$493.69
10	Tyreek	Muller	$893.39

1 - 10 of 50

App.tsx


"use client";
 
import { DataTable, DataTableBody, DataTableFooter } from "@optiaxiom/react";
import {
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
} from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: { pagination: { pageIndex: 0, pageSize: 10 } },
  });
  return (
    <DataTable maxH="xs" table={table}>
      <DataTableBody />
      <DataTableFooter />
    </DataTable>
  );
}

columns.ts


import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: string;
  firstName: string;
  id: number;
  lastName: string;
}>();
 
export const columns = [
  columnHelper.accessor("id", {
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 50 }, (_, index) => ({
  amount: faker.finance.amount(),
  firstName: faker.person.firstName(),
  id: index + 1,
  lastName: faker.person.lastName(),
}));

#
Server side

To implement manual server-side pagination we can use manualPagination and rowCount. Then combine it with onPaginationChange and state.pagination to control pagination and react to changes.


1	Edgardo	Lubowitz	$696.47
2	Henri	Paucek-Kshlerin	$719.47
3	Everardo	Kessler	$392.12
4	Granville	Deckow	$59.67
5	Justyn	Nicolas	$175.45
6	Modesta	Reichert	$849.44
7	Francesca	Greenholt	$322.96
8	Audreanne	Keeling	$630.98
9	Herminio	Kautzer	$493.69
10	Tyreek	Muller	$893.39

1 - 10 of 50

App.tsx


"use client";
 
import { DataTable, DataTableBody, DataTableFooter } from "@optiaxiom/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useMemo, useState } from "react";
 
import { columns } from "./columns";
import { data } from "./data";
 
/**
 * Simulate fetching data from server.
 */
const fetchData = ({ pageIndex = 0, pageSize = 10 }) =>
  data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
 
export function App() {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10,
  });
 
  const table = useReactTable({
    columns,
    data: useMemo(() => fetchData(pagination), [pagination]),
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    onPaginationChange: setPagination,
    rowCount: data.length,
    state: { pagination },
  });
  return (
    <DataTable maxH="xs" table={table}>
      <DataTableBody />
      <DataTableFooter />
    </DataTable>
  );
}

columns.ts


import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: string;
  firstName: string;
  id: number;
  lastName: string;
}>();
 
export const columns = [
  columnHelper.accessor("id", {
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 50 }, (_, index) => ({
  amount: faker.finance.amount(),
  firstName: faker.person.firstName(),
  id: index + 1,
  lastName: faker.person.lastName(),
}));

#
Loading state

Set the loading prop to true to show a loading skeleton while your table data is loading.

App.tsx


"use client";
 
import { DataTable, DataTableBody, Flex, Switch } from "@optiaxiom/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useState } from "react";
 
import { columns } from "./columns";
 
export function App() {
  const [data] = useState([]);
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
  });
 
  const [loading, setLoading] = useState(true);
 
  return (
    <Flex alignItems="start" maxW="full">
      <Switch checked={loading} onCheckedChange={setLoading}>
        Loading
      </Switch>
 
      <DataTable maxH="xs" table={table}>
        <DataTableBody loading={loading} />
      </DataTable>
    </Flex>
  );
}

Alternatively you can provide an object to the loading prop to denote individual loading state of sub rows.


1	Edgardo	Lubowitz	$696.47


2	Henri	Paucek-Kshlerin	$719.47
3	Everardo	Kessler	$392.12

App.tsx


"use client";
 
import { DataTable, DataTableBody, Flex, Switch } from "@optiaxiom/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useState } from "react";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => row.id.toString(),
  });
 
  const [loading, setLoading] = useState<Record<string, "sub-rows" | boolean>>({
    "1": "sub-rows",
  });
 
  return (
    <Flex alignItems="start" maxW="full">
      <Switch
        checked={loading["1"] === "sub-rows"}
        onCheckedChange={(checked) =>
          setLoading({ "1": checked ? "sub-rows" : false })
        }
      >
        Loading
      </Switch>
 
      <DataTable maxH="xs" table={table}>
        <DataTableBody loading={loading} />
      </DataTable>
    </Flex>
  );
}

columns.ts


import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: string;
  firstName: string;
  id: number;
  lastName: string;
}>();
 
export const columns = [
  columnHelper.accessor("id", {
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 3 }, (_, index) => ({
  amount: faker.finance.amount(),
  firstName: faker.person.firstName(),
  id: index + 1,
  lastName: faker.person.lastName(),
}));

#
Sorting

DataTable supports both client-side and server-side sorting. Follow the sorting guide to learn how to implement sorting with TanStack Table.

#
Client side

Simply provide getSortedRowModel on table and optionally use enableSorting to control which columns you’d like to be sortable to use client-side sorting.

Hover over and click the table headers to sort by columns:

ID
1	Edgardo	Lubowitz	$696.47
2	Henri	Paucek-Kshlerin	$719.47
3	Everardo	Kessler	$392.12
4	Granville	Deckow	$59.67
5	Justyn	Nicolas	$175.45
6	Modesta	Reichert	$849.44
7	Francesca	Greenholt	$322.96
8	Audreanne	Keeling	$630.98
9	Herminio	Kautzer	$493.69
10	Tyreek	Muller	$893.39

App.tsx


"use client";
 
import { DataTable, DataTableBody } from "@optiaxiom/react";
import {
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
  return (
    <DataTable maxH="xs" table={table}>
      <DataTableBody />
    </DataTable>
  );
}

columns.ts


import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: string;
  firstName: string;
  id: number;
  lastName: string;
}>();
 
export const columns = [
  columnHelper.accessor("id", {
    enableSorting: false,
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
    sortingFn: "alphanumeric",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 10 }, (_, index) => ({
  amount: faker.finance.amount(),
  firstName: faker.person.firstName(),
  id: index + 1,
  lastName: faker.person.lastName(),
}));

#
Server side

To implement manual server-side sorting we can use manualSorting. Then combine it with onSortingChange and state.sorting to control sorting and react to changes.

Hover over and click the table headers to sort by columns:

ID
8	Audreanne	Keeling	$630.98
1	Edgardo	Lubowitz	$696.47
3	Everardo	Kessler	$392.12
7	Francesca	Greenholt	$322.96
4	Granville	Deckow	$59.67
2	Henri	Paucek-Kshlerin	$719.47
9	Herminio	Kautzer	$493.69
5	Justyn	Nicolas	$175.45
6	Modesta	Reichert	$849.44
10	Tyreek	Muller	$893.39

App.tsx


"use client";
 
import { DataTable, DataTableBody } from "@optiaxiom/react";
import {
  getCoreRowModel,
  type SortingState,
  useReactTable,
} from "@tanstack/react-table";
import { useMemo, useState } from "react";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const [sorting, setSorting] = useState([
    {
      desc: false,
      id: "firstName",
    },
  ]);
 
  const table = useReactTable({
    columns,
    data: useMemo(() => sortData(sorting), [sorting]),
    getCoreRowModel: getCoreRowModel(),
    onSortingChange: setSorting,
    state: { sorting },
  });
  return (
    <DataTable maxH="xs" table={table}>
      <DataTableBody />
    </DataTable>
  );
}
 
/**
 * Simulate sorting data from server.
 */
const sortData = (sorting: SortingState) =>
  data.toSorted((a, b) => {
    for (const state of sorting) {
      if (
        !(
          state.id === "amount" ||
          state.id === "firstName" ||
          state.id === "lastName"
        )
      ) {
        return 0;
      }
 
      const result =
        (state.desc ? -1 : 1) *
        a[state.id].localeCompare(b[state.id], undefined, { numeric: true });
      if (result !== 0) {
        return result;
      }
    }
    return 0;
  });

columns.ts


import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: string;
  firstName: string;
  id: number;
  lastName: string;
}>();
 
export const columns = [
  columnHelper.accessor("id", {
    enableSorting: false,
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
export const data = Array.from({ length: 10 }, (_, index) => ({
  amount: faker.finance.amount(),
  firstName: faker.person.firstName(),
  id: index + 1,
  lastName: faker.person.lastName(),
}));

#
Expanding rows ALPHA

Follow the expanding guide to allow expanding and collapsing rows.

Use the DataTableExpandableHeader and DataTableExpandableCell components to render columns with built-in buttons for toggling rows.

Finally, combine it with the loading prop to show a loading state while expanded rows are being fetched.


1	Clothing	$1415.94
2	Books	$919.50

App.tsx


"use client";
 
import { DataTable, DataTableBody } from "@optiaxiom/react";
import {
  getCoreRowModel,
  getExpandedRowModel,
  useReactTable,
} from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getSubRows: (row) => row.items,
  });
  return (
    <DataTable table={table}>
      <DataTableBody />
    </DataTable>
  );
}

columns.tsx


import {
  DataTableExpandableCell,
  DataTableExpandableHeader,
} from "@optiaxiom/react/unstable";
import { createColumnHelper } from "@tanstack/react-table";
 
type Data = {
  amount: null | string;
  id: string;
  items: Array<Data>;
  name: string;
};
const columnHelper = createColumnHelper<Data>();
 
export const columns = [
  columnHelper.accessor("id", {
    header: "ID",
    size: 60,
  }),
  columnHelper.accessor("name", {
    cell: DataTableExpandableCell,
    header: () => <DataTableExpandableHeader>Name</DataTableExpandableHeader>,
    size: 200,
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue, row }) =>
      row.getValue("amount") ? `$${renderValue()}` : null,
    header: "Amount",
  }),
];

data.ts


import { faker } from "@faker-js/faker";
 
faker.seed(123);
 
const itemsByGroup = Array.from({ length: 2 }, (_, i) =>
  Array.from({ length: 2 }, (_, j) => ({
    amount: faker.finance.amount(),
    id: `${i + 1}.${j + 1}`,
    items: [],
    name: faker.commerce.productName(),
  })),
);
 
export const data = Array.from({ length: itemsByGroup.length }, (_, index) => ({
  amount: itemsByGroup[index]
    .reduce((acc, item) => acc + Number(item.amount), 0)
    .toFixed(2),
  id: `${index + 1}`,
  items: itemsByGroup[index],
  name: faker.commerce.department(),
}));

#
Virtualized

Table automatically uses virtualized rendering when rows and columns cross a certain threshold to improve rendering performance.

Columns will be virtualized when there are more than 20 columns in a table and rows will be virtualized when there are more than 20 rows rendered or if columns are also being virtualized.

Timer: 0s (to simulate re-rendering)