@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/components-data-display-data-table.json

@@ -0,0 +1,855 @@
+{
+  "meta": {
+    "id": "Components-DataTable",
+    "title": "Data table",
+    "exportName": "DataTable",
+    "description": "Data tables display sets of data across rows and columns. Use them to organize information, enable comparisons, and allow users to inspect and interact with large datasets.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/data-table/data-table.mdx",
+    "menu": [
+      "Components",
+      "Data Display",
+      "Data table"
+    ],
+    "route": "components/data-display/data-table",
+    "tags": [
+      "component",
+      "table",
+      "data"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Visual options",
+        "href": "#visual-options",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Data table manager",
+        "href": "#data-table-manager",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=4256-4285&m=dev",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n### Overview\n\nData tables are essential tools for presenting sets of data in a structured\nformat, utilizing rows and columns to enhance clarity. They serve multiple\npurposes: organizing information systematically, facilitating comparisons\nbetween different data points, and providing users with the ability to\nthoroughly inspect and interact with extensive datasets. By incorporating\nfeatures such as sorting, filtering, and pagination, data tables empower users\nto navigate through large volumes of information efficiently, making them\ninvaluable in data analysis and reporting.\n\n\n\n## Resources\n\nDeep dive into details and access the Nimbus design library\n\n[Figma library](https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=4256-4285&m=dev)\n\n**Related components**\n\n- **[Table Component](/components/data-display/table)** - Use the simpler Table component for static, read-only data without interactive features\n\n### Variables\n\nGet familiar with the features.\n\n#### Visual options\n\n**Data table base:** Click on any row to open the product details modal. Edit\nthe fields and click Save to see the changes reflected in the data table. Table\nis sorted by Date Modified (newest first) by default.\n\n**Bulk selection:** Users can make bulk selections by selecting the checkbox in\nthe table header to select all visible rows, or by choosing multiple rows at\nonce. To clear, users can uncheck the boxes or click on the header checkbox to\nselect all and then unselect all at once.\n\n**Text highlight and copy:** We’ve made improvements to this feature, you can\nnow highlight text to make easier to copy and use for users workflows. Clicking\noutside the text within the box will open details, but clicks made over the text\nwill allow for selection, highlight and copying.\n\n**Column resizing**\n\nThis component allows for columns to be resized. It is helpful when there is a\nlot of data and columns can be restricted or grown by the user to show more\ninformation.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isResizable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isResizable: true,\n    },\n  ];\n  return <DataTable rows={data} columns={columns} />;\n}\n```\n\n**Search and highlight**\n\nAdding a search field close to the data table that will refine the shown data to\nshow the user relevant information is extremely helpful to users.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n    },\n  ];\n\n  const [search, setSearch] = useState(\"\");\n\n  return <Stack gap={16}>\n    <TextInput\n      value={search}\n      onChange={setSearch}\n      placeholder=\"Search...\"\n      width=\"1/3\"\n      aria-label=\"search-rows\"\n      data-testid=\"search-input\"\n    />\n    <DataTable\n      rows={data}\n      columns={columns}\n      search={search}\n    />\n  </Stack>\n}\n```\n\n**Controlled sorting**\n\nThe sorting state is controlled externally and can be programmatically changed.\nThis can be applied to some and not all the headers if more control is needed,\nor to simplify if the need is less for some columns of data.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isSortable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isSortable: true,\n    },\n  ];\n  const [sortDescriptor, setSortDescriptor] = useState({\n      column: \"modified\",\n      direction: \"ascending\",\n    });\n\n  return <Stack gap={16}>\n    <Button\n      onPress={() =>\n        setSortDescriptor({ column: \"name\", direction: \"ascending\" })\n      }\n      variant=\"outline\"\n      width=\"2xs\"\n    >\n    Sort by Name (A-Z)\n    </Button>\n    <DataTable\n      rows={data}\n      columns={columns}\n      onSortChange={setSortDescriptor}\n      sortDescriptor={sortDescriptor}\n    />\n  </Stack>\n}\n```\n\n**Condensed**\n\nTo show more data in smaller spaces, condense the vertical padding. This setting\nis also included in the data table manager if giving control to users to choose\na more condensed styling is appealing for the placement of a data table.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n    },\n  ];\n\n  const [condensed, setCondensed] = useState(false);\n\n  return <Stack gap={16}>\n    <Checkbox\n      isSelected={condensed}\n      onChange={setCondensed}\n    >\n      Condensed\n    </Checkbox>\n    <DataTable\n      rows={data}\n      columns={columns}\n      density={condensed ? \"condensed\" : \"default\"}\n    />\n  </Stack>\n}\n```\n\n**Sticky header**\n\nWe encourage using sticky headers as default on data tables. Keeping context by\nutilizing sticky users is important when scrolling long rows of data. Make sure\nto give it a maxHeight value when you use the sticky header feature.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n    },\n  ];\n\n  const [sticky, setSticky] = useState(false);\n\n  return <Stack gap={16}>\n    <Checkbox\n      isSelected={sticky}\n      onChange={setSticky}\n    >\n      Sticky header (with max height)\n    </Checkbox>\n    <DataTable\n      rows={data}\n      columns={columns}\n      maxHeight={sticky ? \"400px\" : undefined}\n    />\n  </Stack>\n}\n```\n\n**Nested content**\n\nNested tables can be used to show related or detailed information about a given\nrow in a data table. Make it obvious to users that there is more information in\nthis area.\n\n```jsx live\nconst App = () => {\n  const data = [\n    {\n      id: 1,\n      name: 'Product A',\n      modified: '2023-10-27',\n      children: (\n        <Box p={16}>\n          <DataTable\n            rows={[\n              { id: 'a1', variant: 'Size S', stock: 150 },\n              { id: 'a2', variant: 'Size M', stock: 200 },\n              { id: 'a3', variant: 'Size L', stock: 180 },\n            ]}\n            columns={[\n              { id: 'variant', header: 'Variant', accessor: (row) => row.variant },\n              { id: 'stock', header: 'Stock', accessor: (row) => row.stock },\n            ]}\n          />\n        </Box>\n      ),\n    },\n    {\n      id: 2,\n      name: 'Product B',\n      modified: '2023-10-26',\n      children: (\n        <Box p={16}>\n          <DataTable\n            rows={[\n              { id: 'b1', variant: 'Color Red', stock: 75 },\n              { id: 'b2', variant: 'Color Blue', stock: 90 },\n            ]}\n            columns={[\n              { id: 'variant', header: 'Variant', accessor: (row) => row.variant },\n              { id: 'stock', header: 'Stock', accessor: (row) => row.stock },\n            ]}\n          />\n        </Box>\n      ),\n    },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isResizable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isResizable: true,\n    },\n  ];\n  return <DataTable rows={data} columns={columns} nestedKey=\"children\" />;\n}\n```\n\n**Pinned rows**\n\nUsing pins can allow users to keep certain rows of data to the top of the data\ntable. These keep commonly referenced information in a predictable areas for\nusers to return to often.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isResizable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isResizable: true,\n    },\n  ];\n  return <DataTable rows={data} columns={columns} />;\n}\n```\n\n### Data table manager\n\nData table managerThe data table manager enables customization of the displayed\ndata and structure within a Data table. It provides a single interface for users\nto personalize complex data views to match their specific workflow needs. It\norganizes customization options into two primary tabs: **Visible columns** and\n**Layout settings**.\n\n- **Visible columns:** This tab controls the visibility and order of available\n  data columns within the data table.\n- **Layout settings:** This tab controls structural and display properties for\n  the entire table view. Users have control over the row density and text\n  truncation.\n\n```jsx live\nconst App = () => {\n  const allColumns = [\n    {\n      id: \"product-name\",\n      header: \"Product name\",\n      accessor: (row) => row.name,\n      isSortable: true,\n    },\n    {\n      id: \"sku\",\n      header: \"SKU\",\n      accessor: (row) => row.sku,\n      isSortable: true,\n    },\n    {\n      id: \"status\",\n      header: \"Status\",\n      accessor: (row) => (\n        <Badge\n          colorPalette={\n            row.status === \"Published\"\n              ? \"success\"\n              : row.status === \"Modified\"\n                ? \"warning\"\n                : \"neutral\"\n          }\n          size=\"xs\"\n        >\n          {row.status}\n        </Badge>\n      ),\n    },\n    {\n      id: \"category\",\n      header: \"Category\",\n      accessor: (row) => row.category,\n    },\n    {\n      id: \"inventory\",\n      header: \"Inventory\",\n      accessor: (row) => row.inventory,\n    },\n    {\n      id: \"price\",\n      header: \"Price\",\n      accessor: (row) => row.price,\n    },\n    {\n      id: \"store\",\n      header: \"Store\",\n      accessor: (row) => row.store,\n    },\n  ];\n\n  const initialVisibleColumns = [\n    allColumns[0], // product-name\n    allColumns[1], // sku\n    allColumns[2], // status\n    allColumns[3], // category\n    allColumns[4], // inventory\n  ];\n\n  const data = [\n    {\n      id: \"1\",\n      name: \"Midnight Bloom Silk Blouse\",\n      sku: \"MID-BLM-SLK-BLS\",\n      status: \"Published\",\n      category: \"Clothing\",\n      inventory: 120,\n      price: \"$89.99\",\n      store: \"Main Store\",\n    },\n    {\n      id: \"2\",\n      name: \"Urban Canvas Denim\",\n      sku: \"URB-CAN-DNM\",\n      status: \"Modified\",\n      category: \"Clothing\",\n      inventory: 85,\n      price: \"$129.99\",\n      store: \"Downtown\",\n    },\n    {\n      id: \"3\",\n      name: \"Coastal Breeze Linen Pants\",\n      sku: \"COS-BRZ-LIN-PNT\",\n      status: \"Published\",\n      category: \"Clothing\",\n      inventory: 200,\n      price: \"$79.99\",\n      store: \"Beach Shop\",\n    },\n  ];\n\n  const [visibleColumns, setVisibleColumns] = useState(initialVisibleColumns);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [density, setDensity] = useState(\"default\");\n\n  const handleColumnsChange = (updatedColumns) => {\n    setVisibleColumns(updatedColumns);\n  };\n\n  const handleSettingsChange = (action) => {\n    if (!action) {\n      return;\n    }\n    switch (action) {\n      case \"toggleTextVisibility\":\n        setIsTruncated(!isTruncated);\n        break;\n      case \"toggleRowDensity\":\n        setDensity(density === \"condensed\" ? \"default\" : \"condensed\");\n        break;\n    }\n  };\n\n  return (\n    <Stack direction=\"column\" gap={16}>\n      <DataTable.Root\n        columns={allColumns}\n        rows={data}\n        visibleColumns={visibleColumns.map((col) => col.id)}\n        allowsSorting={true}\n        isTruncated={isTruncated}\n        density={density}\n        onColumnsChange={handleColumnsChange}\n        onSettingsChange={handleSettingsChange}\n      >\n        <Flex\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n          width=\"100%\"\n        >\n          <Text>Table settings</Text>\n          <Box p={8}>\n            <DataTable.Manager />\n          </Box>\n        </Flex>\n        <DataTable.Table aria-label=\"Products table\">\n          <DataTable.Header aria-label=\"Products table header\" />\n          <DataTable.Body aria-label=\"Products table body\" />\n        </DataTable.Table>\n      </DataTable.Root>\n    </Stack>\n  );\n}\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n### Overview\n\nData tables are essential tools for presenting sets of data in a structured\nformat, utilizing rows and columns to enhance clarity. They serve multiple\npurposes: organizing information systematically, facilitating comparisons\nbetween different data points, and providing users with the ability to\nthoroughly inspect and interact with extensive datasets. By incorporating\nfeatures such as sorting, filtering, and pagination, data tables empower users\nto navigate through large volumes of information efficiently, making them\ninvaluable in data analysis and reporting.\n\n\n\n## Resources\n\nDeep dive into details and access the Nimbus design library\n\n[Figma library](https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=4256-4285&m=dev)\n\n**Related components**\n\n- **[Table Component](/components/data-display/table)** - Use the simpler Table component for static, read-only data without interactive features\n\n### Variables\n\nGet familiar with the features.\n\n#### Visual options\n\n**Data table base:** Click on any row to open the product details modal. Edit\nthe fields and click Save to see the changes reflected in the data table. Table\nis sorted by Date Modified (newest first) by default.\n\n**Bulk selection:** Users can make bulk selections by selecting the checkbox in\nthe table header to select all visible rows, or by choosing multiple rows at\nonce. To clear, users can uncheck the boxes or click on the header checkbox to\nselect all and then unselect all at once.\n\n**Text highlight and copy:** We’ve made improvements to this feature, you can\nnow highlight text to make easier to copy and use for users workflows. Clicking\noutside the text within the box will open details, but clicks made over the text\nwill allow for selection, highlight and copying.\n\n**Column resizing**\n\nThis component allows for columns to be resized. It is helpful when there is a\nlot of data and columns can be restricted or grown by the user to show more\ninformation.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isResizable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isResizable: true,\n    },\n  ];\n  return <DataTable rows={data} columns={columns} />;\n}\n```\n\n**Search and highlight**\n\nAdding a search field close to the data table that will refine the shown data to\nshow the user relevant information is extremely helpful to users.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n    },\n  ];\n\n  const [search, setSearch] = useState(\"\");\n\n  return <Stack gap={16}>\n    <TextInput\n      value={search}\n      onChange={setSearch}\n      placeholder=\"Search...\"\n      width=\"1/3\"\n      aria-label=\"search-rows\"\n      data-testid=\"search-input\"\n    />\n    <DataTable\n      rows={data}\n      columns={columns}\n      search={search}\n    />\n  </Stack>\n}\n```\n\n**Controlled sorting**\n\nThe sorting state is controlled externally and can be programmatically changed.\nThis can be applied to some and not all the headers if more control is needed,\nor to simplify if the need is less for some columns of data.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isSortable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isSortable: true,\n    },\n  ];\n  const [sortDescriptor, setSortDescriptor] = useState({\n      column: \"modified\",\n      direction: \"ascending\",\n    });\n\n  return <Stack gap={16}>\n    <Button\n      onPress={() =>\n        setSortDescriptor({ column: \"name\", direction: \"ascending\" })\n      }\n      variant=\"outline\"\n      width=\"2xs\"\n    >\n    Sort by Name (A-Z)\n    </Button>\n    <DataTable\n      rows={data}\n      columns={columns}\n      onSortChange={setSortDescriptor}\n      sortDescriptor={sortDescriptor}\n    />\n  </Stack>\n}\n```\n\n**Condensed**\n\nTo show more data in smaller spaces, condense the vertical padding. This setting\nis also included in the data table manager if giving control to users to choose\na more condensed styling is appealing for the placement of a data table.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n    },\n  ];\n\n  const [condensed, setCondensed] = useState(false);\n\n  return <Stack gap={16}>\n    <Checkbox\n      isSelected={condensed}\n      onChange={setCondensed}\n    >\n      Condensed\n    </Checkbox>\n    <DataTable\n      rows={data}\n      columns={columns}\n      density={condensed ? \"condensed\" : \"default\"}\n    />\n  </Stack>\n}\n```\n\n**Sticky header**\n\nWe encourage using sticky headers as default on data tables. Keeping context by\nutilizing sticky users is important when scrolling long rows of data. Make sure\nto give it a maxHeight value when you use the sticky header feature.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n    },\n  ];\n\n  const [sticky, setSticky] = useState(false);\n\n  return <Stack gap={16}>\n    <Checkbox\n      isSelected={sticky}\n      onChange={setSticky}\n    >\n      Sticky header (with max height)\n    </Checkbox>\n    <DataTable\n      rows={data}\n      columns={columns}\n      maxHeight={sticky ? \"400px\" : undefined}\n    />\n  </Stack>\n}\n```\n\n**Nested content**\n\nNested tables can be used to show related or detailed information about a given\nrow in a data table. Make it obvious to users that there is more information in\nthis area.\n\n```jsx live\nconst App = () => {\n  const data = [\n    {\n      id: 1,\n      name: 'Product A',\n      modified: '2023-10-27',\n      children: (\n        <Box p={16}>\n          <DataTable\n            rows={[\n              { id: 'a1', variant: 'Size S', stock: 150 },\n              { id: 'a2', variant: 'Size M', stock: 200 },\n              { id: 'a3', variant: 'Size L', stock: 180 },\n            ]}\n            columns={[\n              { id: 'variant', header: 'Variant', accessor: (row) => row.variant },\n              { id: 'stock', header: 'Stock', accessor: (row) => row.stock },\n            ]}\n          />\n        </Box>\n      ),\n    },\n    {\n      id: 2,\n      name: 'Product B',\n      modified: '2023-10-26',\n      children: (\n        <Box p={16}>\n          <DataTable\n            rows={[\n              { id: 'b1', variant: 'Color Red', stock: 75 },\n              { id: 'b2', variant: 'Color Blue', stock: 90 },\n            ]}\n            columns={[\n              { id: 'variant', header: 'Variant', accessor: (row) => row.variant },\n              { id: 'stock', header: 'Stock', accessor: (row) => row.stock },\n            ]}\n          />\n        </Box>\n      ),\n    },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isResizable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isResizable: true,\n    },\n  ];\n  return <DataTable rows={data} columns={columns} nestedKey=\"children\" />;\n}\n```\n\n**Pinned rows**\n\nUsing pins can allow users to keep certain rows of data to the top of the data\ntable. These keep commonly referenced information in a predictable areas for\nusers to return to often.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isResizable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isResizable: true,\n    },\n  ];\n  return <DataTable rows={data} columns={columns} />;\n}\n```\n\n### Data table manager\n\nData table managerThe data table manager enables customization of the displayed\ndata and structure within a Data table. It provides a single interface for users\nto personalize complex data views to match their specific workflow needs. It\norganizes customization options into two primary tabs: **Visible columns** and\n**Layout settings**.\n\n- **Visible columns:** This tab controls the visibility and order of available\n  data columns within the data table.\n- **Layout settings:** This tab controls structural and display properties for\n  the entire table view. Users have control over the row density and text\n  truncation.\n\n```jsx live\nconst App = () => {\n  const allColumns = [\n    {\n      id: \"product-name\",\n      header: \"Product name\",\n      accessor: (row) => row.name,\n      isSortable: true,\n    },\n    {\n      id: \"sku\",\n      header: \"SKU\",\n      accessor: (row) => row.sku,\n      isSortable: true,\n    },\n    {\n      id: \"status\",\n      header: \"Status\",\n      accessor: (row) => (\n        <Badge\n          colorPalette={\n            row.status === \"Published\"\n              ? \"success\"\n              : row.status === \"Modified\"\n                ? \"warning\"\n                : \"neutral\"\n          }\n          size=\"xs\"\n        >\n          {row.status}\n        </Badge>\n      ),\n    },\n    {\n      id: \"category\",\n      header: \"Category\",\n      accessor: (row) => row.category,\n    },\n    {\n      id: \"inventory\",\n      header: \"Inventory\",\n      accessor: (row) => row.inventory,\n    },\n    {\n      id: \"price\",\n      header: \"Price\",\n      accessor: (row) => row.price,\n    },\n    {\n      id: \"store\",\n      header: \"Store\",\n      accessor: (row) => row.store,\n    },\n  ];\n\n  const initialVisibleColumns = [\n    allColumns[0], // product-name\n    allColumns[1], // sku\n    allColumns[2], // status\n    allColumns[3], // category\n    allColumns[4], // inventory\n  ];\n\n  const data = [\n    {\n      id: \"1\",\n      name: \"Midnight Bloom Silk Blouse\",\n      sku: \"MID-BLM-SLK-BLS\",\n      status: \"Published\",\n      category: \"Clothing\",\n      inventory: 120,\n      price: \"$89.99\",\n      store: \"Main Store\",\n    },\n    {\n      id: \"2\",\n      name: \"Urban Canvas Denim\",\n      sku: \"URB-CAN-DNM\",\n      status: \"Modified\",\n      category: \"Clothing\",\n      inventory: 85,\n      price: \"$129.99\",\n      store: \"Downtown\",\n    },\n    {\n      id: \"3\",\n      name: \"Coastal Breeze Linen Pants\",\n      sku: \"COS-BRZ-LIN-PNT\",\n      status: \"Published\",\n      category: \"Clothing\",\n      inventory: 200,\n      price: \"$79.99\",\n      store: \"Beach Shop\",\n    },\n  ];\n\n  const [visibleColumns, setVisibleColumns] = useState(initialVisibleColumns);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [density, setDensity] = useState(\"default\");\n\n  const handleColumnsChange = (updatedColumns) => {\n    setVisibleColumns(updatedColumns);\n  };\n\n  const handleSettingsChange = (action) => {\n    if (!action) {\n      return;\n    }\n    switch (action) {\n      case \"toggleTextVisibility\":\n        setIsTruncated(!isTruncated);\n        break;\n      case \"toggleRowDensity\":\n        setDensity(density === \"condensed\" ? \"default\" : \"condensed\");\n        break;\n    }\n  };\n\n  return (\n    <Stack direction=\"column\" gap={16}>\n      <DataTable.Root\n        columns={allColumns}\n        rows={data}\n        visibleColumns={visibleColumns.map((col) => col.id)}\n        allowsSorting={true}\n        isTruncated={isTruncated}\n        density={density}\n        onColumnsChange={handleColumnsChange}\n        onSettingsChange={handleSettingsChange}\n      >\n        <Flex\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n          width=\"100%\"\n        >\n          <Text>Table settings</Text>\n          <Box p={8}>\n            <DataTable.Manager />\n          </Box>\n        </Flex>\n        <DataTable.Table aria-label=\"Products table\">\n          <DataTable.Header aria-label=\"Products table header\" />\n          <DataTable.Body aria-label=\"Products table body\" />\n        </DataTable.Table>\n      </DataTable.Root>\n    </Stack>\n  );\n}\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual options",
+          "href": "#visual-options",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Data table manager",
+          "href": "#data-table-manager",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27' },\n    { id: 2, name: 'Product B', modified: '2023-10-26' },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n    },\n  ];\n  return <DataTable rows={data} columns={columns} />;\n}\n```\n\n### Accessibility standards\n\n- **Ensure proper semantic structure:** Use the `<table>`, `<th>`, and `<tr>`\n  HTML elements correctly for screen reader compatibility.\n- **Associate data with headers:** Map table data cells `<td>` to the\n  corresponding header cells `<th>` using appropriate ARIA attributes if the\n  native structure is insufficient for complex tables.\n- **Provide clear context:** Use a table caption `<caption>` to give a concise\n  overview of the table's content. Include descriptive column header text.\n- **Manage keyboard focus:** Ensure all interactive elements within the table\n  (sort buttons, links, etc.) are reachable and operable via the keyboard.\n- **Maintain sufficient contrast:** Ensure text and background colors meet WCAG\n  AA contrast standards for readability.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport {\n  DataTable,\n  type DataTableProps,\n  type DataTableColumnItem,\n  type DataTableRowItem,\n  type SortDescriptor,\n} from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\nThe DataTable renders data in a tabular format with support for sorting,\nselection, resizing, and nested content. At minimum, you need to provide\n`columns` and `rows`:\n\n```jsx live-dev\nconst App = () => {\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'email', header: 'Email', accessor: (row) => row.email },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin' },\n    { id: '2', name: 'Bob Smith', email: 'bob@example.com', role: 'User' },\n    { id: '3', name: 'Carol Williams', email: 'carol@example.com', role: 'Editor' },\n  ];\n\n  return <DataTable columns={columns} rows={rows} />;\n}\n```\n\n## When to use DataTable\n\nUse the **DataTable** component when you need **interactive data management features** like sorting, filtering, selection, or pagination. It's built for complex, data-intensive interfaces.\n\n### Keep it simple\n\n**Don't use DataTable for static content.** If you only need to display read-only data without interactive features, use the simpler [Table component](/components/data-display/table) instead. It's lighter, faster, and easier to implement.\n\n**Use the Table component when you:**\n- Display static reference data (specifications, comparisons, pricing)\n- Have small datasets (between 10 - 20 rows)\n- Don't need sorting, filtering, or selection\n- Want a straightforward implementation without state management\n\n**Use DataTable when you need:**\n- Sorting columns in ascending or descending order\n- Row selection for bulk actions\n- Column management (show/hide, reorder, resize)\n- Search and filtering across data\n- Pagination for large datasets (> 50 rows)\n- Server-side data operations\n- Nested/hierarchical data with expansion\n- Dense data visualization with configurable row spacing\n\n**Example decision:**\n\n```tsx\n// ✗ Avoid - Overkill for static data\n<DataTable\n  columns={threeStaticColumns}\n  rows={fiveStaticRows}\n/>\n\n// ✓ Better - Use Table for static content\n<Table.Root>\n  <Table.Header>{/* specification headers */}</Table.Header>\n  <Table.Body>{/* specification rows */}</Table.Body>\n</Table.Root>\n```\n\n→ **[See Table component documentation](/components/data-display/table)** for simple table layouts.\n\n## Working with columns and rows\n\n### Column configuration\n\nEach column requires an `id`, `header`, and `accessor` function. Additional\noptions control sorting, resizing, and custom rendering:\n\n```tsx\nimport type { DataTableColumnItem } from \"@commercetools/nimbus\";\n\nconst columns: DataTableColumnItem[] = [\n  {\n    id: \"name\",\n    header: \"Product Name\",\n    accessor: (row) => row.name,\n    isSortable: true, // Enable sorting for this column\n    isResizable: true, // Enable column resizing\n    isRowHeader: true, // Mark as row header for accessibility\n    width: 200, // Initial width in pixels\n    minWidth: 100, // Minimum width when resizing\n    maxWidth: 400, // Maximum width when resizing\n  },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessor: (row) => row.status,\n    // Custom rendering with the render prop\n    render: ({ value }) => (\n      <Badge colorPalette={value === \"Active\" ? \"positive\" : \"neutral\"}>\n        {value}\n      </Badge>\n    ),\n  },\n  {\n    id: \"actions\",\n    header: \"Actions\",\n    accessor: (row) => row.id,\n    headerIcon: (\n      <IconButton aria-label=\"Info\" size=\"2xs\" variant=\"ghost\">\n        <Info />\n      </IconButton>\n    ),\n    isSortable: false,\n  },\n];\n```\n\n### Row data structure\n\nEach row must have a unique `id` property. Additional properties are accessed\nvia column `accessor` functions:\n\n```tsx\nimport type { DataTableRowItem } from \"@commercetools/nimbus\";\n\nconst rows: DataTableRowItem[] = [\n  { id: \"1\", name: \"Product A\", status: \"Active\", price: 99.99 },\n  {\n    id: \"2\",\n    name: \"Product B\",\n    status: \"Draft\",\n    price: 149.99,\n    isDisabled: true,\n  },\n  { id: \"3\", name: \"Product C\", status: \"Active\", price: 79.99 },\n];\n```\n\n## Usage examples\n\n### Density options\n\nThe `density` prop controls row height and padding. Use `condensed` for\ndata-dense interfaces:\n\n```jsx live-dev\nconst App = () => {\n  const [density, setDensity] = useState('default');\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice', role: 'Admin' },\n    { id: '2', name: 'Bob', role: 'User' },\n    { id: '3', name: 'Carol', role: 'Editor' },\n  ];\n\n  return (\n    <Stack gap=\"400\">\n      <Stack direction=\"row\" gap=\"300\">\n        <Button\n          variant={density === 'default' ? 'solid' : 'outline'}\n          colorPalette=\"primary\"\n          onPress={() => setDensity('default')}\n        >\n          Default\n        </Button>\n        <Button\n          variant={density === 'condensed' ? 'solid' : 'outline'}\n          colorPalette=\"primary\"\n          onPress={() => setDensity('condensed')}\n        >\n          Condensed\n        </Button>\n      </Stack>\n      <DataTable columns={columns} rows={rows} density={density} />\n    </Stack>\n  );\n}\n```\n\n### Sorting\n\nEnable sorting with `allowsSorting`. Individual columns can opt-out using\n`isSortable: false`:\n\n```jsx live-dev\nconst App = () => {\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name, isSortable: true },\n    { id: 'age', header: 'Age', accessor: (row) => row.age, isSortable: true },\n    { id: 'role', header: 'Role', accessor: (row) => row.role, isSortable: false },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice', age: 30, role: 'Admin' },\n    { id: '2', name: 'Bob', age: 25, role: 'User' },\n    { id: '3', name: 'Carol', age: 28, role: 'Editor' },\n  ];\n\n  return (\n    <Stack gap=\"300\">\n      <Text>Click column headers to sort. The \"Role\" column is not sortable.</Text>\n      <DataTable\n        columns={columns}\n        rows={rows}\n        allowsSorting\n        defaultSortDescriptor={{ column: 'name', direction: 'ascending' }}\n      />\n    </Stack>\n  );\n}\n```\n\n### Controlled sorting\n\nFor external sort state management, use `sortDescriptor` and `onSortChange`:\n\n```jsx live-dev\nconst App = () => {\n  const [sortDescriptor, setSortDescriptor] = useState({\n    column: 'name',\n    direction: 'ascending',\n  });\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name, isSortable: true },\n    { id: 'age', header: 'Age', accessor: (row) => row.age, isSortable: true },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice', age: 30 },\n    { id: '2', name: 'Bob', age: 25 },\n    { id: '3', name: 'Carol', age: 28 },\n  ];\n\n  return (\n    <Stack gap=\"400\">\n      <Text>\n        Sorting by: <Text as=\"strong\">{sortDescriptor.column}</Text> ({sortDescriptor.direction})\n      </Text>\n      <Stack direction=\"row\" gap=\"300\">\n        <Button\n          variant=\"outline\"\n          size=\"md\"\n          colorPalette=\"primary\"\n          onPress={() => setSortDescriptor({ column: 'name', direction: 'ascending' })}\n        >\n          Sort by Name (A-Z)\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"md\"\n          colorPalette=\"primary\"\n          onPress={() => setSortDescriptor({ column: 'age', direction: 'descending' })}\n        >\n          Sort by Age (High-Low)\n        </Button>\n      </Stack>\n      <DataTable\n        columns={columns}\n        rows={rows}\n        allowsSorting\n        sortDescriptor={sortDescriptor}\n        onSortChange={setSortDescriptor}\n      />\n    </Stack>\n  );\n}\n```\n\n### Row selection\n\nEnable selection with `selectionMode`. Supports `none`, `single`, or `multiple`:\n\n```jsx live-dev\nconst App = () => {\n  const [selectedKeys, setSelectedKeys] = useState(new Set(['1']));\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'email', header: 'Email', accessor: (row) => row.email },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice', email: 'alice@example.com' },\n    { id: '2', name: 'Bob', email: 'bob@example.com' },\n    { id: '3', name: 'Carol', email: 'carol@example.com' },\n  ];\n\n  const selectedCount = selectedKeys === 'all' ? rows.length : selectedKeys.size;\n\n  return (\n    <Stack gap=\"400\">\n      <Text>Selected: {selectedCount} row(s)</Text>\n      <Stack direction=\"row\" gap=\"300\">\n        <Button\n          variant=\"outline\"\n          colorPalette=\"primary\"\n          size=\"md\"\n          onPress={() => setSelectedKeys(new Set())}>\n          Clear\n        </Button>\n        <Button size=\"md\" colorPalette=\"primary\" variant=\"outline\" onPress={() => setSelectedKeys('all')}>\n          Select All\n        </Button>\n      </Stack>\n      <DataTable\n        columns={columns}\n        rows={rows}\n        selectionMode=\"multiple\"\n        selectedKeys={selectedKeys}\n        onSelectionChange={setSelectedKeys}\n      />\n    </Stack>\n  );\n}\n```\n\n### Resizable columns\n\nEnable column resizing with `isResizable` on the table or individual columns:\n\n```jsx live-dev\nconst App = () => {\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name, isResizable: true, width: 150 },\n    { id: 'description', header: 'Description', accessor: (row) => row.description, isResizable: true },\n    { id: 'status', header: 'Status', accessor: (row) => row.status, isResizable: false },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Product A', description: 'A great product for everyday use', status: 'Active' },\n    { id: '2', name: 'Product B', description: 'Premium quality item', status: 'Draft' },\n  ];\n\n  return (\n    <Stack gap=\"300\">\n      <Text>Drag column borders to resize. The \"Status\" column is fixed width.</Text>\n      <DataTable columns={columns} rows={rows} isResizable />\n    </Stack>\n  );\n}\n```\n\n### Sticky header with scrolling\n\nUse `maxHeight` to enable vertical scrolling with a sticky header:\n\n```jsx live-dev\nconst App = () => {\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n  ];\n\n  const rows = Array.from({ length: 20 }, (_, i) => ({\n    id: String(i + 1),\n    name: `User ${i + 1}`,\n    role: i % 3 === 0 ? 'Admin' : i % 3 === 1 ? 'Editor' : 'Viewer',\n  }));\n\n  return (\n    <DataTable\n      columns={columns}\n      rows={rows}\n      maxHeight=\"300px\"\n    />\n  );\n}\n```\n\n### Text truncation\n\nEnable `isTruncated` to truncate long text with ellipsis:\n\n```jsx live-dev\nconst App = () => {\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'description', header: 'Description', accessor: (row) => row.description },\n  ];\n\n  const rows = [\n    {\n      id: '1',\n      name: 'Product A',\n      description: 'This is a very long description that should be truncated when displayed in the table cell to prevent layout issues.',\n    },\n    {\n      id: '2',\n      name: 'Product B',\n      description: 'Another lengthy description that demonstrates how truncation works with ellipsis and maintains a clean table layout.',\n    },\n  ];\n\n  return <DataTable columns={columns} rows={rows} isTruncated />;\n}\n```\n\n### Clickable rows\n\nUse `onRowClick` to handle row click events for navigation or detail views:\n\n```jsx live-dev\nconst App = () => {\n  const [clickedRow, setClickedRow] = useState(null);\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'email', header: 'Email', accessor: (row) => row.email },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice', email: 'alice@example.com' },\n    { id: '2', name: 'Bob', email: 'bob@example.com' },\n    { id: '3', name: 'Carol', email: 'carol@example.com' },\n  ];\n\n  return (\n    <Stack gap=\"400\">\n      <Text>\n        {clickedRow ? `Clicked: ${clickedRow.name}` : 'Click a row to see details'}\n      </Text>\n      <DataTable\n        columns={columns}\n        rows={rows}\n        onRowClick={(row) => setClickedRow(row)}\n      />\n    </Stack>\n  );\n}\n```\n\n### Search and filtering\n\nUse the `search` prop to filter rows across all visible columns:\n\n```jsx live-dev\nconst App = () => {\n  const [search, setSearch] = useState('');\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n    { id: 'department', header: 'Department', accessor: (row) => row.department },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice Johnson', role: 'Admin', department: 'Engineering' },\n    { id: '2', name: 'Bob Smith', role: 'Developer', department: 'Engineering' },\n    { id: '3', name: 'Carol Williams', role: 'Designer', department: 'Design' },\n    { id: '4', name: 'David Brown', role: 'Manager', department: 'Sales' },\n  ];\n\n  return (\n    <Stack gap=\"400\">\n      <TextInput\n        value={search}\n        onChange={setSearch}\n        placeholder=\"Search...\"\n        width=\"300px\"\n        aria-label=\"Search table\"\n      />\n      <DataTable columns={columns} rows={rows} search={search} />\n    </Stack>\n  );\n}\n```\n\n### Column visibility\n\nControl which columns are displayed using `visibleColumns`:\n\n```jsx live-dev\nconst App = () => {\n  const [visibleColumns, setVisibleColumns] = useState(['name', 'email']);\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'email', header: 'Email', accessor: (row) => row.email },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n    { id: 'department', header: 'Department', accessor: (row) => row.department },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', department: 'Engineering' },\n    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', department: 'Sales' },\n  ];\n\n  const toggleColumn = (colId) => {\n    setVisibleColumns((prev) =>\n      prev.includes(colId) ? prev.filter((id) => id !== colId) : [...prev, colId]\n    );\n  };\n\n  return (\n    <Stack gap=\"400\">\n      <Stack direction=\"row\" gap=\"300\" wrap=\"wrap\">\n        {columns.map((col) => (\n          <Checkbox\n            key={col.id}\n            isSelected={visibleColumns.includes(col.id)}\n            onChange={() => toggleColumn(col.id)}\n          >\n            {col.header}\n          </Checkbox>\n        ))}\n      </Stack>\n      <DataTable columns={columns} rows={rows} visibleColumns={visibleColumns} />\n    </Stack>\n  );\n}\n```\n\n### Nested rows\n\nUse `nestedKey` to enable expandable nested content:\n\n```jsx live-dev\nconst App = () => {\n  const columns = [\n    { id: 'name', header: 'Category', accessor: (row) => row.name },\n    { id: 'count', header: 'Products', accessor: (row) => row.count },\n  ];\n\n  const rows = [\n    {\n      id: '1',\n      name: 'Electronics',\n      count: 3,\n      children: [\n        { id: '1-1', name: 'Laptops', count: 15 },\n        { id: '1-2', name: 'Phones', count: 25 },\n        { id: '1-3', name: 'Tablets', count: 10 },\n      ],\n    },\n    {\n      id: '2',\n      name: 'Clothing',\n      count: 2,\n      children: [\n        { id: '2-1', name: 'Shirts', count: 50 },\n        { id: '2-2', name: 'Pants', count: 30 },\n      ],\n    },\n    { id: '3', name: 'Books', count: 0 },\n  ];\n\n  return (\n    <Stack gap=\"300\">\n      <Text>Click the expand button to view nested items.</Text>\n      <DataTable columns={columns} rows={rows} nestedKey=\"children\" />\n    </Stack>\n  );\n}\n```\n\n### With footer\n\nAdd pagination or summary content using the `footer` prop:\n\n```jsx live-dev\nconst App = () => {\n  const [page, setPage] = useState(1);\n  const pageSize = 3;\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n  ];\n\n  const allRows = Array.from({ length: 10 }, (_, i) => ({\n    id: String(i + 1),\n    name: `User ${i + 1}`,\n    role: i % 2 === 0 ? 'Admin' : 'User',\n  }));\n\n  const totalPages = Math.ceil(allRows.length / pageSize);\n  const rows = allRows.slice((page - 1) * pageSize, page * pageSize);\n\n  return (\n    <DataTable\n      columns={columns}\n      rows={rows}\n      footer={\n        <Stack direction=\"row\" justify=\"space-between\" align=\"center\" width=\"full\" px=\"400\" py=\"300\">\n          <Text fontSize=\"sm\">\n            Showing {(page - 1) * pageSize + 1}-{Math.min(page * pageSize, allRows.length)} of {allRows.length}\n          </Text>\n          <Stack direction=\"row\" gap=\"200\">\n            <Button\n              size=\"md\"\n              colorPalette=\"primary\"\n              variant=\"outline\"\n              onPress={() => setPage((p) => Math.max(1, p - 1))}\n              isDisabled={page === 1}\n            >\n              Previous\n            </Button>\n            <Button\n              size=\"md\"\n              variant=\"outline\"\n              colorPalette=\"primary\"\n              onPress={() => setPage((p) => Math.min(totalPages, p + 1))}\n              isDisabled={page === totalPages}\n            >\n              Next\n            </Button>\n          </Stack>\n        </Stack>\n      }\n    />\n  );\n}\n```\n\n### Disabled rows\n\nUse `disabledKeys` to prevent interaction with specific rows:\n\n```jsx live-dev\nconst App = () => {\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'status', header: 'Status', accessor: (row) => row.status },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Active Item', status: 'Available' },\n    { id: '2', name: 'Disabled Item', status: 'Unavailable' },\n    { id: '3', name: 'Another Active', status: 'Available' },\n  ];\n\n  return (\n    <DataTable\n      columns={columns}\n      rows={rows}\n      selectionMode=\"multiple\"\n      disabledKeys={new Set(['2'])}\n    />\n  );\n}\n```\n\n### Row pinning\n\nPin important rows to the top of the table:\n\n```jsx live-dev\nconst App = () => {\n  const [pinnedRows, setPinnedRows] = useState(new Set(['1']));\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'priority', header: 'Priority', accessor: (row) => row.priority },\n  ];\n\n  const rows = [\n    { id: '1', name: 'High Priority Task', priority: 'High' },\n    { id: '2', name: 'Normal Task', priority: 'Normal' },\n    { id: '3', name: 'Low Priority Task', priority: 'Low' },\n  ];\n\n  return (\n    <Stack gap=\"400\">\n      <Text>Row 1 is pinned to the top. Pinned rows stay at top when sorting.</Text>\n      <DataTable\n        columns={columns}\n        rows={rows}\n        pinnedRows={pinnedRows}\n        onPinToggle={(rowId) => {\n          setPinnedRows((prev) => {\n            const next = new Set(prev);\n            if (next.has(rowId)) {\n              next.delete(rowId);\n            } else {\n              next.add(rowId);\n            }\n            return next;\n          });\n        }}\n        allowsSorting\n      />\n    </Stack>\n  );\n}\n```\n\n## Compound component API\n\nFor advanced customization, use the compound component pattern:\n\n```jsx live-dev\nconst App = () => {\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice', role: 'Admin' },\n    { id: '2', name: 'Bob', role: 'User' },\n  ];\n\n  return (\n    <DataTable.Root columns={columns} rows={rows} allowsSorting>\n      <DataTable.Manager />\n      <DataTable.Table aria-label=\"Users table\">\n        <DataTable.Header />\n        <DataTable.Body />\n      </DataTable.Table>\n      <DataTable.Footer>\n        <Stack direction=\"row\" justify=\"center\" py=\"300\">\n          <Text fontSize=\"sm\" color=\"neutral.11\">Custom footer content</Text>\n        </Stack>\n      </DataTable.Footer>\n    </DataTable.Root>\n  );\n}\n```\n\n### Available sub-components\n\n| Component           | Description                                                                                             |\n| ------------------- | ------------------------------------------------------------------------------------------------------- |\n| `DataTable.Root`    | Provider component that manages state and context                                                       |\n| `DataTable.Table`   | The main table element                                                                                  |\n| `DataTable.Header`  | Table header with column headers                                                                        |\n| `DataTable.Body`    | Table body containing rows                                                                              |\n| `DataTable.Footer`  | Footer section for pagination or summaries                                                              |\n| `DataTable.Manager` | Settings panel for column visibility and layout - [see detailed docs below](#advanced-datatablemanager) |\n\n## Advanced: DataTable.Manager\n\nThe `DataTable.Manager` component provides a settings drawer for managing table\nconfiguration. It enables users to control column visibility, reorder columns,\nand adjust layout settings through an intuitive interface.\n\n### Manager overview\n\nDataTable.Manager must be used within a DataTable.Root to access table state and\ncolumns. It renders as a settings button that opens a drawer with multiple\nconfiguration tabs:\n\n```jsx live-dev\nconst App = () => {\n  const [visibleColumns, setVisibleColumns] = useState(['name', 'email', 'role']);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [density, setDensity] = useState('default');\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'email', header: 'Email', accessor: (row) => row.email },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin' },\n    { id: '2', name: 'Bob Smith', email: 'bob@example.com', role: 'User' },\n    { id: '3', name: 'Carol Williams', email: 'carol@example.com', role: 'Editor' },\n  ];\n\n  const handleSettingsChange = (action) => {\n    if (action === 'toggleTextVisibility') {\n      setIsTruncated(!isTruncated);\n    } else if (action === 'toggleRowDensity') {\n      setDensity(density === 'default' ? 'condensed' : 'default');\n    }\n  };\n\n  return (\n    <DataTable.Root\n      columns={columns}\n      rows={rows}\n      visibleColumns={visibleColumns}\n      onColumnsChange={(updatedColumns) => {\n        setVisibleColumns(updatedColumns.map(col => col.id));\n      }}\n      isTruncated={isTruncated}\n      density={density}\n      onSettingsChange={handleSettingsChange}\n    >\n      <Stack direction=\"row\" justifyContent=\"space-between\" mb=\"400\">\n        <Text fontSize=\"lg\" fontWeight=\"600\">Users</Text>\n        <DataTable.Manager />\n      </Stack>\n      <DataTable.Table>\n        <DataTable.Header />\n        <DataTable.Body />\n      </DataTable.Table>\n    </DataTable.Root>\n  );\n}\n```\n\n### Manager: Column visibility\n\nThe Manager provides a dual-list interface for managing visible and hidden\ncolumns. Users can drag columns between lists, reorder visible columns, and\nsearch hidden columns:\n\n```jsx live-dev\nconst App = () => {\n  const [visibleColumns, setVisibleColumns] = useState(['name', 'email']);\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'email', header: 'Email', accessor: (row) => row.email },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n    { id: 'department', header: 'Department', accessor: (row) => row.department },\n  ];\n\n  const rows = [\n    { id: '1', name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', department: 'Engineering' },\n    { id: '2', name: 'Bob Smith', email: 'bob@example.com', role: 'User', department: 'Sales' },\n  ];\n\n  return (\n    <DataTable.Root\n      columns={columns}\n      rows={rows}\n      visibleColumns={visibleColumns}\n      onColumnsChange={(updatedColumns) => {\n        setVisibleColumns(updatedColumns.map(col => col.id));\n      }}\n    >\n      <Stack direction=\"row\" justifyContent=\"space-between\" mb=\"400\">\n        <Text fontSize=\"lg\" fontWeight=\"600\">Team Members</Text>\n        <DataTable.Manager />\n      </Stack>\n      <DataTable.Table>\n        <DataTable.Header />\n        <DataTable.Body />\n      </DataTable.Table>\n    </DataTable.Root>\n  );\n}\n```\n\n### Manager: Layout settings\n\nThe Layout Settings tab allows users to control text truncation and row density.\nThese settings update the table's visual appearance in real-time:\n\n```jsx live-dev\nconst App = () => {\n  const [visibleColumns, setVisibleColumns] = useState(['name', 'description']);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [density, setDensity] = useState('default');\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'description', header: 'Description', accessor: (row) => row.description },\n  ];\n\n  const rows = [\n    {\n      id: '1',\n      name: 'Product A',\n      description: 'This is a very long description that will demonstrate text truncation when enabled'\n    },\n    {\n      id: '2',\n      name: 'Product B',\n      description: 'Another lengthy description to show how the layout settings affect content display'\n    },\n  ];\n\n  const handleSettingsChange = (action) => {\n    if (action === 'toggleTextVisibility') {\n      setIsTruncated(!isTruncated);\n    } else if (action === 'toggleRowDensity') {\n      setDensity(density === 'default' ? 'condensed' : 'default');\n    }\n  };\n\n  return (\n    <DataTable.Root\n      columns={columns}\n      rows={rows}\n      visibleColumns={visibleColumns}\n      onColumnsChange={(updatedColumns) => {\n        setVisibleColumns(updatedColumns.map(col => col.id));\n      }}\n      isTruncated={isTruncated}\n      density={density}\n      onSettingsChange={handleSettingsChange}\n    >\n      <Stack direction=\"row\" justifyContent=\"space-between\" mb=\"400\">\n        <Text fontSize=\"lg\" fontWeight=\"600\">Products</Text>\n        <DataTable.Manager />\n      </Stack>\n      <DataTable.Table>\n        <DataTable.Header />\n        <DataTable.Body />\n      </DataTable.Table>\n    </DataTable.Root>\n  );\n}\n```\n\n### Manager: Custom settings tab\n\nAdd a custom settings tab by providing the `customSettings` prop to\nDataTable.Root. This allows extending the Manager with application-specific\nconfiguration:\n\n```jsx live-dev\nconst App = () => {\n  const [visibleColumns, setVisibleColumns] = useState(['name', 'status']);\n  const [filterStatus, setFilterStatus] = useState('all');\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'status', header: 'Status', accessor: (row) => row.status },\n  ];\n\n  const allRows = [\n    { id: '1', name: 'Task A', status: 'Active' },\n    { id: '2', name: 'Task B', status: 'Inactive' },\n    { id: '3', name: 'Task C', status: 'Active' },\n  ];\n\n  const filteredRows = filterStatus === 'all'\n    ? allRows\n    : allRows.filter(row => row.status.toLowerCase() === filterStatus);\n\n  const customSettingsPanel = (\n    <Stack direction=\"column\" gap=\"400\">\n      <Text fontWeight=\"600\">Filter Options</Text>\n      <ToggleButtonGroup.Root\n        selectedKeys={[filterStatus]}\n        onSelectionChange={(keys) => setFilterStatus(Array.from(keys)[0])}\n      >\n        <ToggleButton id=\"all\">All</ToggleButton>\n        <ToggleButton id=\"active\">Active</ToggleButton>\n        <ToggleButton id=\"inactive\">Inactive</ToggleButton>\n      </ToggleButtonGroup.Root>\n    </Stack>\n  );\n\n  return (\n    <DataTable.Root\n      columns={columns}\n      rows={filteredRows}\n      visibleColumns={visibleColumns}\n      onColumnsChange={(updatedColumns) => {\n        setVisibleColumns(updatedColumns.map(col => col.id));\n      }}\n      customSettings={{\n        label: 'Filters',\n        icon: <Icons.FilterList />,\n        panel: customSettingsPanel,\n      }}\n    >\n      <Stack direction=\"row\" justifyContent=\"space-between\" mb=\"400\">\n        <Text fontSize=\"lg\" fontWeight=\"600\">Tasks</Text>\n        <DataTable.Manager />\n      </Stack>\n      <DataTable.Table>\n        <DataTable.Header />\n        <DataTable.Body />\n      </DataTable.Table>\n    </DataTable.Root>\n  );\n}\n```\n\n### Manager: Controlled column state with persistence\n\nManage column configuration externally for features like saving user\npreferences:\n\n```jsx live-dev\nconst App = () => {\n  const [visibleColumns, setVisibleColumns] = useState(['name', 'email', 'role']);\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: (row) => row.name },\n    { id: 'email', header: 'Email', accessor: (row) => row.email },\n    { id: 'role', header: 'Role', accessor: (row) => row.role },\n    { id: 'department', header: 'Department', accessor: (row) => row.department },\n    { id: 'location', header: 'Location', accessor: (row) => row.location },\n  ];\n\n  const rows = [\n    {\n      id: '1',\n      name: 'Alice Johnson',\n      email: 'alice@example.com',\n      role: 'Admin',\n      department: 'Engineering',\n      location: 'New York'\n    },\n  ];\n\n  const handleColumnsChange = (updatedColumns) => {\n    const newVisibleColumns = updatedColumns.map(col => col.id);\n    setVisibleColumns(newVisibleColumns);\n\n    // Example: Save to localStorage\n    localStorage.setItem('tableColumns', JSON.stringify(newVisibleColumns));\n  };\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <DataTable.Root\n        columns={columns}\n        rows={rows}\n        visibleColumns={visibleColumns}\n        onColumnsChange={handleColumnsChange}\n      >\n        <Stack direction=\"row\" justifyContent=\"space-between\" mb=\"400\">\n          <Text fontSize=\"lg\" fontWeight=\"600\">Team Directory</Text>\n          <DataTable.Manager />\n        </Stack>\n        <DataTable.Table>\n          <DataTable.Header />\n          <DataTable.Body />\n        </DataTable.Table>\n      </DataTable.Root>\n      <Text fontSize=\"sm\" color=\"gray.9\">\n        Visible columns: {visibleColumns.join(', ')}\n      </Text>\n    </Stack>\n  );\n}\n```\n\n### Manager: Context requirements\n\nDataTable.Manager **must** be used within a DataTable.Root component. It relies\non the DataTable context for:\n\n- Column configuration (`columns`, `visibleColumns`)\n- Layout settings (`isTruncated`, `density`)\n- Callbacks (`onColumnsChange`, `onSettingsChange`)\n- Custom settings configuration\n\nUsing Manager outside of DataTable.Root will throw an error.\n\n## Component requirements\n\n## Accessibility\n\nThe DataTable uses React Aria's Table components for full accessibility support:\n\n- **ARIA grid pattern**: The table implements the ARIA grid pattern with proper\n  roles\n- **Keyboard navigation**: Full keyboard support with arrow keys, Tab, Enter,\n  and Space\n- **Screen reader support**: Proper announcements for sorting, selection, and\n  expansion\n\nAlways provide an accessible label for the table:\n\n```tsx\n<DataTable columns={columns} rows={rows} aria-label=\"Product inventory table\" />\n```\n\nOr with the compound component API:\n\n```tsx\n<DataTable.Root columns={columns} rows={rows}>\n  <DataTable.Table aria-label=\"Product inventory table\">\n    <DataTable.Header />\n    <DataTable.Body />\n  </DataTable.Table>\n</DataTable.Root>\n```\n\n#### Persistent ID\n\nIf your use case requires tracking and analytics for this component, it is good\npractice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"product-inventory-table\";\n\nexport const Example = () => (\n  <DataTable\n    id={PERSISTENT_ID}\n    columns={columns}\n    rows={rows}\n    aria-label=\"Product inventory table\"\n  />\n);\n```\n\n#### Keyboard navigation\n\nThe component supports full keyboard interaction:\n\n- `Tab` / `Shift+Tab`: Move focus between interactive elements\n- `Arrow keys`: Navigate between cells and rows\n- `Enter` / `Space`: Activate sorting, selection, or expansion\n- `Escape`: Cancel current interaction\n\nThe Manager drawer also supports keyboard navigation:\n\n- `Tab` / `Shift+Tab`: Navigate between the settings button, tabs, and controls\n- `Enter` / `Space`: Open the Manager drawer, activate tabs, toggle buttons\n- `Arrow keys`: Navigate between tab panels, reorder items in drag-and-drop\n  lists\n- `Escape`: Close the Manager drawer\n- Drag-and-drop keyboard operations: `Space` to pick up, arrow keys to move,\n  `Space` to drop\n\n## API reference\n\n<PropsTable id=\"DataTable\" />\n\n### DataTableColumnItem\n\n```tsx\ntype DataTableColumnItem<T extends object = Record<string, unknown>> = {\n  id: string; // Unique column identifier\n  header: ReactNode; // Column header content\n  accessor: (row: T) => ReactNode; // Function to extract cell value\n  render?: (cell: {\n    // Custom cell renderer\n    value: unknown;\n    row: T;\n    column: DataTableColumnItem<T>;\n  }) => ReactNode;\n  isResizable?: boolean; // Enable column resizing\n  width?: number | null; // Initial width in pixels\n  defaultWidth?: number | null; // Default width\n  minWidth?: number | null; // Minimum width when resizing\n  maxWidth?: number | null; // Maximum width when resizing\n  sticky?: boolean; // Stick column to edge\n  isSortable?: boolean; // Enable sorting for column\n  isRowHeader?: boolean; // Mark as row header (accessibility)\n  headerIcon?: ReactNode; // Icon in column header\n};\n```\n\n### DataTableRowItem\n\n```tsx\ntype DataTableRowItem<T extends object = Record<string, unknown>> = T & {\n  id: string; // Unique row identifier (required)\n  isDisabled?: boolean; // Disable row interactions\n  [key: string]: unknown;\n};\n```\n\n### SortDescriptor\n\n```tsx\ntype SortDescriptor = {\n  column: string; // Column ID to sort by\n  direction: \"ascending\" | \"descending\"; // Sort direction\n};\n```\n\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using DataTable\nin your application. As the component's internal functionality is already tested\nby Nimbus, these patterns help you verify your integration and\napplication-specific logic.\n\n### Basic Rendering Tests\n\nVerify the DataTable renders with correct structure\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Basic rendering\", () => {\n  it(\"renders table with grid role\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"grid\")).toBeInTheDocument();\n  });\n\n  it(\"renders column headers\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Name\")).toBeInTheDocument();\n    expect(screen.getByText(\"Email\")).toBeInTheDocument();\n    expect(screen.getByText(\"Role\")).toBeInTheDocument();\n  });\n\n  it(\"renders all data rows\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Alice Johnson\")).toBeInTheDocument();\n    expect(screen.getByText(\"Bob Smith\")).toBeInTheDocument();\n    expect(screen.getByText(\"Carol Williams\")).toBeInTheDocument();\n  });\n\n  it(\"renders correct number of rows\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} />\n      </NimbusProvider>\n    );\n\n    // 1 header row + 3 data rows\n    const allRows = screen.getAllByRole(\"row\");\n    expect(allRows.length).toBe(4);\n  });\n});\n```\n\n### Sorting Tests\n\nTest column sorting functionality\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Sorting\", () => {\n  it(\"renders sortable column headers when allowsSorting is true\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} allowsSorting />\n      </NimbusProvider>\n    );\n\n    const nameHeader = screen\n      .getByText(\"Name\")\n      .closest('[role=\"columnheader\"]');\n    expect(nameHeader).toBeInTheDocument();\n  });\n\n  it(\"calls onSortChange when column header is clicked\", async () => {\n    const user = userEvent.setup();\n    const handleSortChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <DataTable\n          columns={columns}\n          rows={rows}\n          allowsSorting\n          onSortChange={handleSortChange}\n        />\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByText(\"Name\"));\n\n    expect(handleSortChange).toHaveBeenCalledWith({\n      column: \"name\",\n      direction: expect.any(String),\n    });\n  });\n\n  it(\"displays sort indicator on sorted column\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} allowsSorting />\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByText(\"Name\"));\n\n    await waitFor(() => {\n      const columnHeader = screen\n        .getByText(\"Name\")\n        .closest('[role=\"columnheader\"]');\n      expect(columnHeader).toHaveAttribute(\"aria-sort\");\n    });\n  });\n});\n```\n\n### Selection Tests\n\nTest row selection functionality\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Selection\", () => {\n  it(\"renders checkboxes when selectionMode is multiple\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} selectionMode=\"multiple\" />\n      </NimbusProvider>\n    );\n\n    const checkboxes = screen.getAllByRole(\"checkbox\");\n    // 1 select-all checkbox + 3 row checkboxes\n    expect(checkboxes.length).toBe(4);\n  });\n\n  it(\"allows selecting a row\", async () => {\n    const user = userEvent.setup();\n    const handleSelectionChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <DataTable\n          columns={columns}\n          rows={rows}\n          selectionMode=\"multiple\"\n          onSelectionChange={handleSelectionChange}\n        />\n      </NimbusProvider>\n    );\n\n    const checkboxes = screen.getAllByRole(\"checkbox\");\n    await user.click(checkboxes[1]); // First data row checkbox\n\n    expect(handleSelectionChange).toHaveBeenCalled();\n  });\n\n  it(\"allows selecting all rows with header checkbox\", async () => {\n    const user = userEvent.setup();\n    const handleSelectionChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <DataTable\n          columns={columns}\n          rows={rows}\n          selectionMode=\"multiple\"\n          onSelectionChange={handleSelectionChange}\n        />\n      </NimbusProvider>\n    );\n\n    const selectAllCheckbox = screen.getAllByRole(\"checkbox\")[0];\n    await user.click(selectAllCheckbox);\n\n    await waitFor(() => {\n      expect(handleSelectionChange).toHaveBeenCalledWith(\"all\");\n    });\n  });\n\n  it(\"supports single selection mode\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} selectionMode=\"single\" />\n      </NimbusProvider>\n    );\n\n    const radios = screen.getAllByRole(\"checkbox\");\n    expect(radios.length).toBe(3);\n  });\n});\n```\n\n### Row Interaction Tests\n\nTest row click and interaction functionality\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Row interactions\", () => {\n  it(\"calls onRowClick when a row is clicked\", async () => {\n    const user = userEvent.setup();\n    const handleRowClick = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <DataTable\n          columns={columns}\n          rows={rows}\n          search=\"\"\n          onRowClick={handleRowClick}\n        />\n      </NimbusProvider>\n    );\n\n    const allRows = screen.getAllByRole(\"row\");\n    const firstDataRow = allRows[1]; // Second data row (index 2 because of header)\n    const clickableCell = within(firstDataRow).getAllByRole(\"rowheader\");\n    await user.click(clickableCell[0]);\n\n    await waitFor(() => {\n      expect(handleRowClick).toHaveBeenCalled();\n    });\n  });\n\n  it(\"applies disabled state to specified rows\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable\n          columns={columns}\n          rows={rows}\n          selectionMode=\"multiple\"\n          disabledKeys={new Set([\"2\"])}\n        />\n      </NimbusProvider>\n    );\n\n    const allRows = screen.getAllByRole(\"row\");\n    const disabledRow = allRows[2]; // Second data row (index 2 because of header)\n    const checkbox = within(disabledRow).getByRole(\"checkbox\");\n    expect(checkbox).toBeDisabled();\n  });\n});\n```\n\n### Search and Filtering Tests\n\nTest search functionality\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Search and filtering\", () => {\n  it(\"filters rows based on search term\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} search=\"Alice\" />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Alice\", { selector: \"mark\" })).toBeInTheDocument();\n    expect(screen.getByText(\"Johnson\")).toBeInTheDocument();\n    expect(screen.queryByText(\"Bob Smith\")).not.toBeInTheDocument();\n    expect(screen.queryByText(\"Carol Williams\")).not.toBeInTheDocument();\n  });\n\n  it(\"shows all rows when search is empty\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} search=\"\" />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Alice Johnson\")).toBeInTheDocument();\n    expect(screen.getByText(\"Bob Smith\")).toBeInTheDocument();\n    expect(screen.getByText(\"Carol Williams\")).toBeInTheDocument();\n  });\n\n  it(\"filters across multiple columns\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} search=\"Admin\" />\n      </NimbusProvider>\n    );\n\n    // Alice is the Admin\n    expect(screen.getByText(\"Alice Johnson\")).toBeInTheDocument();\n    expect(screen.queryByText(\"Bob Smith\")).not.toBeInTheDocument();\n  });\n});\n```\n\n### Column Visibility Tests\n\nTest column visibility control\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Column visibility\", () => {\n  it(\"shows only specified visible columns\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable\n          columns={columns}\n          rows={rows}\n          visibleColumns={[\"name\", \"role\"]}\n        />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Name\")).toBeInTheDocument();\n    expect(screen.getByText(\"Role\")).toBeInTheDocument();\n    expect(screen.queryByText(\"Email\")).not.toBeInTheDocument();\n  });\n\n  it(\"shows all columns when visibleColumns is not specified\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Name\")).toBeInTheDocument();\n    expect(screen.getByText(\"Email\")).toBeInTheDocument();\n    expect(screen.getByText(\"Role\")).toBeInTheDocument();\n  });\n});\n```\n\n### Density Tests\n\nTest density variants\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Density\", () => {\n  it(\"renders with default density\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} density=\"default\" />\n      </NimbusProvider>\n    );\n\n    const table = screen.getByRole(\"grid\");\n    expect(table).toBeInTheDocument();\n  });\n\n  it(\"renders with condensed density\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} density=\"condensed\" />\n      </NimbusProvider>\n    );\n\n    const table = screen.getByRole(\"grid\");\n    expect(table).toBeInTheDocument();\n  });\n});\n```\n\n### Nested Rows Tests\n\nTest expandable nested row functionality\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Nested rows\", () => {\n  const nestedRows: DataTableRowItem[] = [\n    {\n      id: \"1\",\n      name: \"Parent Item\",\n      email: \"parent@example.com\",\n      role: \"Admin\",\n      children: (\n        <Box\n          p=\"500\"\n          bg=\"neutral.2\"\n          borderRadius=\"md\"\n          border=\"1px solid\"\n          borderColor=\"neutral.6\"\n          m=\"200 0\"\n        >\n          Child Item 1\n        </Box>\n      ),\n    },\n    {\n      id: \"2\",\n      name: \"No Children\",\n      email: \"single@example.com\",\n      role: \"User\",\n    },\n  ];\n\n  it(\"renders expand button for rows with children\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={nestedRows} nestedKey=\"children\" />\n      </NimbusProvider>\n    );\n\n    const expandButton = screen.getByRole(\"button\", { name: /expand/i });\n    expect(expandButton).toBeInTheDocument();\n  });\n\n  it(\"expands nested content when expand button is clicked\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={nestedRows} nestedKey=\"children\" />\n      </NimbusProvider>\n    );\n\n    // Initially nested content should not be visible\n    expect(screen.queryByText(\"Child Item 1\")).not.toBeInTheDocument();\n\n    const expandButton = screen.getByRole(\"button\", { name: /expand/i });\n    expect(expandButton).toBeInTheDocument();\n    await user.click(expandButton);\n\n    await waitFor(async () => {\n      await expect(screen.getByText(\"Child Item 1\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"collapses nested content when collapse button is clicked\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={nestedRows} nestedKey=\"children\" />\n      </NimbusProvider>\n    );\n\n    // Expand first\n    const expandButton = screen.getByRole(\"button\", { name: /expand/i });\n    await user.click(expandButton);\n\n    await waitFor(() => {\n      expect(screen.getByText(\"Child Item 1\")).toBeInTheDocument();\n    });\n\n    // Collapse\n    const collapseButton = screen.getByRole(\"button\", { name: /collapse/i });\n    await user.click(collapseButton);\n\n    await waitFor(() => {\n      expect(screen.queryByText(\"Child Item 1\")).not.toBeInTheDocument();\n    });\n  });\n});\n```\n\n### Empty State Tests\n\nTest empty state rendering\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Empty state\", () => {\n  it(\"renders custom empty state when no rows\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={[]} />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"No Data\")).toBeInTheDocument();\n  });\n\n  it(\"renders empty state when search matches no rows\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} search=\"nonexistent\" />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"No Data\")).toBeInTheDocument();\n  });\n});\n```\n\n### Accessibility Tests\n\nTest accessibility features\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable - Accessibility\", () => {\n  it(\"has accessible grid role\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} aria-label=\"Users table\" />\n      </NimbusProvider>\n    );\n\n    const table = screen.getByRole(\"grid\");\n    expect(table).toBeInTheDocument();\n  });\n\n  it(\"has proper row structure\", () => {\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} />\n      </NimbusProvider>\n    );\n\n    const tableRows = screen.getAllByRole(\"row\");\n    expect(tableRows.length).toBeGreaterThan(0);\n\n    // Check that rows contain cells\n    const firstDataRow = tableRows[1];\n    const cells = within(firstDataRow).getAllByRole(\"gridcell\");\n    expect(cells.length).toBeGreaterThan(0);\n  });\n\n  it(\"has sortable columns with aria-sort attribute\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <DataTable columns={columns} rows={rows} allowsSorting />\n      </NimbusProvider>\n    );\n\n    await user.click(screen.getByText(\"Name\"));\n\n    await waitFor(() => {\n      const columnHeader = screen\n        .getByText(\"Name\")\n        .closest('[role=\"columnheader\"]');\n      expect(columnHeader).toHaveAttribute(\"aria-sort\");\n    });\n  });\n});\n```\n\n### Manager: Basic Rendering Tests\n\nVerify the Manager button renders and opens the settings drawer\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable.Manager - Basic rendering\", () => {\n  it(\"renders the settings button\", () => {\n    const managerColumns: DataTableColumnItem[] = [\n      {\n        id: \"name\",\n        header: \"Name\",\n        accessor: (row: Record<string, unknown>) => row.name as React.ReactNode,\n      },\n      {\n        id: \"email\",\n        header: \"Email\",\n        accessor: (row: Record<string, unknown>) =>\n          row.email as React.ReactNode,\n      },\n    ];\n    const managerRows: DataTableRowItem[] = [\n      { id: \"1\", name: \"Alice\", email: \"alice@example.com\" },\n    ];\n\n    render(\n      <NimbusProvider>\n        <DataTable.Root\n          columns={managerColumns}\n          rows={managerRows}\n          visibleColumns={[\"name\"]}\n        >\n          <DataTable.Manager />\n          <DataTable.Table>\n            <DataTable.Header />\n            <DataTable.Body />\n          </DataTable.Table>\n        </DataTable.Root>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"button\", { name: /settings/i })\n    ).toBeInTheDocument();\n  });\n\n  it(\"settings button is clickable\", async () => {\n    const user = userEvent.setup();\n    const managerColumns: DataTableColumnItem[] = [\n      {\n        id: \"name\",\n        header: \"Name\",\n        accessor: (row: Record<string, unknown>) => row.name as React.ReactNode,\n      },\n      {\n        id: \"email\",\n        header: \"Email\",\n        accessor: (row: Record<string, unknown>) =>\n          row.email as React.ReactNode,\n      },\n    ];\n    const managerRows: DataTableRowItem[] = [\n      { id: \"1\", name: \"Alice\", email: \"alice@example.com\" },\n    ];\n\n    render(\n      <NimbusProvider>\n        <DataTable.Root\n          columns={managerColumns}\n          rows={managerRows}\n          visibleColumns={[\"name\"]}\n        >\n          <DataTable.Manager />\n          <DataTable.Table>\n            <DataTable.Header />\n            <DataTable.Body />\n          </DataTable.Table>\n        </DataTable.Root>\n      </NimbusProvider>\n    );\n\n    const settingsButton = screen.getByRole(\"button\", { name: /settings/i });\n\n    // Verify button can be clicked\n    await user.click(settingsButton);\n\n    // Button should still be in the document after click\n    expect(settingsButton).toBeInTheDocument();\n  });\n});\n```\n\n### Manager: Column Management Tests\n\nTest column visibility and reordering functionality\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable.Manager - Column management\", () => {\n  it(\"displays visible and hidden columns in separate lists\", async () => {\n    const user = userEvent.setup();\n    const managerColumns: DataTableColumnItem[] = [\n      {\n        id: \"name\",\n        header: \"Name\",\n        accessor: (row: Record<string, unknown>) => row.name as React.ReactNode,\n      },\n      {\n        id: \"email\",\n        header: \"Email\",\n        accessor: (row: Record<string, unknown>) =>\n          row.email as React.ReactNode,\n      },\n      {\n        id: \"role\",\n        header: \"Role\",\n        accessor: (row: Record<string, unknown>) => row.role as React.ReactNode,\n      },\n    ];\n    const managerRows: DataTableRowItem[] = [\n      { id: \"1\", name: \"Alice\", email: \"alice@example.com\", role: \"Admin\" },\n    ];\n\n    render(\n      <NimbusProvider>\n        <DataTable.Root\n          columns={managerColumns}\n          rows={managerRows}\n          visibleColumns={[\"name\", \"email\"]}\n        >\n          <DataTable.Manager />\n          <DataTable.Table>\n            <DataTable.Header />\n            <DataTable.Body />\n          </DataTable.Table>\n        </DataTable.Root>\n      </NimbusProvider>\n    );\n\n    const settingsButton = screen.getByRole(\"button\", { name: /settings/i });\n    await user.click(settingsButton);\n\n    await waitFor(() => {\n      const visibleList = screen.getByTestId(\"visible-columns-list\");\n      const hiddenList = screen.getByTestId(\"hidden-columns-list\");\n\n      expect(within(visibleList).getByText(\"Name\")).toBeInTheDocument();\n      expect(within(visibleList).getByText(\"Email\")).toBeInTheDocument();\n      expect(within(hiddenList).getByText(\"Role\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"calls onColumnsChange when column visibility changes\", async () => {\n    const user = userEvent.setup();\n    const handleColumnsChange = vi.fn();\n    const managerColumns: DataTableColumnItem[] = [\n      {\n        id: \"name\",\n        header: \"Name\",\n        accessor: (row: Record<string, unknown>) => row.name as React.ReactNode,\n      },\n      {\n        id: \"email\",\n        header: \"Email\",\n        accessor: (row: Record<string, unknown>) =>\n          row.email as React.ReactNode,\n      },\n    ];\n    const managerRows: DataTableRowItem[] = [\n      { id: \"1\", name: \"Alice\", email: \"alice@example.com\" },\n    ];\n\n    render(\n      <NimbusProvider>\n        <DataTable.Root\n          columns={managerColumns}\n          rows={managerRows}\n          visibleColumns={[\"name\"]}\n          onColumnsChange={handleColumnsChange}\n        >\n          <DataTable.Manager />\n          <DataTable.Table>\n            <DataTable.Header />\n            <DataTable.Body />\n          </DataTable.Table>\n        </DataTable.Root>\n      </NimbusProvider>\n    );\n\n    const settingsButton = screen.getByRole(\"button\", { name: /settings/i });\n    await user.click(settingsButton);\n\n    // Note: Full drag-and-drop testing would require more complex setup\n    // This verifies the callback is available\n    expect(handleColumnsChange).toBeDefined();\n  });\n});\n```\n\n### Manager: Layout Settings Tests\n\nTest text visibility and row density controls\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable.Manager - Layout settings\", () => {\n  it(\"displays layout settings tab\", async () => {\n    const user = userEvent.setup();\n    const managerColumns: DataTableColumnItem[] = [\n      {\n        id: \"name\",\n        header: \"Name\",\n        accessor: (row: Record<string, unknown>) => row.name as React.ReactNode,\n      },\n      {\n        id: \"email\",\n        header: \"Email\",\n        accessor: (row: Record<string, unknown>) =>\n          row.email as React.ReactNode,\n      },\n    ];\n    const managerRows: DataTableRowItem[] = [\n      { id: \"1\", name: \"Alice\", email: \"alice@example.com\" },\n    ];\n\n    render(\n      <NimbusProvider>\n        <DataTable.Root\n          columns={managerColumns}\n          rows={managerRows}\n          visibleColumns={[\"name\"]}\n        >\n          <DataTable.Manager />\n          <DataTable.Table>\n            <DataTable.Header />\n            <DataTable.Body />\n          </DataTable.Table>\n        </DataTable.Root>\n      </NimbusProvider>\n    );\n\n    const settingsButton = screen.getByRole(\"button\", { name: /settings/i });\n    await user.click(settingsButton);\n\n    await waitFor(() => {\n      expect(screen.getByText(/layout settings/i)).toBeInTheDocument();\n    });\n  });\n\n  it(\"calls onSettingsChange when layout settings change\", async () => {\n    const user = userEvent.setup();\n    const handleSettingsChange = vi.fn();\n    const managerColumns: DataTableColumnItem[] = [\n      {\n        id: \"name\",\n        header: \"Name\",\n        accessor: (row: Record<string, unknown>) => row.name as React.ReactNode,\n      },\n      {\n        id: \"email\",\n        header: \"Email\",\n        accessor: (row: Record<string, unknown>) =>\n          row.email as React.ReactNode,\n      },\n    ];\n    const managerRows: DataTableRowItem[] = [\n      { id: \"1\", name: \"Alice\", email: \"alice@example.com\" },\n    ];\n\n    render(\n      <NimbusProvider>\n        <DataTable.Root\n          columns={managerColumns}\n          rows={managerRows}\n          visibleColumns={[\"name\"]}\n          onSettingsChange={handleSettingsChange}\n        >\n          <DataTable.Manager />\n          <DataTable.Table>\n            <DataTable.Header />\n            <DataTable.Body />\n          </DataTable.Table>\n        </DataTable.Root>\n      </NimbusProvider>\n    );\n\n    const settingsButton = screen.getByRole(\"button\", { name: /settings/i });\n    await user.click(settingsButton);\n\n    // Note: Actual toggle interaction testing would require finding specific buttons\n    // This verifies the callback is wired up\n    expect(handleSettingsChange).toBeDefined();\n  });\n});\n```\n\n### Manager: Custom Settings Tests\n\nTest custom settings tab integration\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { DataTable, NimbusProvider, Box } from \"@commercetools/nimbus\";\nimport type { DataTableColumnItem, DataTableRowItem } from \"./data-table.types\";\n\ndescribe(\"DataTable.Manager - Custom settings\", () => {\n  it(\"displays custom settings tab when provided\", async () => {\n    const user = userEvent.setup();\n    const managerColumns: DataTableColumnItem[] = [\n      {\n        id: \"name\",\n        header: \"Name\",\n        accessor: (row: Record<string, unknown>) => row.name as React.ReactNode,\n      },\n      {\n        id: \"email\",\n        header: \"Email\",\n        accessor: (row: Record<string, unknown>) =>\n          row.email as React.ReactNode,\n      },\n    ];\n    const managerRows: DataTableRowItem[] = [\n      { id: \"1\", name: \"Alice\", email: \"alice@example.com\" },\n    ];\n\n    const customSettings = {\n      label: \"Filters\",\n      panel: <div>Custom Filter Panel</div>,\n    };\n\n    render(\n      <NimbusProvider>\n        <DataTable.Root\n          columns={managerColumns}\n          rows={managerRows}\n          visibleColumns={[\"name\"]}\n          customSettings={customSettings}\n        >\n          <DataTable.Manager />\n          <DataTable.Table>\n            <DataTable.Header />\n            <DataTable.Body />\n          </DataTable.Table>\n        </DataTable.Root>\n      </NimbusProvider>\n    );\n\n    const settingsButton = screen.getByRole(\"button\", { name: /settings/i });\n    await user.click(settingsButton);\n\n    await waitFor(() => {\n      expect(screen.getByText(\"Filters\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"renders custom settings panel content\", async () => {\n    const user = userEvent.setup();\n    const managerColumns: DataTableColumnItem[] = [\n      {\n        id: \"name\",\n        header: \"Name\",\n        accessor: (row: Record<string, unknown>) => row.name as React.ReactNode,\n      },\n      {\n        id: \"email\",\n        header: \"Email\",\n        accessor: (row: Record<string, unknown>) =>\n          row.email as React.ReactNode,\n      },\n    ];\n    const managerRows: DataTableRowItem[] = [\n      { id: \"1\", name: \"Alice\", email: \"alice@example.com\" },\n    ];\n\n    const customSettings = {\n      label: \"Advanced\",\n      panel: <div data-testid=\"custom-panel\">Custom Panel Content</div>,\n    };\n\n    render(\n      <NimbusProvider>\n        <DataTable.Root\n          columns={managerColumns}\n          rows={managerRows}\n          visibleColumns={[\"name\"]}\n          customSettings={customSettings}\n        >\n          <DataTable.Manager />\n          <DataTable.Table>\n            <DataTable.Header />\n            <DataTable.Body />\n          </DataTable.Table>\n        </DataTable.Root>\n      </NimbusProvider>\n    );\n\n    const settingsButton = screen.getByRole(\"button\", { name: /settings/i });\n    await user.click(settingsButton);\n\n    await waitFor(() => {\n      const advancedTab = screen.getByText(\"Advanced\");\n      expect(advancedTab).toBeInTheDocument();\n    });\n\n    // Click the custom tab\n    const advancedTab = screen.getByText(\"Advanced\");\n    await user.click(advancedTab);\n\n    await waitFor(() => {\n      expect(screen.getByTestId(\"custom-panel\")).toBeInTheDocument();\n      expect(screen.getByText(\"Custom Panel Content\")).toBeInTheDocument();\n    });\n  });\n});\n```\n\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-datatable--docs)\n- [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table.html)\n- [ARIA Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)\n\n**Related components**\n\n- **[Table Component](/components/data-display/table)** - Use the simpler Table component for static, read-only data without interactive features\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to use DataTable",
+          "href": "#when-to-use-datatable",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keep it simple",
+          "href": "#keep-it-simple",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Working with columns and rows",
+          "href": "#working-with-columns-and-rows",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Column configuration",
+          "href": "#column-configuration",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Row data structure",
+          "href": "#row-data-structure",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Density options",
+          "href": "#density-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sorting",
+          "href": "#sorting",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled sorting",
+          "href": "#controlled-sorting",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Row selection",
+          "href": "#row-selection",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resizable columns",
+          "href": "#resizable-columns",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sticky header with scrolling",
+          "href": "#sticky-header-with-scrolling",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Text truncation",
+          "href": "#text-truncation",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Clickable rows",
+          "href": "#clickable-rows",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Search and filtering",
+          "href": "#search-and-filtering",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Column visibility",
+          "href": "#column-visibility",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Nested rows",
+          "href": "#nested-rows",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            11
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With footer",
+          "href": "#with-footer",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            12
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled rows",
+          "href": "#disabled-rows",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            13
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Row pinning",
+          "href": "#row-pinning",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            14
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Compound component API",
+          "href": "#compound-component-api",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Available sub-components",
+          "href": "#available-sub-components",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Advanced: DataTable.Manager",
+          "href": "#advanced-datatablemanager",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager overview",
+          "href": "#manager-overview",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Column visibility",
+          "href": "#manager-column-visibility",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Layout settings",
+          "href": "#manager-layout-settings",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Custom settings tab",
+          "href": "#manager-custom-settings-tab",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Controlled column state with persistence",
+          "href": "#manager-controlled-column-state-with-persistence",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Context requirements",
+          "href": "#manager-context-requirements",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Persistent ID",
+          "href": "#persistent-id",
+          "depth": 4,
+          "numbering": [
+            1,
+            8,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            8,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "DataTableColumnItem",
+          "href": "#datatablecolumnitem",
+          "depth": 3,
+          "numbering": [
+            1,
+            9,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "DataTableRowItem",
+          "href": "#datatablerowitem",
+          "depth": 3,
+          "numbering": [
+            1,
+            9,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "SortDescriptor",
+          "href": "#sortdescriptor",
+          "depth": 3,
+          "numbering": [
+            1,
+            9,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sorting Tests",
+          "href": "#sorting-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Selection Tests",
+          "href": "#selection-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Row Interaction Tests",
+          "href": "#row-interaction-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Search and Filtering Tests",
+          "href": "#search-and-filtering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Column Visibility Tests",
+          "href": "#column-visibility-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Density Tests",
+          "href": "#density-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Nested Rows Tests",
+          "href": "#nested-rows-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Empty State Tests",
+          "href": "#empty-state-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility Tests",
+          "href": "#accessibility-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Basic Rendering Tests",
+          "href": "#manager-basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            11
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Column Management Tests",
+          "href": "#manager-column-management-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            12
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Layout Settings Tests",
+          "href": "#manager-layout-settings-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            13
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Manager: Custom Settings Tests",
+          "href": "#manager-custom-settings-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            10,
+            14
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            11
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nThese guidelines provide comprehensive direction for designing and developing\ndata tables within Nimbus.\n\n#### Best practices\n\n- **Display relevant data:** Only include columns and data necessary for the\n  user's current task. Avoid overwhelming users with excessive information.\n- **Allow for customization:** Allow users to organize and display important\n  information in a way that suits their preferences, whether that means viewing\n  more data on a single screen or having a table manager to add or reorder\n  columns. The more customizable the workspace, the more effective users will be\n  in completing their tasks.\n- **Keep column headers concise:** Use clear, brief labels for column headers to\n  ensure quick understanding.\n- **Use sticky column headers:** Keep headers visible when users scroll\n  vertically through a long table. Offer sorting and filtering: Include\n  mechanisms to sort data by any column and filter the dataset to help users\n  find specific information.\n\n#### Usage\n\nData tables are great for displaying large sets of information that can have\ndifferent statuses or data that needs to be compared. Users can click through\nfor more information held in modals or further detail pages.\n\n> [!TIP]\\\n> When to use\n\n- Presenting complex, structured data.\n- Comparing different attributes of multiple items.\n- Allowing users to analyze and manipulate large datasets.\n- Where bulk actions are being made, it can make sense to have users make\n  selections from a data table.\n\n> [!CAUTION]\\\n> When not to use\n\n- **For static, read-only data**: Use the simpler [Table component](/components/data-display/table) instead for static content without interactive features (sorting, filtering, selection). DataTable adds unnecessary complexity for simple displays.\n- Presenting simple lists of items.\n- Displaying content with complex, varying layouts (use card or a grid layout).\n- Presenting an action-focused list where the primary interaction is on the\n  whole item.\n- Within a small space where a user will need to scroll multiple directions in a\n  frustrating way to understand the information presented.\n- To display information that is not meant to be read in the format of a data\n  table like long blocks of text.\n\n> [!TIP]\\\n> **Use Table for simple cases**\n>\n> If you're displaying fewer than 50 rows of static data without needing sorting, filtering, or selection, use the [Table component](/components/data-display/table) instead. It's lighter, simpler, and faster to implement for straightforward data presentation.\n\n#### Tags and tag group in use\n\n> [!TIP]\\\n> **Do**\n>\n> - Do keep the table design simple and focused on data.\n> - Do provide clear visual feedback on the currently sorted column.\n> - Do ensure all interactive elements within the table are accessible (e.g.,\n>   buttons, links).\n> - Do allow users to select one or multiple rows where needed.\n\n```jsx live\nconst App = () => {\n  const data = [\n    { id: 1, name: 'Product A', modified: '2023-10-27', status: \"Published\" },\n    { id: 2, name: 'Product B', modified: '2023-10-26', status: \"Modified\" },\n  ];\n  const columns = [\n    {\n      id: 'name',\n      header: \"Name\",\n      accessor: (row) => row.name,\n      isSortable: true,\n    },\n    {\n      id: 'modified',\n      header: \"Date Modified\",\n      accessor: (row) => row.modified,\n      isSortable: true,\n    },\n    {\n      id: \"status\",\n      header: \"Status\",\n      isSortable: true,\n      accessor: (row) => row.status,\n      render: ({ value }) => {\n        let colorPalette;\n        switch (value) {\n          case \"Published\":\n            colorPalette = \"positive\";\n            break;\n          case \"Modified\":\n            colorPalette = \"warning\";\n            break;\n          default:\n            colorPalette = \"neutral\";\n        }\n\n        return (\n          <Badge colorPalette={colorPalette} size=\"xs\">\n            {value}\n          </Badge>\n        );\n      },\n  },\n  ];\n  return <DataTable\n    rows={data}\n    columns={columns}\n    selectionMode={\"multiple\"}\n  />;\n}\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don’t overcomplicate the layout with too many visual elements or unnecessary\n>   actions.\n> - Don’t force horizontal scrolling on the user unless absolutely necessary for\n>   the data.\n> - Don’t use tables only for layout purposes; they are for data only.\n\n```jsx live\nconst App = () => {\n  const data = [\n  {\n    id: 1,\n    blogTitle: \"How to increase sales with abandoned cart discounts.\",\n    readBlog:\n      \"One highly effective strategy to recover revenue from abandoned shopping carts is the targeted use of cart discounts, which serve as a final, personalized incentive to encourage conversion. By analyzing the items in the abandoned cart and the customer's shopping history, retailers can deploy an automated, time-sensitive email offering a specific discount—such as a percentage off, a fixed dollar amount, or free shipping—designed to overcome the specific price sensitivity or hesitation that caused the abandonment. This direct appeal mitigates the perceived cost or barrier, making the original purchase seem more valuable and urgent, significantly increasing the likelihood that the customer will return to complete their transaction...\",\n  },\n  {\n    id: 2,\n    blogTitle :\"Want to know how Buy One Get One works? \",\n    readBlog:\n      \"Want to know how Buy One Get One works? ', readBlog: 'You know those Buy One, Get One (BOGO) deals? They're super popular because they're basically magic for getting people to shop. The idea is simple: you buy one thing at the regular price and get the second one for free or maybe half-off. It works so well because everyone loves getting something for nothing, which makes us buy more than we planned. That's a win-win: the customer feels like they got a steal, and the store boosts its sales and clears out all that extra stuff that's just sitting on the shelves.\",\n  },\n];\n  const columns = [\n    {\n      id: 'blogTitle',\n      header: \"Blog title\",\n      accessor: (row) => row.blogTitle,\n      render: ({value}) => {\n         return (\n          <Box fontWeight=\"800\">\n            {value}\n          </Box>\n        );\n      },\n      isResizable: true,\n    },\n    {\n      id: 'readBlog',\n      header: \"Read blog\",\n      accessor: (row) => row.readBlog,\n      isResizable: true,\n    },\n  ];\n  return <DataTable\n    rows={data}\n    columns={columns}\n    selectionMode={\"multiple\"}\n  />;\n}\n```\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Tags and tag group in use",
+          "href": "#tags-and-tag-group-in-use",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}