DataTable

Easy to use table and datagrids built using TanStack Table .

Want to skip the docs? Try our MCP Server

#
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	Krystel	Wuckert	$696.47
2	Faye	Beier	$684.83
3	Cloyd	Nicolas	$398.04
4	Nathan	Farrell	$849.44
5	Harvey	Kautzer	$293.71
6	Teagan	Buckridge	$312.26
7	Destany	Leannon-Moore	$317.28
8	Johnny	Johnson	$120.62
9	Marco	Padberg	$681.30
10	Delia	Boyer	$842.35
11	Agustin	Cronin	$885.33
12	Maxwell	Walsh	$153.07
13	Emelie	Ziemann	$841.67
14	Maxwell	Fisher	$355.91
15	Branson	Okuneva	$343.45
16	Garrison	D'Amore	$846.51
17	Lelah	Yundt	$829.12
18	Katlynn	Gerhold-Maggio	$905.35
19	Cara	Wyman	$806.97
20	Jazlyn	Gulgowski	$79.36
21	Omar	Quitzon	$927.59
22	Elinore	Brown	$839.25
23	Henri	Mann	$664.87
24	Esteban	Marvin	$84.90
25	Rebeca	Bode	$751.65
26	Lauren	Schroeder	$138.41
27	Jordon	DuBuque	$467.99
28	Alessandra	Rodriguez	$717.76
29	Anahi	Runte-Marvin	$472.91
30	Anibal	Kautzer	$102.63
31	Cayla	Dibbert	$788.19
32	Toby	Kohler	$417.29
33	Dejah	Schowalter	$502.22
34	Willa	Abshire	$894.98
35	Brad	Heaney-Schmeler	$484.91
36	Mckenna	Wisoky	$798.85
37	Dock	Zemlak	$650.75
38	Athena	Nicolas	$236.46
39	Georgiana	Metz	$281.23
40	Stefan	Sanford	$293.15
41	Ryann	Keeling-Swaniawski	$45.89
42	Tyrese	Casper	$355.96
43	Addie	Swift	$596.49
44	Darryl	Gusikowski	$363.57
45	London	Kutch	$418.63
46	Clemmie	Hintz	$3.53
47	Mina	Schulist	$857.16
48	Myrtis	Wehner	$335.54
49	Edyth	Hansen	$908.02
50	Waino	Carroll	$882.28

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	Korbin.Hettinger	Megane34@gmail.com	Helena	Nicolas	Legacy Directives Officer	$696.47
2	Lily68	Itzel_Trantow@hotmail.com	Ila	Moore	Human Functionality Analyst	$92.10
3	Maxwell_Walsh35	Marlon.Runolfsdottir@yahoo.com	Lucinda	Cremin	Legacy Solutions Planner	$510.42
4	Elwin.Simonis	Harley.Pouros39@hotmail.com	Malvina	Lueilwitz	Direct Research Director	$304.77
5	Kristin45	Cordie_Turcotte@gmail.com	Newton	Keebler	Corporate Communications Facilitator	$521.53
6	Ollie82	Claud_Haag@gmail.com	Henri	Schultz	District Accounts Planner	$741.86
7	Norberto65	Isabelle46@gmail.com	Therese	Barrows	Customer Implementation Developer	$128.63
8	Ignacio.Beahan9	Maiya.Leannon@hotmail.com	Essie	Von	Internal Directives Administrator	$769.40
9	Vilma.Bailey50	Willa.Abshire@yahoo.com	Vesta	Rau	National Data Consultant	$807.79
10	Alma42	Athena.Nicolas36@gmail.com	Carla	Armstrong	Customer Response Orchestrator	$993.04
11	Jean_White50	Rickie.Metz72@yahoo.com	Serena	Okuneva	National Operations Planner	$355.96
12	Leopold88	Hilda68@yahoo.com	Ervin	Wehner	National Markets Producer	$480.89
13	Dawson46	Beaulah_Bosco@yahoo.com	Cordelia	Powlowski	Future Mobility Designer	$709.63
14	Drew.Vandervort	Paolo_Kovacek67@gmail.com	Trinity	Erdman	Central Functionality Coordinator	$237.48
15	Annamarie.Jacobi95	Twila.Moore@gmail.com	Edwin	Jast-O'Reilly	Chief Creative Director	$444.22
16	Joany23	Sarah_VonRueden@hotmail.com	Rosalee	Bailey	Regional Branding Representative	$625.21
17	Betty98	Modesto.Zulauf64@gmail.com	Bill	Klein	Investor Mobility Technician	$134.61
18	Jabari.Zemlak22	Geoffrey.Trantow42@hotmail.com	Ray	Kiehn	Human Factors Specialist	$919.48
19	Johnson_Dare75	Alfred_Beer37@gmail.com	Marcus	Schmeler	Future Operations Designer	$147.72
20	Rusty60	Deondre_Rowe@gmail.com	Patricia	Kemmer-Torp	Central Division Specialist	$817.10
21	Darrin47	Demarco.Jacobson@gmail.com	Alex	Koss	Lead Quality Developer	$715.75
22	Merritt_Welch62	Shea_Rolfson-Lindgren@gmail.com	Enrico	Koepp-Paucek	Corporate Applications Engineer	$31.66
23	Keaton.Breitenberg	Franco_Buckridge80@yahoo.com	Nelle	McGlynn	Internal Directives Strategist	$225.53
24	Zoe29	Ottis.Blick46@hotmail.com	Jayme	Ryan	Direct Implementation Engineer	$328.33
25	May_Gottlieb-Bernier69	Zetta_Mertz66@yahoo.com	Anastacio	Stokes	International Implementation Supervisor	$15.01
26	Omari_McGlynn	Dandre_Runte@hotmail.com	Talon	Goyette	Chief Interactions Producer	$338.58
27	Eugenia.Spencer41	Clinton_OHara22@yahoo.com	Felipe	Langworth	Future Research Strategist	$554.41
28	Victoria.Ernser	Ashleigh.Hudson@yahoo.com	Tara	Pollich	Global Functionality Strategist	$205.35
29	Leonie.Fisher	Devyn.Reilly91@gmail.com	Faustino	Kunde-Rolfson	Investor Functionality Manager	$83.34
30	Josephine_Hickle32	Victor87@yahoo.com	Rico	Morar	Lead Branding Technician	$393.42
31	Dakota72	Jeff42@yahoo.com	Favian	Hoppe	Dynamic Directives Executive	$751.12
32	Garland33	Maryann_Powlowski@yahoo.com	Alanis	Batz	Global Group Liaison	$668.00
33	Lynn.Johns	Miracle39@gmail.com	Benedict	Friesen	Direct Accountability Architect	$458.82
34	Vella_Beer	Katie_Lang@hotmail.com	Ressie	Halvorson	Product Applications Supervisor	$497.47
35	Issac_OConnell	Elody_Green49@yahoo.com	Leah	Bernhard	Direct Branding Director	$264.40
36	Terence0	Janie.Dickinson17@yahoo.com	Amos	Hackett	Chief Integration Liaison	$447.36
37	Zackery_Zemlak16	Angela62@yahoo.com	Zelda	Armstrong	Global Data Supervisor	$356.24
38	Brandy75	Darrell.Marvin44@gmail.com	Angus	Marvin	International Brand Designer	$680.19
39	Maya97	Sallie.Crona@gmail.com	Meggie	Bruen	Legacy Directives Director	$957.85
40	Isai.Beahan	Maximus.Schmidt@yahoo.com	Retha	Swaniawski	Direct Factors Executive	$673.63
41	Meredith86	Ashleigh_Raynor29@gmail.com	Ashleigh	Shanahan	Lead Response Officer	$493.83
42	Garrick71	Merritt84@yahoo.com	Hassie	Spencer	Central Factors Consultant	$193.32
43	Guido.Crist59	Morris.Witting61@yahoo.com	Myah	Quitzon	Product Operations Officer	$863.86
44	Eden27	Lilian.Collier@yahoo.com	Loyal	Rau-Schowalter	Legacy Infrastructure Supervisor	$238.55
45	Jonatan80	Sadie.Huels86@gmail.com	Cathryn	Schimmel	Investor Mobility Officer	$347.06
46	Leola_Block67	Jensen_Leannon5@gmail.com	Dell	Daugherty	Lead Data Facilitator	$704.51
47	Danial80	Leatha95@yahoo.com	Delaney	Bergnaum	Dynamic Implementation Representative	$828.99
48	Archibald_Sipes92	Seamus.Corkery54@gmail.com	Fabian	Blick	Regional Data Director	$711.01
49	Alonzo8	Roel91@gmail.com	Ezekiel	Collier	District Marketing Analyst	$937.37
50	Louis75	Jensen_Stamm53@hotmail.com	Jeannette	Dooley	Forward Web Developer	$3.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	Krystel Kassulke MD	$696.47
Check to select	2	Meredith Beier	$480.93
Check to select	3	Mrs. Kelley Nicolas	$738.00
Check to select	4	Dana Murray	$722.45
Check to select	5	Itzel Kautzer DVM	$433.70

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
Health - Handcrafted Cotton Sausages	Nov 13, 2026	Krystel Kassulke MD
Home - Oriental Silk Sausages	Nov 13, 2026	Miracle Daniel
Beauty - Handmade Gold Hat	Nov 13, 2026	Forest Greenholt
Beauty - Generic Gold Soap	Nov 13, 2026	Shyanne Kuvalis
Games - Generic Gold Salad	Nov 13, 2026	Mrs. Kayden Cartwright

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,
    enableRowSelection: false,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <DataTable table={table}>
      <DataTableBody />
    </DataTable>
  );
}

columns.tsx


import { IconShareNodes } from "@optiaxiom/icons";
import {
  Box,
  Button,
  DataTableAction,
  DataTableLabel,
  EllipsisMenuButton,
  Group,
  Link,
  Menu,
  MenuContent,
  MenuTrigger,
  Text,
  toaster,
} from "@optiaxiom/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 }) => (
      <Group gap="16" 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>
 
        <Group flex="none" 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={<IconShareNodes />}
              size="sm"
            />
          </DataTableAction>
        </Group>
      </Group>
    ),
    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(),
}));

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(),
}));

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, Group, 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 (
    <Group alignItems="start" flexDirection="column" gap="16" maxW="full">
      <Switch checked={loading} onCheckedChange={setLoading}>
        Loading
      </Switch>
      <DataTable maxH="xs" table={table}>
        <DataTableBody loading={loading} />
      </DataTable>
    </Group>
  );
}

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


1	Krystel	Wuckert	$696.47


2	Faye	Beier	$684.83
3	Cloyd	Nicolas	$398.04

App.tsx


"use client";
 
import { DataTable, DataTableBody, Group, 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" | false>>({
    "1": "sub-rows",
  });
 
  return (
    <Group alignItems="start" flexDirection="column" gap="16" 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>
    </Group>
  );
}

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(),
}));

#
Empty state

Use the empty prop on DataTableBody to show content in a full-width row when the table has no rows.


No payments yet.

App.tsx


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

#
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	Krystel	Wuckert	$696.47
2	Faye	Beier	$684.83
3	Cloyd	Nicolas	$398.04
4	Nathan	Farrell	$849.44
5	Harvey	Kautzer	$293.71
6	Teagan	Buckridge	$312.26
7	Destany	Leannon-Moore	$317.28
8	Johnny	Johnson	$120.62
9	Marco	Padberg	$681.30
10	Delia	Boyer	$842.35

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
3	Cloyd	Nicolas	$398.04
10	Delia	Boyer	$842.35
7	Destany	Leannon-Moore	$317.28
2	Faye	Beier	$684.83
5	Harvey	Kautzer	$293.71
8	Johnny	Johnson	$120.62
1	Krystel	Wuckert	$696.47
9	Marco	Padberg	$681.30
4	Nathan	Farrell	$849.44
6	Teagan	Buckridge	$312.26

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(),
}));

A collection page combines a search input and filter menus above the table with a primary create action. Wire search to globalFilter and each menu to its column’s filter value, add getFilteredRowModel and getPaginationRowModel, and TanStack resets to the first page whenever the criteria change. Put row commands in a trailing column behind one EllipsisMenuButton, and use empty to offer a way out when nothing matches.


Item 1	Draft	Ada Lovelace
Item 2	Ready	Grace Hopper
Item 3	Ready	Alan Turing
Item 4	Draft	Ada Lovelace
Item 5	Ready	Grace Hopper
Item 6	Ready	Alan Turing
Item 7	Draft	Ada Lovelace
Item 8	Ready	Grace Hopper
Item 9	Ready	Alan Turing
Item 10	Draft	Ada Lovelace

1 - 10 of 24

App.tsx


"use client";
 
import { IconPlus } from "@optiaxiom/icons";
import {
  Button,
  DataTable,
  DataTableBody,
  DataTableFooter,
  Flex,
  Group,
  LabelMenuButton,
  Menu,
  MenuContent,
  MenuTrigger,
  SearchInput,
  toaster,
} from "@optiaxiom/react";
import {
  type ColumnFiltersState,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { useRef, useState } from "react";
 
import { columns } from "./columns";
import { data } from "./data";
 
const filters = [
  { id: "status", label: "Status", values: ["Draft", "Ready"] },
  {
    id: "owner",
    label: "Owner",
    values: [...new Set(data.map((item) => item.owner))].sort(),
  },
];
 
export function App() {
  const searchRef = useRef<HTMLInputElement>(null);
  const [globalFilter, setGlobalFilter] = useState("");
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    globalFilterFn: "includesString",
    initialState: { pagination: { pageIndex: 0, pageSize: 10 } },
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
    state: { columnFilters, globalFilter },
  });
 
  return (
    <Flex maxW="full" w="full">
      <Group flexWrap="wrap" gap="12" justifyContent="space-between">
        <Group flexWrap="wrap" gap="8">
          <SearchInput
            aria-label="Search items"
            onValueChange={setGlobalFilter}
            placeholder="Search items"
            ref={searchRef}
            size="lg"
            value={globalFilter}
          />
          {filters.map((filter) => {
            const column = table.getColumn(filter.id);
            const value = column?.getFilterValue() as string | undefined;
            return (
              <Menu
                key={filter.id}
                options={[undefined, ...filter.values].map((option) => ({
                  execute: () => column?.setFilterValue(option),
                  label: option ?? "All",
                  selected: value === option,
                }))}
              >
                <MenuTrigger asChild>
                  <LabelMenuButton label={filter.label}>
                    {value ?? "All"}
                  </LabelMenuButton>
                </MenuTrigger>
                <MenuContent />
              </Menu>
            );
          })}
        </Group>
        <Button
          appearance="primary"
          icon={<IconPlus />}
          onClick={() => toaster.create("Create item")}
          size="lg"
        >
          Create item
        </Button>
      </Group>
 
      <DataTable table={table}>
        <DataTableBody
          empty={
            <>
              No items match your filters.
              <Button
                appearance="subtle"
                mt="8"
                onClick={() => {
                  setGlobalFilter("");
                  setColumnFilters([]);
                  searchRef.current?.focus();
                }}
              >
                Clear filters
              </Button>
            </>
          }
        />
        <DataTableFooter />
      </DataTable>
    </Flex>
  );
}

columns.tsx


import {
  DataTableAction,
  DataTableLabel,
  EllipsisMenuButton,
  Menu,
  MenuContent,
  MenuTrigger,
  toaster,
} from "@optiaxiom/react";
import { VisuallyHidden } from "@optiaxiom/react/unstable";
import { createColumnHelper } from "@tanstack/react-table";
 
import type { Item } from "./data";
 
const columnHelper = createColumnHelper<Item>();
 
export const columns = [
  columnHelper.accessor("name", {
    cell: ({ renderValue }) => <DataTableLabel>{renderValue()}</DataTableLabel>,
    header: "Name",
  }),
  columnHelper.accessor("status", {
    enableGlobalFilter: false,
    filterFn: "equals",
    header: "Status",
  }),
  columnHelper.accessor("owner", {
    enableGlobalFilter: false,
    filterFn: "equals",
    header: "Owner",
  }),
  columnHelper.display({
    cell: ({ row }) => (
      <Menu
        options={[
          {
            execute: () => toaster.create(`Edit ${row.original.name}`),
            label: "Edit",
          },
          {
            execute: () => toaster.create(`Delete ${row.original.name}`),
            intent: "danger",
            label: "Delete",
          },
        ]}
      >
        <DataTableAction>
          <MenuTrigger asChild>
            <EllipsisMenuButton
              appearance="subtle"
              aria-label={`Actions for ${row.original.name}`}
              size="sm"
            />
          </MenuTrigger>
        </DataTableAction>
        <MenuContent />
      </Menu>
    ),
    enableResizing: false,
    header: () => <VisuallyHidden>Actions</VisuallyHidden>,
    id: "actions",
    size: 64,
  }),
];

data.ts


export type Item = {
  id: number;
  name: string;
  owner: string;
  status: "Draft" | "Ready";
};
 
const owners = ["Ada Lovelace", "Grace Hopper", "Alan Turing"];
 
export const data: Item[] = Array.from({ length: 24 }, (_, index) => ({
  id: index + 1,
  name: `Item ${index + 1}`,
  owner: owners[index % owners.length],
  status: index % 3 === 0 ? "Draft" : "Ready",
}));

#
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)