@neo4j-ndl/react 4.16.8 → 4.16.9

package/skills/ndl-react/components/data-grid.md

@@ -0,0 +1,3121 @@
+# DataGrid
+
+Import: `import { DataGrid } from '@neo4j-ndl/react'`
+
+## Props
+
+### DataGrid
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `components` | `DataGridComponentsInterface<T>` |  |  | Table sub-component overrides |
+| `isAutoResizingColumns` | `boolean` |  | `true` | Enables automatic resizing of columns. If `isResizable` is `true`, the columns will only be automatically resized on initial render of the table. If `isResizable` is `false`, the columns will be resized automatically to always fit the table width (assuming that column maxWidths allow for it). Note: Action columns are a fixed size of 40px, and Pinned columns are not resized automatically. @defaultValue true |
+| `isKeyboardNavigable` | `boolean` |  | `true` | Enables keyboard navigation. To control keyboard navigation programmatically for edge cases, pass a `ref` to `tableNavRef` |
+| `isLoading` | `boolean` |  | `false` | Enables table's loading state |
+| `isResizable` | `boolean` |  | `true` | Resizing the width of columns |
+| `isSkeletonLoading` | `boolean` |  | `false` |  |
+| `portalTarget` | `HTMLElement \| null` |  | `document.body` | The target element for portaled elements to be rendered in, e.g. the modal root if the data grid is inside a modal. This is used in for example the DropdownCell, RowsPerPage, and ColumnControls. |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+| `rootProps` | `HtmlAttributes<"div">` |  |  | @deprecated Use htmlAttributes, className and style on the root element instead |
+| `skeletonProps` | `(SkeletonProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>)` |  |  |  |
+| `styleRules` | `{ apply: { color?: { value: string; isDisabled?: boolean; }; colorRange?: { maxColor: string; maxValue: number; minColor: string; minValue: number; onColumn: string; isDisabled?: boolean \| undefined; midColor?: string \| undefined; midValue?: number \| undefined; } \| undefined; textColor?: { .....` |  |  | Rule-based conditional styling for cells and rows. |
+| `styleRuleValueConverters` | `DataGridStyleRuleValueConverters` |  |  | Per-column converters that teach the style-rule engine how to interpret complex cell values. |
+| `styling` | `Partial<{ hasZebraStriping: boolean; borderStyle: "all-sides" \| "horizontal" \| "vertical" \| "none"; headerStyle: "filled" \| "clean"; hasHoverEffects: boolean; isCompact: boolean; }>` |  | `{}` |  |
+| `tableInstance` | `Table<T>` | ✅ |  | Table instance created from `useTable` |
+| `tableNavRef` | `RefObject<any>` |  |  | Reference to the tableNav instance for programmatic control |
+
+### DataGrid.ActionButton
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `action` | `MenuItemProps` | ✅ |  |  |
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `onClose` | `() => void` | ✅ |  |  |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+
+### DataGrid.ActionCell
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `cell` | `CellContext<T, unknown>` |  |  |  |
+| `innerCleanIconButtonProps` | `Partial<Omit<CleanIconButtonButtonProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>, "ref">>` |  |  |  |
+| `innerMenuProps` | `Partial<MenuProps & { as?: ElementType<any, keyof IntrinsicElements>; } & BaseProps<ElementType<any, keyof IntrinsicElements>>>` |  |  |  |
+
+### DataGrid.Body
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.BodyCell
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `cell` | `Cell<T, unknown>` | ✅ |  |  |
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.BodyRow
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+| `row` | `Row<T>` | ✅ |  |  |
+
+### DataGrid.ColumnControls
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `cell` | `Header<T, unknown>` | ✅ |  |  |
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.DropDownCell
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | ✅ |  | Aria label of the select component. Required for accessibility. |
+| `cell` | `CellContext<T, unknown>` | ✅ |  |  |
+| `components` | `Partial<SelectComponents<DropDownCellOption, boolean, GroupBase<DropDownCellOption>>>` |  |  | Override the underlying react-select components (e.g. `Option`, `SingleValue`, `MultiValue`). Merged over the Needle defaults, so only the components you pass are replaced. |
+| `errorText` | `ReactNode` |  |  | Error message. If it exists the select will be in error state. |
+| `helpText` | `ReactNode` |  |  | Help text of the select component. |
+| `isDisabled` | `boolean` |  |  | Whether the select component is disabled |
+| `options` | `{ value: string; label: string; }[]` | ✅ |  |  |
+| `portalTarget` | `HTMLElement` |  | `document.body` | The target element to portal the menu of the select component to, e.g. the modal root if the data grid is inside a modal. Defaults to the portalTarget prop of the DataGrid root component. |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.Header
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.HeaderCell
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `cell` | `Header<T, unknown>` | ✅ |  |  |
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.HeaderTitle
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `cell` | `Header<T, unknown>` | ✅ |  |  |
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.InlineEditCell
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | ✅ |  |  |
+| `cell` | `CellContext<T, unknown>` | ✅ |  |  |
+| `ref` | `Ref<HTMLInputElement>` |  |  | A ref to apply to the root element. |
+| `value` | `string` | ✅ |  |  |
+
+### DataGrid.LoadingPlaceholder
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.Navigation
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.NoDataIcon
+
+_No props documented._
+### DataGrid.NoDataPlaceholder
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.NoDataPlaceholderContentWrapper
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.Pagination
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.PaginationArrowButton
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `action` | `'next' \| 'previous'` | ✅ |  |  |
+| `children` | `ReactNode` |  |  |  |
+| `onClick` | `(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void` |  |  |  |
+| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.PaginationNumericButton
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `currentIndex` | `string \| number` | ✅ |  |  |
+| `isSelected` | `boolean` | ✅ |  |  |
+| `onClick` | `(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void` |  |  |  |
+| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.ResizingBar
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `header` | `Header<T, unknown>` | ✅ |  |  |
+| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.RowsPerPage
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `portalTarget` | `HTMLElement` |  | `document.body` | The target element to portal the menu of the select component to. Should be document.body normally, or the modal root if the select is inside a modal. Defaults to the portalTarget prop of the DataGrid root component. |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.Scrollable
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `ref` | `Ref<HTMLDivElement> & RefObject<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+
+### DataGrid.TableResults
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  |  |
+| `manualPagination` | `{ from: number; to: number; totalRows: number; }` |  |  |  |
+| `ref` | `Ref<HTMLSpanElement>` |  |  | A ref to apply to the root element. |
+| `resultsLabel` | `string` |  |  | The label to use for the results, meaning the word "results" in the sentence "Showing X-Y of Z results". @defaultValue 'results' |
+
+## Examples
+
+### Datagrid Column Filtering
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={true}
+        tableInstance={table}
+        isKeyboardNavigable={true}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Compact Mode
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={false}
+        tableInstance={table}
+        isKeyboardNavigable={false}
+        styling={{
+          borderStyle: 'all-sides',
+          hasHoverEffects: true,
+          hasZebraStriping: false,
+          isCompact: true,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Component Overriding
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid, Tooltip, Typography } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-flex n-flex-col n-gap-token-8">
+      <Typography
+        variant="body-medium"
+        as="div"
+        className="n-flex n-flex-col n-gap-token-8 n-p-token-24 n-pb-token-16"
+      >
+        <div>Current container height: 400px</div>
+        <div>Try updating height with Storybook&apos; s story controls👇</div>
+      </Typography>
+
+      <div
+        style={{
+          height: '400px',
+        }}
+      >
+        <DataGrid
+          className="n-h-full"
+          isResizable={true}
+          tableInstance={table}
+          components={{
+            Body: (props) => <DataGrid.Body {...props} />,
+            HeaderTitle: ({ cell, children }) => {
+              const { column, id } = cell;
+              const title =
+                typeof column.columnDef.header === 'string'
+                  ? column.columnDef.header
+                  : id;
+              return (
+                <Tooltip type="simple">
+                  <Tooltip.Trigger hasButtonWrapper>
+                    <span>{children}</span>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>{title}</Tooltip.Content>
+                </Tooltip>
+              );
+            },
+            PaginationNumericButton: ({ isSelected, style, ...restProps }) => {
+              return (
+                <DataGrid.PaginationNumericButton
+                  {...restProps}
+                  isSelected={isSelected}
+                  style={{
+                    ...style,
+                    ...(isSelected && {
+                      backgroundImage:
+                        'linear-gradient(90deg, #00C0FF 0%, #FFCF00 20%, #FC4F4F 40%, #00C0FF 100%)',
+                      backgroundSize: '200% auto',
+                      borderRadius: '10px',
+                      boxShadow: '0 0 20px #eee',
+                    }),
+                  }}
+                />
+              );
+            },
+            TableResults: () => (
+              <DataGrid.TableResults>
+                A table with a fixed height of 100px, custom result section and
+                custom pagination button
+              </DataGrid.TableResults>
+            ),
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Custom Cell With Style Rules
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  DataGrid,
+  type DataGridStyleRule,
+  useDataGridCellStyle,
+} from '@neo4j-ndl/react';
+import {
+  type Cell,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type RowData,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';
+
+const styleRules: DataGridStyleRule[] = [
+  // Row coloring: all cells styled when name contains "Alicia"
+  {
+    apply: {
+      color: { value: '#000000' },
+      textColor: { value: '#ffffff' },
+    },
+    column: null,
+    priority: 3,
+    where: { contains: [{ column: 'name' }, 'Alicia'] },
+  },
+  // Cell coloring: cells in the "age" column with value 51 get green
+  {
+    apply: { color: { value: '#00bb00' } },
+    column: 'age',
+    priority: 3,
+    where: { equal: [{ column: 'age' }, 51] },
+  },
+  // Dual color ranges on the "age" column: independent gradients for background
+  // (driven by age, full 0-100 range) and text color (driven by age too, but
+  // with a narrower 20-80 band so the text contrast is calibrated separately).
+  {
+    apply: {
+      colorRange: {
+        maxColor: '#f00000',
+        maxValue: 100,
+        midColor: '#a00000',
+        midValue: 50,
+        minColor: '#800000',
+        minValue: 0,
+        onColumn: 'age',
+      },
+      textColorRange: {
+        maxColor: '#aaaaaa',
+        maxValue: 80,
+        minColor: '#ffffff',
+        minValue: 20,
+        onColumn: 'age',
+      },
+    },
+    column: 'age',
+    priority: 2, // Lower priority so explicit green rule overrides
+  },
+  // Multi-column rule: all cells styled when age > 50 AND name contains "o"
+  {
+    apply: {
+      color: { value: '#fef3c7' },
+      textColor: { value: '#000000' },
+    },
+    column: null,
+    priority: 0, // Lower priority so other rules take precedence
+    where: {
+      and: [
+        { greaterThan: [{ column: 'age' }, 50] },
+        { contains: [{ column: 'name' }, 'o'] },
+      ],
+    },
+  },
+];
+
+/**
+ * A custom BodyCell that uses the `useDataGridCellStyle` hook to manually apply style rules to the cell.
+ */
+const CustomBodyCell = <T extends RowData>({
+  cell,
+}: {
+  cell: Cell<T, unknown>;
+}) => {
+  const ruleStyle = useDataGridCellStyle(cell);
+
+  return (
+    <div
+      className="ndl-data-grid-td"
+      role="cell"
+      style={{
+        ...ruleStyle,
+        width: cell.column.getSize(),
+      }}
+    >
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </div>
+  );
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      header: () => 'Name',
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={false}
+        tableInstance={table}
+        isKeyboardNavigable={false}
+        styleRules={styleRules}
+        components={{
+          BodyCell: CustomBodyCell,
+        }}
+        styling={{
+          borderStyle: 'all-sides',
+          hasHoverEffects: true,
+          hasZebraStriping: false,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid In Dialog
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  DataGrid,
+  type DataGridNav,
+  Dialog,
+  FilledButton,
+  Select,
+  useDataGridContext,
+} from '@neo4j-ndl/react';
+import {
+  type ColumnDef,
+  type ColumnMeta,
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useRef, useState } from 'react';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const columnHelper = createColumnHelper<TestDataFormat>();
+
+const actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (
+  tableNav,
+) => ({
+  cell: ({ row }) => {
+    const options = ['Edit', 'Delete', 'View'];
+    const dropdownOptions = options.map((o) => ({ label: o, value: o }));
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selected, setSelected] = useState(dropdownOptions[0]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { portalTarget } = useDataGridContext();
+
+    return (
+      <div
+        data-testid={`ndl-actions-cell-row-${row.index}`}
+        className="n-flex n-flex-row n-gap-token-8"
+      >
+        <Select
+          ariaLabel={`actions-select-row-${row.index}`}
+          type="select"
+          selectProps={{
+            menuPortalTarget: portalTarget,
+            menuPosition: 'fixed',
+            onChange: (e) => {
+              if (!e) {
+                return;
+              }
+              setSelected(e);
+            },
+            onKeyDown: (e) => {
+              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell
+              if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.stopPropagation();
+              }
+            },
+            onMenuClose: () => {
+              console.info(
+                'Start listening to keyboard events for table navigation',
+              );
+              tableNav.enable();
+            },
+            onMenuOpen: () => {
+              console.info(
+                'Stop listening to keyboard events for table navigation',
+              );
+              tableNav.disable();
+            },
+            options: dropdownOptions,
+            value: selected,
+          }}
+        />
+      </div>
+    );
+  },
+  header: 'Custom Select',
+  id: 'custom-select',
+  minSize: 150,
+});
+
+const Component = () => {
+  const [data, setData] = useState(TABLE_DEMO_DATA);
+  const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);
+
+  const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {
+    columnActions: {
+      actions: [
+        {
+          onClick: () => {
+            if (isAgeFilterApplied) {
+              setData(TABLE_DEMO_DATA);
+              setIsAgeFilterApplied(false);
+              return;
+            } else {
+              const filteredData = data.filter((item) => item.age >= 18);
+              setData(filteredData);
+              setIsAgeFilterApplied(true);
+            }
+          },
+          title: 'Age >= 18',
+        },
+      ],
+    },
+  };
+
+  const regularColumns = [
+    columnHelper.accessor('name', {
+      cell: (cell) => (
+        <DataGrid.InlineEditCell
+          cell={cell}
+          value={cell.getValue()}
+          ariaLabel="edit name"
+        />
+      ),
+      maxSize: 300,
+      meta: {
+        isInlineEditCell: {
+          onEditChange: (newValue, cell) => {
+            setData((oldData) => {
+              return oldData.map((row) => {
+                if (row.name === cell.row.original.name) {
+                  return {
+                    ...row,
+                    name: newValue,
+                  };
+                }
+                return row;
+              });
+            });
+          },
+        },
+      },
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => {
+        return (
+          <DataGrid.DropDownCell
+            cell={info}
+            options={[
+              {
+                label: '12',
+                value: '12',
+              },
+              {
+                label: '32',
+                value: '32',
+              },
+              {
+                label: '37',
+                value: '37',
+              },
+              {
+                label: '39',
+                value: '39',
+              },
+              {
+                label: '51',
+                value: '51',
+              },
+            ]}
+            ariaLabel="select age"
+            portalTarget={document.getElementById('default-menu')}
+          />
+        );
+      },
+      meta: {
+        isDropDownCell: {
+          onChange: (newValue, cell) => {
+            if (newValue === undefined) {
+              // No change
+              return;
+            }
+
+            const parsedValue = parseInt(newValue, 10);
+
+            if (isNaN(parsedValue)) {
+              return;
+            }
+
+            setData((oldData) => {
+              return oldData.map((row) => {
+                if (row.name === cell.row.original.name) {
+                  return {
+                    ...row,
+                    age: parsedValue,
+                  };
+                }
+                return row;
+              });
+            });
+          },
+        },
+        ...ColumnActions,
+      },
+      minSize: 120,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const allColumns = (tableNav: DataGridNav) => [
+    ...regularColumns,
+    actionsColumn(tableNav),
+  ];
+
+  const tableNavRef = useRef<DataGridNav>(null!);
+  const table = useReactTable({
+    autoResetPageIndex: false,
+    columnResizeMode: 'onChange',
+    columns: allColumns(tableNavRef.current),
+    data: data,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  // Modal code
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const handleClick = () => setIsOpen((prev) => !prev);
+  const handleClose = () => setIsOpen(false);
+
+  // DataGrid code
+  return (
+    <div className="n-w-full">
+      <div className="n-flex n-justify-center">
+        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>
+      </div>
+      <Dialog
+        className="n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg"
+        htmlAttributes={{
+          id: 'default-menu',
+        }}
+        onClose={handleClose}
+        isOpen={isOpen}
+        hasDisabledCloseButton={true}
+      >
+        <Dialog.Content>
+          <DataGrid
+            portalTarget={document.getElementById('default-menu')}
+            isResizable={true}
+            tableInstance={table}
+            tableNavRef={tableNavRef}
+            isKeyboardNavigable={true}
+            styling={{
+              borderStyle: 'horizontal',
+              hasZebraStriping: false,
+            }}
+          />
+        </Dialog.Content>
+      </Dialog>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Keyboard Navigation
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  Checkbox,
+  DataGrid,
+  type DataGridNav,
+  IconButton,
+  Select,
+  useDataGridContext,
+} from '@neo4j-ndl/react';
+import { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';
+import {
+  type ColumnDef,
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useRef, useState } from 'react';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const selectableColumn: ColumnDef<TestDataFormat> = {
+  cell: ({ row }) => (
+    <Checkbox
+      ariaLabel={`row-${row.index}`}
+      isChecked={row.getIsSelected() || false}
+      onChange={row.getToggleSelectedHandler()}
+    />
+  ),
+  header: ({ table }) => (
+    <Checkbox
+      ariaLabel="Select all rows"
+      isChecked={table.getIsAllRowsSelected() || false}
+      onChange={table.getToggleAllRowsSelectedHandler()}
+      isIndeterminate={table.getIsSomeRowsSelected()}
+    />
+  ),
+  id: 'select',
+  maxSize: 80,
+  size: 80,
+};
+
+const actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (
+  tableNav,
+) => ({
+  cell: ({ row }) => {
+    const options = ['Edit', 'Delete', 'View'];
+    const dropdownOptions = options.map((o) => ({ label: o, value: o }));
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selected, setSelected] = useState(dropdownOptions[0]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { portalTarget } = useDataGridContext();
+
+    return (
+      <div
+        data-testid={`ndl-actions-cell-row-${row.index}`}
+        className="n-flex n-flex-row n-gap-token-8"
+      >
+        <IconButton
+          description="Megaphone"
+          onClick={() => {
+            alert("Let's get loud 📣");
+          }}
+          htmlAttributes={{
+            type: 'button',
+          }}
+        >
+          <MegaphoneIconOutline />
+        </IconButton>
+        <Select
+          ariaLabel={`actions-select-row-${row.index}`}
+          type="select"
+          selectProps={{
+            menuPortalTarget: portalTarget,
+            onChange: (e) => {
+              if (!e) {
+                return;
+              }
+              setSelected(e);
+            },
+            onKeyDown: (e) => {
+              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell
+              if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.stopPropagation();
+              }
+            },
+            onMenuClose: () => {
+              console.info(
+                'Start listening to keyboard events for table navigation',
+              );
+              tableNav.enable();
+            },
+            onMenuOpen: () => {
+              console.info(
+                'Stop listening to keyboard events for table navigation',
+              );
+              tableNav.disable();
+            },
+            options: dropdownOptions,
+            value: selected,
+          }}
+        />
+      </div>
+    );
+  },
+  header: 'actions',
+  id: 'actions',
+});
+
+const allColumns = (tableNav: DataGridNav) => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const commonColumns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+  ];
+
+  return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];
+};
+
+const Component = () => {
+  const [rowSelection, setRowSelection] = useState({});
+  const ref = useRef<HTMLDivElement>(null);
+  const tableNavRef = useRef<DataGridNav>(null!);
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns: allColumns(tableNavRef.current),
+    data: TABLE_DEMO_DATA,
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+    onRowSelectionChange: setRowSelection,
+    state: {
+      rowSelection,
+    },
+  });
+
+  return (
+    <>
+      <DataGrid
+        isResizable={false}
+        isKeyboardNavigable={true}
+        styling={{
+          borderStyle: 'all-sides',
+        }}
+        tableNavRef={tableNavRef}
+        tableInstance={table}
+        ref={ref}
+        portalTarget={document.body}
+      />
+    </>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Kitchen Sink
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid, Menu } from '@neo4j-ndl/react';
+import { ChevronDownIconSolid } from '@neo4j-ndl/react/icons';
+import {
+  type ColumnDef,
+  type ColumnMeta,
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type TableOptions,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Leva, useControls } from 'leva';
+
+import { type BorderStyle, type HeaderStyle } from '../DataGrid';
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const columnHelper = createColumnHelper<TestDataFormat>();
+
+const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {
+  columnActions: {
+    actions: [
+      {
+        onClick: () => {
+          alert('Action triggered');
+        },
+        title: 'Example Column Action',
+      },
+    ],
+  },
+};
+
+type ColumnGeneratorOptions = {
+  shouldIncludeRowActionColumn: boolean;
+};
+const COMMON_COLUMNS = (options: ColumnGeneratorOptions) => {
+  // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+  const columns: ColumnDef<TestDataFormat, any>[] = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.getValue(),
+      header: () => <div>Age</div>,
+      minSize: 80,
+      ...(options.shouldIncludeRowActionColumn
+        ? {
+            meta: {
+              ...ColumnActions,
+            },
+          }
+        : {}),
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  if (options.shouldIncludeRowActionColumn) {
+    columns.push(
+      columnHelper.display({
+        cell: (cell) => {
+          const isSpecialRow =
+            cell.row.original.name === TABLE_DEMO_DATA[3].name || undefined;
+          return (
+            <DataGrid.ActionCell
+              cell={cell}
+              innerCleanIconButtonProps={{
+                children: isSpecialRow && <ChevronDownIconSolid />,
+                description: `Actions for ${cell.row.original.name}`,
+              }}
+              innerMenuProps={
+                isSpecialRow && {
+                  children: <Menu.Item title="Custom icon and menu props" />,
+                }
+              }
+            />
+          );
+        },
+        id: 'actions',
+        meta: {
+          isActionCell: {
+            actions: [
+              {
+                onClick: (_event, cell) => {
+                  alert(
+                    `Row Action triggered for row with index: ${
+                      cell.row.index
+                    }`,
+                  );
+                },
+                title: 'Example Row Action',
+              },
+            ],
+            onOpenChange: (open) => console.info(`onOpenChange: ${open}`),
+          },
+        },
+      }),
+    );
+  }
+
+  return columns;
+};
+
+const COMMON_TABLE_PROPS = {
+  columnResizeMode: 'onChange',
+  data: TABLE_DEMO_DATA,
+  // https://tanstack.com/table/v8/docs/guide/column-sizing#overview
+  defaultColumn: {
+    minSize: 80,
+  },
+  enableSorting: false,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  initialState: {
+    pagination: {
+      pageSize: 5,
+    },
+  },
+  meta: {
+    actions: [
+      {
+        onClick: () => {
+          alert('wowowow');
+        },
+        title: "Let's party",
+      },
+    ],
+  },
+} as Omit<TableOptions<TestDataFormat>, 'columns'>;
+
+const Component = () => {
+  const {
+    keyboard: isKeyboardNavigable,
+    zebraStriping: hasZebraStriping,
+    borderStyle,
+    headerStyle,
+    includeRowActionColumn: shouldIncludeRowActionColumn,
+  } = useControls({
+    borderStyle: {
+      options: ['all-sides', 'horizontal', 'vertical', 'none'],
+      value: 'all-sides',
+    },
+    headerStyle: {
+      options: ['filled', 'clean'],
+      value: 'filled',
+    },
+    includeRowActionColumn: false,
+    keyboard: false,
+    zebraStriping: false,
+  });
+
+  const table = useReactTable({
+    ...COMMON_TABLE_PROPS,
+    columns: COMMON_COLUMNS({
+      shouldIncludeRowActionColumn,
+    }),
+    enableSorting: true,
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <div className="n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32">
+      <Leva isRoot />
+      <DataGrid
+        isResizable={true}
+        tableInstance={table}
+        isKeyboardNavigable={isKeyboardNavigable}
+        styling={{
+          borderStyle: borderStyle as BorderStyle,
+          hasZebraStriping,
+          headerStyle: headerStyle as HeaderStyle,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid No Pagination Table
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { PRUNED_TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columns,
+    data: PRUNED_TABLE_DEMO_DATA,
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <DataGrid
+      components={{ Navigation: null }}
+      isResizable={false}
+      tableInstance={table}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Percentage Width Columns
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      size: 200, // 200 / 1000 = 20% of the table width
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 100, // 100 / 1000 = 10% of the table width
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      size: 700, // 700 / 1000 = 70% of the table width
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns: columns,
+    data: TABLE_DEMO_DATA.slice(0, 5),
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  // Disable resizing of columns and enable automatic resizing of columns, to allow for percentage width columns
+  const isResizable = false;
+  const isAutoResizingColumns = true;
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        components={{
+          Navigation: null,
+        }}
+        isAutoResizingColumns={isAutoResizingColumns}
+        isKeyboardNavigable={false}
+        isResizable={isResizable}
+        styling={{
+          borderStyle: 'all-sides',
+          hasHoverEffects: false,
+          hasZebraStriping: false,
+        }}
+        tableInstance={table}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Placeholder States
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={true}
+        tableInstance={table}
+        isKeyboardNavigable={true}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Resizable Column
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = ({
+  isKeyboardNavigable = true,
+  components,
+}: {
+  isKeyboardNavigable?: boolean;
+  components?: React.ComponentProps<typeof DataGrid>['components'];
+} = {}) => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid<TestDataFormat>
+        isResizable={true}
+        tableInstance={table}
+        isKeyboardNavigable={isKeyboardNavigable}
+        // @ts-expect-error limitations of storybooks makes it hard to handle generics
+        components={components}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Rule Based Styling
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { type DataGridStyleRule } from '../style-rules/types';
+import { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';
+
+const styleRules: DataGridStyleRule[] = [
+  // Row coloring: all cells styled when name contains "Alicia"
+  {
+    apply: {
+      color: { value: '#000000' },
+      textColor: { value: '#ffffff' },
+    },
+    column: null,
+    priority: 3,
+    where: { contains: [{ column: 'name' }, 'Alicia'] },
+  },
+  // Cell coloring: cells in the "age" column with value 51 get green
+  {
+    apply: { color: { value: '#00bb00' } },
+    column: 'age',
+    priority: 3,
+    where: { equal: [{ column: 'age' }, 51] },
+  },
+  // Dual color ranges on the "age" column: independent gradients for background
+  // (driven by age, full 0-100 range) and text color (driven by age too, but
+  // with a narrower 20-80 band so the text contrast is calibrated separately).
+  {
+    apply: {
+      colorRange: {
+        maxColor: '#f00000',
+        maxValue: 100,
+        midColor: '#a00000',
+        midValue: 50,
+        minColor: '#800000',
+        minValue: 0,
+        onColumn: 'age',
+      },
+      textColorRange: {
+        maxColor: '#aaaaaa',
+        maxValue: 80,
+        minColor: '#ffffff',
+        minValue: 20,
+        onColumn: 'age',
+      },
+    },
+    column: 'age',
+    priority: 2, // Lower priority so explicit green rule overrides
+  },
+  // Multi-column rule: all cells styled when age > 50 AND name contains "o"
+  {
+    apply: {
+      color: { value: '#fef3c7' },
+      textColor: { value: '#000000' },
+    },
+    column: null,
+    priority: 0, // Lower priority so other rules take precedence
+    where: {
+      and: [
+        { greaterThan: [{ column: 'age' }, 50] },
+        { contains: [{ column: 'name' }, 'o'] },
+      ],
+    },
+  },
+];
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      header: () => 'Name',
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={false}
+        tableInstance={table}
+        isKeyboardNavigable={false}
+        styleRules={styleRules}
+        styling={{
+          borderStyle: 'all-sides',
+          hasHoverEffects: true,
+          hasZebraStriping: false,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Rule Based Styling Datetime
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { type DataGridStyleRule } from '../style-rules/types';
+
+type EventRow = {
+  event: string;
+  /**
+   * JS Date coerced from the event's local ISO string. Natively converted to
+   * Unix ms by the engine and compared against { datetime: "..." } literals.
+   */
+  scheduledDate: Date;
+  /**
+   * UTC milliseconds since midnight. Compared against { time: "..." } literals
+   * that are defined in Stockholm / CEST (+02:00) time — the engine normalises
+   * both sides to UTC before comparing.
+   */
+  scheduledTimeMs: number;
+  /** Human-readable local time shown in the cell, e.g. "09:00 CEST (+02:00)". */
+  localTimeDisplay: string;
+  status: 'confirmed' | 'delayed' | 'cancelled';
+};
+
+const data: EventRow[] = [
+  // ── Past events (before start of 2026-06-25 in Stockholm / CEST) ──────────
+  {
+    event: 'Quarterly review',
+    localTimeDisplay: '09:00 CEST (+02:00)',
+    // 09:00 Stockholm CEST = 07:00 UTC
+    scheduledDate: new Date('2026-06-10T09:00:00+02:00'),
+    scheduledTimeMs: 7 * 3_600_000,
+    status: 'confirmed',
+  },
+  {
+    event: 'Security audit',
+    localTimeDisplay: '07:30 BST (+01:00)',
+    // 07:30 London BST (+01:00) = 06:30 UTC — before Stockholm opens
+    scheduledDate: new Date('2026-06-18T07:30:00+01:00'),
+    scheduledTimeMs: 6 * 3_600_000 + 30 * 60_000,
+    status: 'delayed',
+  },
+  // ── Today (2026-06-25 in Stockholm / CEST) ─────────────────────────────────
+  {
+    event: 'Customer demo',
+    localTimeDisplay: '09:00 EDT (-04:00)',
+    // 09:00 New York EDT (-04:00) = 13:00 UTC
+    scheduledDate: new Date('2026-06-25T09:00:00-04:00'),
+    scheduledTimeMs: 13 * 3_600_000,
+    status: 'confirmed',
+  },
+  {
+    event: 'Platform migration',
+    localTimeDisplay: '22:00 CEST (+02:00)',
+    // 22:00 Stockholm CEST (+02:00) = 20:00 UTC — after Stockholm closes
+    scheduledDate: new Date('2026-06-25T22:00:00+02:00'),
+    scheduledTimeMs: 20 * 3_600_000,
+    status: 'confirmed',
+  },
+  // ── Near future (up to and including 2026-07-14 in Stockholm) ─────────────
+  {
+    event: 'Board presentation',
+    localTimeDisplay: '10:00 SGT (+08:00)',
+    // 10:00 Singapore SGT (+08:00) = 02:00 UTC — before Stockholm opens
+    scheduledDate: new Date('2026-07-02T10:00:00+08:00'),
+    scheduledTimeMs: 2 * 3_600_000,
+    status: 'confirmed',
+  },
+  {
+    event: 'Partner onboarding',
+    localTimeDisplay: '13:15 CEST (+02:00)',
+    // 13:15 Paris CEST (+02:00) = 11:15 UTC
+    scheduledDate: new Date('2026-07-08T13:15:00+02:00'),
+    scheduledTimeMs: 11 * 3_600_000 + 15 * 60_000,
+    status: 'cancelled',
+  },
+  // ── Far future (after 2026-07-15T00:00 Stockholm / CEST = 2026-07-14T22:00Z)
+  {
+    event: 'Architecture summit',
+    localTimeDisplay: '08:00 CEST (+02:00)',
+    // 08:00 Amsterdam CEST (+02:00) = 06:00 UTC.
+    // Although the calendar date is "July 15", 08:00 CEST is still within the
+    // same UTC day as July 14 22:00Z, so it crosses the far-future boundary.
+    scheduledDate: new Date('2026-07-15T08:00:00+02:00'),
+    scheduledTimeMs: 6 * 3_600_000,
+    status: 'confirmed',
+  },
+  {
+    event: 'Annual conference',
+    localTimeDisplay: '09:00 PDT (-07:00)',
+    // 09:00 San Francisco PDT (-07:00) = 16:00 UTC — after Stockholm closes
+    scheduledDate: new Date('2026-08-03T09:00:00-07:00'),
+    scheduledTimeMs: 16 * 3_600_000,
+    status: 'confirmed',
+  },
+  {
+    event: 'Year-end planning',
+    localTimeDisplay: '09:00 JST (+09:00)',
+    // 09:00 Tokyo JST (+09:00) = 00:00 UTC — midnight, well before Stockholm opens
+    scheduledDate: new Date('2026-11-20T09:00:00+09:00'),
+    scheduledTimeMs: 0,
+    status: 'confirmed',
+  },
+];
+
+/**
+ * All date and time boundaries are anchored to Stockholm in June–July 2026.
+ * Date literals use RFC 9557 IANA bracket notation — the UTC offset is inferred
+ * from the named zone (CEST = +02:00 in this period); writing `+02:00` explicitly
+ * is optional. Time literals use UTC-offset notation.
+ *
+ * "Today" from a Stockholm perspective:
+ *   2026-06-25T00:00:00[Europe/Stockholm] = 2026-06-24T22:00:00Z
+ *   2026-06-26T00:00:00[Europe/Stockholm] = 2026-06-25T22:00:00Z
+ *
+ * "Far future" threshold:
+ *   2026-07-15T00:00:00[Europe/Stockholm] = 2026-07-14T22:00:00Z
+ *
+ * Business hours (Stockholm):
+ *   { time: '09:00:00+02:00' } resolves to 07:00 UTC (25 200 000 ms)
+ *   { time: '17:00:00+02:00' } resolves to 15:00 UTC (54 000 000 ms)
+ */
+const styleRules: DataGridStyleRule[] = [
+  // Past events — entire row in muted red
+  {
+    apply: {
+      color: { value: '#fee2e2' },
+      textColor: { value: '#7f1d1d' },
+    },
+    column: null,
+    priority: 1,
+    where: {
+      lessThan: [
+        { column: 'scheduledDate' },
+        { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },
+      ],
+    },
+  },
+  // Today (in Stockholm timezone) — entire row in amber
+  {
+    apply: {
+      color: { value: '#fef9c3' },
+      textColor: { value: '#713f12' },
+    },
+    column: null,
+    priority: 1,
+    where: {
+      and: [
+        {
+          greaterThanOrEqual: [
+            { column: 'scheduledDate' },
+            { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },
+          ],
+        },
+        {
+          lessThan: [
+            { column: 'scheduledDate' },
+            { datetime: '2026-06-26T00:00:00[Europe/Stockholm]' },
+          ],
+        },
+      ],
+    },
+  },
+  // Far future (after 2026-07-15 midnight Stockholm time) — entire row in green
+  {
+    apply: {
+      color: { value: '#dcfce7' },
+      textColor: { value: '#14532d' },
+    },
+    column: null,
+    priority: 1,
+    where: {
+      greaterThanOrEqual: [
+        { column: 'scheduledDate' },
+        { datetime: '2026-07-15T00:00:00[Europe/Stockholm]' },
+      ],
+    },
+  },
+  // Outside Stockholm business hours (before 09:00 CEST or from 17:00 CEST) —
+  // time cell in orange. The { time: "..." } literals carry an offset so the
+  // engine normalises them to UTC before comparing against scheduledTimeMs.
+  {
+    apply: {
+      color: { value: '#ffedd5' },
+      textColor: { value: '#7c2d12' },
+    },
+    column: 'scheduledTimeMs',
+    priority: 2,
+    where: {
+      or: [
+        {
+          lessThan: [{ column: 'scheduledTimeMs' }, { time: '09:00:00+02:00' }],
+        },
+        {
+          greaterThanOrEqual: [
+            { column: 'scheduledTimeMs' },
+            { time: '17:00:00+02:00' },
+          ],
+        },
+      ],
+    },
+  },
+  // Cancelled events — all cells grayed out at highest priority
+  {
+    apply: {
+      color: { value: '#f3f4f6' },
+      textColor: { value: '#9ca3af' },
+    },
+    column: null,
+    priority: 5,
+    where: { equal: [{ column: 'status' }, 'cancelled'] },
+  },
+];
+
+const Component = () => {
+  const columnHelper = createColumnHelper<EventRow>();
+
+  const columns = [
+    columnHelper.accessor('event', {
+      cell: (info) => info.getValue(),
+      header: () => 'Event',
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('scheduledDate', {
+      cell: (info) =>
+        info.getValue().toLocaleDateString('en-GB', {
+          day: 'numeric',
+          month: 'short',
+          timeZone: 'Europe/Stockholm',
+          year: 'numeric',
+        }),
+      header: () => 'Date (Stockholm)',
+      minSize: 150,
+      size: 170,
+    }),
+    columnHelper.accessor('localTimeDisplay', {
+      cell: (info) => info.getValue(),
+      header: () => 'Local time',
+      minSize: 160,
+      size: 180,
+    }),
+    columnHelper.accessor('scheduledTimeMs', {
+      cell: (info) => {
+        const ms = info.getValue();
+        const h = Math.floor(ms / 3_600_000)
+          .toString()
+          .padStart(2, '0');
+        const m = Math.floor((ms % 3_600_000) / 60_000)
+          .toString()
+          .padStart(2, '0');
+        return `${h}:${m} UTC`;
+      },
+      header: () => 'Time (UTC)',
+      minSize: 110,
+      size: 130,
+    }),
+    columnHelper.accessor('status', {
+      cell: (info) => info.getValue(),
+      header: () => 'Status',
+      minSize: 100,
+      size: 120,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: { pageSize: 10 },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={false}
+        isKeyboardNavigable={false}
+        tableInstance={table}
+        styleRules={styleRules}
+        styling={{
+          borderStyle: 'all-sides',
+          hasHoverEffects: true,
+          hasZebraStriping: false,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Selectable
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, DataGrid } from '@neo4j-ndl/react';
+import {
+  type ColumnDef,
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useState } from 'react';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const selectableColumn: ColumnDef<TestDataFormat> = {
+  cell: ({ row }) => (
+    <div style={{ padding: '4px 0' }}>
+      <Checkbox
+        ariaLabel={`row-${row.index}`}
+        isChecked={row.getIsSelected() || false}
+        onChange={row.getToggleSelectedHandler()}
+      />
+    </div>
+  ),
+  header: ({ table }) => (
+    <Checkbox
+      ariaLabel="Select all rows"
+      isChecked={table.getIsAllRowsSelected() || false}
+      // If you want to select all pages from the current page use:
+      // https://tanstack.com/table/v8/docs/api/features/row-selection#gettoggleallpagerowsselectedhandler
+      onChange={table.getToggleAllRowsSelectedHandler()}
+      isIndeterminate={table.getIsSomeRowsSelected()}
+    />
+  ),
+  id: 'select',
+  maxSize: 80,
+  minSize: 48,
+  size: 80,
+};
+const columnHelper = createColumnHelper<TestDataFormat>();
+
+const commonColumns = [
+  columnHelper.accessor('name', {
+    cell: (info) => info.getValue(),
+    footer: (info) => info.column.id,
+    header: () => 'Name',
+    maxSize: 300,
+    minSize: 180,
+    size: 220,
+  }),
+  columnHelper.accessor('age', {
+    cell: (info) => info.renderValue(),
+    footer: (info) => info.column.id,
+    header: () => 'Age',
+    minSize: 80,
+  }),
+  columnHelper.accessor('cypherCommand', {
+    cell: (info) => info.getValue(),
+    footer: (info) => info.column.id,
+    header: () => 'Cypher Command',
+    minSize: 400,
+    size: 400,
+  }),
+];
+
+const allColumns = [selectableColumn, ...commonColumns];
+
+const Component = () => {
+  const [rowSelection, setRowSelection] = useState({});
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns: allColumns,
+    data: TABLE_DEMO_DATA,
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+    onRowSelectionChange: setRowSelection,
+    state: {
+      rowSelection,
+    },
+  });
+
+  return (
+    <DataGrid
+      isResizable={false}
+      tableInstance={table}
+      isKeyboardNavigable={false}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Simple
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={false}
+        tableInstance={table}
+        isKeyboardNavigable={false}
+        styling={{
+          borderStyle: 'all-sides',
+          hasHoverEffects: true,
+          hasZebraStriping: false,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Single Selectable
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid, Radio, useDataGridContext } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+type PricingEntry = {
+  cpuCount: number;
+  id: number;
+  memory: string;
+  storage: string;
+};
+
+const columnHelper = createColumnHelper<PricingEntry>();
+
+const DEMO_PRICING: PricingEntry[] = [
+  {
+    cpuCount: 1,
+    id: 1,
+    memory: '1 GB',
+    storage: '10 GB',
+  },
+  {
+    cpuCount: 2,
+    id: 2,
+    memory: '2 GB',
+    storage: '20 GB',
+  },
+  {
+    cpuCount: 3,
+    id: 3,
+    memory: '3 GB',
+    storage: '30 GB',
+  },
+];
+
+const columns = [
+  columnHelper.accessor('id', {
+    cell: ({ cell, row }) => (
+      <Radio
+        ariaLabel={`value-${cell.getValue()}`}
+        isChecked={row.getIsSelected()}
+      />
+    ),
+    header: () => null,
+    maxSize: 50,
+    size: 50,
+  }),
+  columnHelper.accessor('memory', {
+    cell: (info) => info.getValue(),
+    minSize: 120,
+  }),
+  columnHelper.accessor('cpuCount', {
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('storage', {
+    cell: (info) => info.getValue(),
+  }),
+];
+
+const CustomBodyRow = ({
+  row,
+}: React.ComponentProps<typeof DataGrid.BodyRow<PricingEntry>>) => {
+  const { components } = useDataGridContext<PricingEntry>();
+
+  return (
+    <div key={row.id} role="row" className="ndl-data-grid-tr">
+      {row.getVisibleCells().map(
+        (cell) =>
+          components.BodyCell && (
+            <components.BodyCell
+              key={cell.id}
+              cell={cell}
+              htmlAttributes={{
+                onClick: () => row.toggleSelected(!row.getIsSelected()),
+              }}
+            />
+          ),
+      )}
+    </div>
+  );
+};
+
+const Component = () => {
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: DEMO_PRICING,
+    enableMultiRowSelection: false,
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      rowSelection: {
+        0: true,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full">
+      <DataGrid
+        components={{
+          BodyRow: CustomBodyRow,
+          Navigation: null,
+        }}
+        isKeyboardNavigable={false}
+        isResizable={false}
+        tableInstance={table}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Skeleton Loading
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={true}
+        tableInstance={table}
+        isKeyboardNavigable={true}
+        isSkeletonLoading={true}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Sortable
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { TABLE_DEMO_DATA } from './staticData';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const Component = () => {
+  const columnHelper = createColumnHelper<TestDataFormat>();
+
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Name',
+      maxSize: 300,
+      minSize: 180,
+      size: 220,
+    }),
+    columnHelper.accessor('age', {
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Age',
+      minSize: 80,
+    }),
+    columnHelper.accessor('cypherCommand', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+      header: () => 'Cypher Command',
+      minSize: 400,
+      size: 400,
+    }),
+  ];
+
+  const table = useReactTable({
+    columnResizeMode: 'onChange',
+    columns,
+    data: TABLE_DEMO_DATA,
+    debugColumns: true,
+    debugHeaders: true,
+    debugTable: true,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isResizable={true}
+        tableInstance={table}
+        isKeyboardNavigable={true}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Using Editable Cells
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { tokens } from '@neo4j-ndl/base';
+import { DataGrid, GraphLabel } from '@neo4j-ndl/react';
+import { ExclamationTriangleIconSolid } from '@neo4j-ndl/react/icons';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useState } from 'react';
+import { type MultiValueProps } from 'react-select';
+
+type TestDataFormat = {
+  name: string;
+  role: string;
+  permissions: string[];
+  labels: string[];
+  status: string;
+};
+
+const ROLE_OPTIONS = [
+  { label: 'Admin', value: 'admin' },
+  { label: 'Editor', value: 'editor' },
+  { label: 'Viewer', value: 'viewer' },
+];
+
+const PERMISSION_OPTIONS = [
+  { label: 'Read', value: 'read' },
+  { label: 'Write', value: 'write' },
+  { label: 'Delete', value: 'delete' },
+];
+
+const LABEL_OPTIONS = [
+  { label: 'Person', value: 'person' },
+  { label: 'Movie', value: 'movie' },
+  { label: 'Director', value: 'director' },
+  { label: 'Actor', value: 'actor' },
+];
+
+const STATUS_OPTIONS = [
+  { label: 'Active', value: 'active' },
+  { label: 'Inactive', value: 'inactive' },
+  { label: 'Pending', value: 'pending' },
+];
+
+const VALID_STATUSES = STATUS_OPTIONS.map((option) => option.value);
+
+type DropDownOption = { value: string; label: string };
+
+const LABEL_COLORS: Record<string, string> = {
+  actor: tokens.graph['7'],
+  director: tokens.graph['4'],
+  movie: tokens.graph['3'],
+  person: tokens.graph['1'],
+};
+
+// Render each selected value as a non-interactive GraphLabel (as a span)
+// instead of the default Tag chip, demonstrating the components override.
+const LabelMultiValue = (props: MultiValueProps<DropDownOption, boolean>) => (
+  <GraphLabel
+    as="span"
+    type="node"
+    size="small"
+    color={LABEL_COLORS[props.data.value]}
+  >
+    {props.data.label}
+  </GraphLabel>
+);
+
+// The "Dallas Kuhn" row has a status that is not part of the available
+// options, so its dropdown cell renders in the error state.
+const DEMO_DATA: TestDataFormat[] = [
+  {
+    labels: ['person', 'actor'],
+    name: 'Alicia Sanford',
+    permissions: ['read', 'write'],
+    role: 'admin',
+    status: 'active',
+  },
+  {
+    labels: ['movie'],
+    name: 'Dallas Kuhn',
+    permissions: ['read'],
+    role: 'editor',
+    status: 'unknown',
+  },
+  {
+    labels: ['director'],
+    name: 'Susan Daugherty MD',
+    permissions: ['read', 'write', 'delete'],
+    role: 'viewer',
+    status: 'pending',
+  },
+  {
+    labels: ['person'],
+    name: 'Karen Huel',
+    permissions: ['read'],
+    role: 'editor',
+    status: 'inactive',
+  },
+  {
+    labels: ['movie', 'director'],
+    name: 'Ken Kessler',
+    permissions: ['write', 'delete'],
+    role: 'admin',
+    status: 'active',
+  },
+  {
+    labels: [],
+    name: 'Courtney McClure',
+    permissions: [],
+    role: 'viewer',
+    status: 'pending',
+  },
+];
+
+const columnHelper = createColumnHelper<TestDataFormat>();
+
+const Component = () => {
+  const [data, setData] = useState(DEMO_DATA);
+
+  const updateRow = (name: string, update: Partial<TestDataFormat>): void => {
+    setData((oldData) =>
+      oldData.map((row) => (row.name === name ? { ...row, ...update } : row)),
+    );
+  };
+
+  const COMMON_COLUMNS = [
+    // Editable inline text cell.
+    columnHelper.accessor('name', {
+      cell: (cell) => (
+        <DataGrid.InlineEditCell
+          cell={cell}
+          value={cell.getValue()}
+          ariaLabel="edit name"
+        />
+      ),
+      meta: {
+        isInlineEditCell: {
+          onEditChange: (newValue, cell) => {
+            updateRow(cell.row.original.name, { name: newValue });
+          },
+        },
+      },
+      minSize: 180,
+      size: 220,
+    }),
+    // Default single-select dropdown.
+    columnHelper.accessor('role', {
+      cell: (info) => (
+        <DataGrid.DropDownCell
+          cell={info}
+          options={ROLE_OPTIONS}
+          ariaLabel="select role"
+        />
+      ),
+      meta: {
+        isDropDownCell: {
+          onChange: (newValue, cell) => {
+            if (newValue === undefined) {
+              return;
+            }
+            updateRow(cell.row.original.name, { role: newValue });
+          },
+        },
+      },
+      minSize: 160,
+      size: 180,
+    }),
+    // Default multi-select dropdown (default Tag chips).
+    columnHelper.accessor('permissions', {
+      cell: (info) => (
+        <DataGrid.DropDownCell
+          cell={info}
+          options={PERMISSION_OPTIONS}
+          ariaLabel="select permissions"
+        />
+      ),
+      enableSorting: false,
+      meta: {
+        isDropDownCell: {
+          isMulti: true,
+          onChange: (newValue, cell) => {
+            updateRow(cell.row.original.name, { permissions: newValue });
+          },
+        },
+      },
+      minSize: 220,
+      size: 260,
+    }),
+    // Multi-select dropdown with a custom MultiValue (GraphLabel chips).
+    columnHelper.accessor('labels', {
+      cell: (info) => (
+        <DataGrid.DropDownCell
+          cell={info}
+          options={LABEL_OPTIONS}
+          ariaLabel="select labels"
+          components={{ MultiValue: LabelMultiValue }}
+        />
+      ),
+      enableSorting: false,
+      meta: {
+        isDropDownCell: {
+          isMulti: true,
+          onChange: (newValue, cell) => {
+            updateRow(cell.row.original.name, { labels: newValue });
+          },
+        },
+      },
+      minSize: 240,
+      size: 280,
+    }),
+    // Single-select dropdown in an error state.
+    columnHelper.accessor('status', {
+      cell: (info) => {
+        const isInvalid = !VALID_STATUSES.includes(info.getValue());
+
+        const isPending = info.getValue() === 'pending';
+        const isInactive = info.getValue() === 'inactive';
+
+        const warningHelpText = (
+          <span className="n-flex n-items-center n-gap-token-2 n-text-warning-text">
+            <ExclamationTriangleIconSolid className="n-size-token-16 n-text-warning-icon" />
+            Inactive users cannot sign in
+          </span>
+        );
+
+        return (
+          <DataGrid.DropDownCell
+            cell={info}
+            options={STATUS_OPTIONS}
+            ariaLabel="select status"
+            errorText={isInvalid ? 'Please select a valid status' : undefined}
+            helpText={
+              isInactive
+                ? warningHelpText
+                : isPending
+                  ? 'Waiting for admin approval'
+                  : undefined
+            }
+          />
+        );
+      },
+      meta: {
+        isDropDownCell: {
+          onChange: (newValue, cell) => {
+            if (newValue === undefined) {
+              return;
+            }
+            updateRow(cell.row.original.name, { status: newValue });
+          },
+        },
+      },
+      minSize: 200,
+      size: 240,
+    }),
+  ];
+  const table = useReactTable({
+    autoResetPageIndex: false,
+    columnResizeMode: 'onChange',
+    columns: COMMON_COLUMNS,
+    data: data,
+    defaultColumn: {
+      maxSize: 800,
+      minSize: 80,
+    },
+    enableSorting: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  return (
+    <div className="n-w-full n-bg-light-neutral-text-weakest">
+      <DataGrid
+        isKeyboardNavigable={true}
+        isResizable={true}
+        styling={{
+          borderStyle: 'all-sides',
+          hasZebraStriping: false,
+        }}
+        tableInstance={table}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Datagrid Virtualization
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DataGrid } from '@neo4j-ndl/react';
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type Table as DataGridType,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
+import { type RefObject, useMemo, useRef } from 'react';
+
+import { type CommonProps } from '../../_common/types';
+
+type TestDataFormat = {
+  name: string;
+  age: number;
+  cypherCommand: string;
+};
+
+const TABLE_DEMO_DATA: TestDataFormat[] = Array.from(
+  { length: 1000 },
+  (_, i) => ({
+    age: Math.floor(Math.random() * 100),
+    cypherCommand: `MATCH (n) RETURN n LIMIT ${i + 1}`,
+    name: `Person ${i + 1}`,
+  }),
+);
+
+const BodyCurryingFunction =
+  (
+    rowVirtualizer: Virtualizer<HTMLDivElement, Element>,
+    ref: RefObject<HTMLDivElement | null>,
+    table: DataGridType<TestDataFormat>,
+  ) =>
+  // eslint-disable-next-line react/display-name
+  ({
+    style,
+    className,
+    ...props
+  }: CommonProps<'div', { children?: React.ReactNode }>) => {
+    const { rows } = table.getSortedRowModel();
+    rowVirtualizer.setOptions({
+      ...rowVirtualizer.options,
+      count: rows.length,
+    });
+    const items = rowVirtualizer.getVirtualItems();
+
+    return (
+      <div ref={ref} className="n-overflow-auto n-h-[290px]">
+        <DataGrid.Body
+          {...props}
+          className={className}
+          style={{
+            ...style,
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            position: 'relative',
+          }}
+        >
+          {items.map((row: { index: number; size: number; start: number }) => {
+            const foundRow = rows[row.index];
+            if (foundRow === undefined) {
+              return null;
+            }
+
+            return (
+              <DataGrid.BodyRow
+                key={`table-row-${row.index}`}
+                row={foundRow}
+                style={{
+                  height: `${row.size}px`,
+                  left: 0,
+                  position: 'absolute',
+                  top: 0,
+                  transform: `translateY(${row.start}px)`,
+                  width: '100%',
+                }}
+              />
+            );
+          })}
+        </DataGrid.Body>
+      </div>
+    );
+  };
+
+/** Repeats array `n` times */
+const repeat = (arr: unknown[], n: number) => Array(n).fill(arr).flat();
+
+const columnHelper = createColumnHelper<TestDataFormat>();
+
+const columns = [
+  columnHelper.accessor('name', {
+    cell: (info) => info.getValue(),
+    footer: (info) => info.column.id,
+    header: () => 'Name',
+    maxSize: 300,
+    minSize: 180,
+    size: 220,
+  }),
+  columnHelper.accessor('age', {
+    cell: (info) => info.renderValue(),
+    footer: (info) => info.column.id,
+    header: () => 'Age',
+    minSize: 80,
+  }),
+  columnHelper.accessor('cypherCommand', {
+    cell: (info) => info.getValue(),
+    footer: (info) => info.column.id,
+    header: () => 'Cypher Command',
+    minSize: 400,
+    size: 400,
+  }),
+];
+
+const ExtendedProps = {
+  columnResizeMode: 'onChange' as const,
+  columns,
+  data: [...repeat(TABLE_DEMO_DATA, 500)],
+  debugColumns: true,
+  debugHeaders: true,
+  debugTable: true,
+  defaultColumn: {
+    maxSize: 800,
+    minSize: 80,
+  },
+  enableSorting: false,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+};
+
+const Component = () => {
+  const scrollingParentRef = useRef<HTMLDivElement | null>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: ExtendedProps.data.length,
+    estimateSize: () => 40,
+    getScrollElement: () => scrollingParentRef.current,
+    // 40 is the size for a basic data type row so fallback to that
+    overscan: 15,
+  });
+
+  const table = useReactTable({
+    ...ExtendedProps,
+    enableSorting: true,
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: ExtendedProps.data.length,
+      },
+    },
+  });
+
+  const CustomBody = useMemo(() => {
+    return BodyCurryingFunction(rowVirtualizer, scrollingParentRef, table);
+  }, [rowVirtualizer, scrollingParentRef, table]);
+
+  return (
+    <div
+      className="n-w-full n-bg-light-neutral-text-weakest"
+      style={{ height: '400px' }}
+    >
+      <DataGrid
+        components={{
+          Body: CustomBody,
+          PaginationNumericButton: null,
+          RowsPerPage: null,
+        }}
+        isResizable={false}
+        tableInstance={table}
+        rootProps={{
+          className: 'n-h-full',
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```