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	Leah	Wuckert	$696.47
2	Geraldine	Beier	$684.83
3	Clayton	Nicolas	$398.04
4	Michel	Farrell	$849.44
5	Homer	Kautzer	$293.71
6	Tyrell	Buckridge	$312.26
7	Delphine	Leannon-Moore	$317.28
8	Karianne	Johnson	$120.62
9	Maurice	Padberg	$681.30
10	Declan	Boyer	$842.35
11	Adriana	Cronin	$885.33
12	Moses	Walsh	$153.07
13	Ethel	Ziemann	$841.67
14	Markus	Fisher	$355.91
15	Aylin	Okuneva	$343.45
16	Gerson	D'Amore	$846.51
17	Lois	Yundt	$829.12
18	Krista	Gerhold-Maggio	$905.35
19	Carli	Wyman	$806.97
20	Joanne	Gulgowski	$79.36
21	Philip	Quitzon	$927.59
22	Edwina	Brown	$839.25
23	Iliana	Mann	$664.87
24	Eugenia	Marvin	$84.90
25	Raven	Bode	$751.65
26	Leticia	Schroeder	$138.41
27	Julius	DuBuque	$467.99
28	Alec	Rodriguez	$717.76
29	Arlene	Runte-Marvin	$472.91
30	Alvera	Kautzer	$102.63
31	Clara	Dibbert	$788.19
32	Theodore	Kohler	$417.29
33	Donna	Schowalter	$502.22
34	Virginia	Abshire	$894.98
35	Bob	Heaney-Schmeler	$484.91
36	Mona	Wisoky	$798.85
37	Doug	Zemlak	$650.75
38	Blanca	Nicolas	$236.46
39	Gwendolyn	Metz	$281.23
40	Spencer	Sanford	$293.15
41	Sarai	Keeling-Swaniawski	$45.89
42	Tony	Casper	$355.96
43	Adaline	Swift	$596.49
44	Darren	Gusikowski	$363.57
45	Kristian	Kutch	$418.63
46	Cleveland	Hintz	$3.53
47	Margarette	Schulist	$857.16
48	Olive	Wehner	$335.54
49	Donnell	Hansen	$908.02
50	Vernie	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	Leilani.Hettinger	Monique34@gmail.com	Irma	Nicolas	Legacy Directives Officer	$696.47
2	Laverna68	Jeannette_Trantow@hotmail.com	Janie	Moore	Human Functionality Analyst	$92.10
3	Moses_Walsh35	Mallory.Runolfsdottir@yahoo.com	Lilian	Cremin	Legacy Solutions Planner	$510.42
4	Emanuel.Simonis	Flavio.Pouros39@hotmail.com	Maryann	Lueilwitz	Direct Research Director	$304.77
5	Laverne45	Corbin_Turcotte@gmail.com	Otis	Keebler	Corporate Communications Facilitator	$521.53
6	Nasir82	Carolyne_Haag@gmail.com	Iliana	Schultz	District Accounts Planner	$741.86
7	Perry65	Jeanne46@gmail.com	Teri	Barrows	Customer Implementation Developer	$128.63
8	Ivan.Beahan9	Maddison.Leannon@hotmail.com	Faye	Von	Internal Directives Administrator	$769.40
9	Vicki.Bailey50	Virginia.Abshire@yahoo.com	Verna	Rau	National Data Consultant	$807.79
10	Ally42	Blanca.Nicolas36@gmail.com	Charlotte	Armstrong	Customer Response Orchestrator	$993.04
11	Jodi_White50	Reyes.Metz72@yahoo.com	Sherri	Okuneva	National Operations Planner	$355.96
12	Malcolm88	Jana68@yahoo.com	Ethelyn	Wehner	National Markets Producer	$480.89
13	Darian46	Brenda_Bosco@yahoo.com	Cristian	Powlowski	Future Mobility Designer	$709.63
14	Dwayne.Vandervort	Nya_Kovacek67@gmail.com	Toni	Erdman	Central Functionality Coordinator	$237.48
15	Bernice.Jacobi95	Tonya.Moore@gmail.com	Edmund	Jast-O'Reilly	Chief Creative Director	$444.22
16	Jamarcus23	Shelley_VonRueden@hotmail.com	Ruth	Bailey	Regional Branding Representative	$625.21
17	Braxton98	Nelson.Zulauf64@gmail.com	Bill	Klein	Investor Mobility Technician	$134.61
18	Jason.Zemlak22	Gilbert.Trantow42@hotmail.com	Roderick	Kiehn	Human Factors Specialist	$919.48
19	Julian_Dare75	Allen_Beer37@gmail.com	Major	Schmeler	Future Operations Designer	$147.72
20	Rosendo60	Devin_Rowe@gmail.com	Rachael	Kemmer-Torp	Central Division Specialist	$817.10
21	Darrell47	Deangelo.Jacobson@gmail.com	Alfred	Koss	Lead Quality Developer	$715.75
22	Maci_Welch62	Sydni_Rolfson-Lindgren@gmail.com	Ericka	Koepp-Paucek	Corporate Applications Engineer	$31.66
23	Korbin.Breitenberg	Freddie_Buckridge80@yahoo.com	Nikolas	McGlynn	Internal Directives Strategist	$225.53
24	Zetta29	Randall.Blick46@hotmail.com	Irwin	Ryan	Direct Implementation Engineer	$328.33
25	Mayra_Gottlieb-Bernier69	Zella_Mertz66@yahoo.com	Aliyah	Stokes	International Implementation Supervisor	$15.01
26	Philip_McGlynn	Cordie_Runte@hotmail.com	Stewart	Goyette	Chief Interactions Producer	$338.58
27	Freda.Spencer41	Clayton_OHara22@yahoo.com	Felton	Langworth	Future Research Strategist	$554.41
28	Vicki.Ernser	Beverly.Hudson@yahoo.com	Theresia	Pollich	Global Functionality Strategist	$205.35
29	Kolby.Fisher	Dimitri.Reilly91@gmail.com	Floyd	Kunde-Rolfson	Investor Functionality Manager	$83.34
30	Jarret_Hickle32	Van87@yahoo.com	Raven	Morar	Lead Branding Technician	$393.42
31	Damaris72	Joey42@yahoo.com	Floyd	Hoppe	Dynamic Directives Executive	$751.12
32	Geoffrey33	Maud_Powlowski@yahoo.com	Alma	Batz	Global Group Liaison	$668.00
33	Margarita.Johns	Mose39@gmail.com	Benjamin	Friesen	Direct Accountability Architect	$458.82
34	Valerie_Beer	Krista_Lang@hotmail.com	Rose	Halvorson	Product Applications Supervisor	$497.47
35	Jaqueline_OConnell	Erma_Green49@yahoo.com	Lindsay	Bernhard	Direct Branding Director	$264.40
36	Sylvester0	Jo.Dickinson17@yahoo.com	Alivia	Hackett	Chief Integration Liaison	$447.36
37	Woodrow_Zemlak16	Audrey62@yahoo.com	Winifred	Armstrong	Global Data Supervisor	$356.24
38	Carole75	Darrel.Marvin44@gmail.com	Andres	Marvin	International Brand Designer	$680.19
39	Misty97	Shawna.Crona@gmail.com	Mia	Bruen	Legacy Directives Director	$957.85
40	Jamison.Beahan	Morris.Schmidt@yahoo.com	Rosemarie	Swaniawski	Direct Factors Executive	$673.63
41	Misael86	Aurelie_Raynor29@gmail.com	Beverly	Shanahan	Lead Response Officer	$493.83
42	German71	Macey84@yahoo.com	Florian	Spencer	Central Factors Consultant	$193.32
43	Harry.Crist59	Nick.Witting61@yahoo.com	Nash	Quitzon	Product Operations Officer	$863.86
44	Efren27	Laron.Collier@yahoo.com	Leilani	Rau-Schowalter	Legacy Infrastructure Supervisor	$238.55
45	Julio80	Rupert.Huels86@gmail.com	Chase	Schimmel	Investor Mobility Officer	$347.06
46	Lora_Block67	Jabari_Leannon5@gmail.com	Dell	Daugherty	Lead Data Facilitator	$704.51
47	Daniel80	Lindsey95@yahoo.com	Donna	Bergnaum	Dynamic Implementation Representative	$828.99
48	Amaya_Sipes92	Sergio.Corkery54@gmail.com	Fernando	Blick	Regional Data Director	$711.01
49	Alexanne8	Roy91@gmail.com	Fabian	Collier	District Marketing Analyst	$937.37
50	Mark75	Itzel_Stamm53@hotmail.com	Johanna	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	Leah Kassulke MD	$696.47
Check to select	2	Nadine Beier	$480.93
Check to select	3	Mrs. Kristine Nicolas	$738.00
Check to select	4	Desiree Murray	$722.45
Check to select	5	Jeannette 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	Jul 10, 2026	Leah Kassulke MD
Home - Oriental Silk Sausages	Jul 10, 2026	Nellie Daniel
Beauty - Handmade Gold Hat	Jul 10, 2026	Fred Greenholt
Beauty - Generic Gold Soap	Jul 10, 2026	Sophie Kuvalis
Games - Generic Gold Salad	Jul 10, 2026	Mrs. Josianne 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(),
}));

#
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	Leah	Wuckert	$696.47
2	Geraldine	Beier	$684.83
3	Clayton	Nicolas	$398.04
4	Michel	Farrell	$849.44
5	Homer	Kautzer	$293.71
6	Tyrell	Buckridge	$312.26
7	Delphine	Leannon-Moore	$317.28
8	Karianne	Johnson	$120.62
9	Maurice	Padberg	$681.30
10	Declan	Boyer	$842.35

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	Leah	Wuckert	$696.47
2	Geraldine	Beier	$684.83
3	Clayton	Nicolas	$398.04
4	Michel	Farrell	$849.44
5	Homer	Kautzer	$293.71
6	Tyrell	Buckridge	$312.26
7	Delphine	Leannon-Moore	$317.28
8	Karianne	Johnson	$120.62
9	Maurice	Padberg	$681.30
10	Declan	Boyer	$842.35

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, 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	Leah	Wuckert	$696.47


2	Geraldine	Beier	$684.83
3	Clayton	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(),
}));

#
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	Leah	Wuckert	$696.47
2	Geraldine	Beier	$684.83
3	Clayton	Nicolas	$398.04
4	Michel	Farrell	$849.44
5	Homer	Kautzer	$293.71
6	Tyrell	Buckridge	$312.26
7	Delphine	Leannon-Moore	$317.28
8	Karianne	Johnson	$120.62
9	Maurice	Padberg	$681.30
10	Declan	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	Clayton	Nicolas	$398.04
10	Declan	Boyer	$842.35
7	Delphine	Leannon-Moore	$317.28
2	Geraldine	Beier	$684.83
5	Homer	Kautzer	$293.71
8	Karianne	Johnson	$120.62
1	Leah	Wuckert	$696.47
9	Maurice	Padberg	$681.30
4	Michel	Farrell	$849.44
6	Tyrell	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(),
}));

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