@commercetools/nimbus-mcp 3.0.0 → 3.1.0

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

@@ -189,7 +189,7 @@
       ]
     },
     "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",
+      "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## Drag and drop\n\nDataTable supports row reordering via drag and drop using the shared `useDragAndDrop` hook. Pass `dragAndDropHooks` to `DataTable` to enable it.\n\n### Reorderable rows\n\n```jsx live-dev\nimport { DataTable, useDragAndDrop, createArrayHandlers } from '@commercetools/nimbus';\n\nconst App = () => {\n  const [rows, setRows] = useState([\n    { id: '1', name: 'Alice', role: 'Admin' },\n    { id: '2', name: 'Bob', role: 'User' },\n    { id: '3', name: 'Carol', role: 'Manager' },\n  ]);\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 { dragAndDropHooks } = useDragAndDrop({\n    ...createArrayHandlers(setRows, (row) => row.id),\n  });\n\n  return (\n    <DataTable\n      columns={columns}\n      rows={rows}\n      dragAndDropHooks={dragAndDropHooks}\n    />\n  );\n}\n```\n\nWhen `dragAndDropHooks` is provided:\n- A **drag handle column** with a grip icon is automatically added as the first column\n- Rows can be dragged using mouse or touch from anywhere on the row\n- **Keyboard accessible**: focus the drag handle, press Enter to start drag, use arrow keys to move, Enter to drop, Escape to cancel\n- A **drop indicator** shows where the row will be placed\n- **Double-click text selection** is preserved via programmatic word selection\n- Drag and drop works alongside **row selection** and **clickable rows**\n\n> **Note:** When combining drag and drop with **row pinning**, pinned rows can\n> be reordered among themselves and non-pinned rows among themselves, but items\n> cannot be dragged between pinned and non-pinned groups.\n\n### Namespace isolation\n\nUse `dragNamespace` to prevent drag between unrelated tables:\n\n```tsx\nconst { dragAndDropHooks } = useDragAndDrop({\n  dragNamespace: 'my-table',\n  ...createArrayHandlers(setRows, (row) => row.id),\n});\n```\n\nSee the [`useDragAndDrop` hook documentation](/hooks/use-drag-and-drop) for external drop support, outgoing formats, and helper functions.\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: `Enter` / `Space` to pick up, arrow keys to move,\n  `Enter` / `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",
@@ -440,13 +440,45 @@
           ],
           "parent": "root"
         },
+        {
+          "value": "Drag and drop",
+          "href": "#drag-and-drop",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Reorderable rows",
+          "href": "#reorderable-rows",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Namespace isolation",
+          "href": "#namespace-isolation",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            2
+          ],
+          "parent": "root"
+        },
         {
           "value": "Compound component API",
           "href": "#compound-component-api",
           "depth": 2,
           "numbering": [
             1,
-            5
+            6
           ],
           "parent": "root"
         },
@@ -456,7 +488,7 @@
           "depth": 3,
           "numbering": [
             1,
-            5,
+            6,
             1
           ],
           "parent": "root"
@@ -467,7 +499,7 @@
           "depth": 2,
           "numbering": [
             1,
-            6
+            7
           ],
           "parent": "root"
         },
@@ -477,7 +509,7 @@
           "depth": 3,
           "numbering": [
             1,
-            6,
+            7,
             1
           ],
           "parent": "root"
@@ -488,7 +520,7 @@
           "depth": 3,
           "numbering": [
             1,
-            6,
+            7,
             2
           ],
           "parent": "root"
@@ -499,7 +531,7 @@
           "depth": 3,
           "numbering": [
             1,
-            6,
+            7,
             3
           ],
           "parent": "root"
@@ -510,7 +542,7 @@
           "depth": 3,
           "numbering": [
             1,
-            6,
+            7,
             4
           ],
           "parent": "root"
@@ -521,7 +553,7 @@
           "depth": 3,
           "numbering": [
             1,
-            6,
+            7,
             5
           ],
           "parent": "root"
@@ -532,7 +564,7 @@
           "depth": 3,
           "numbering": [
             1,
-            6,
+            7,
             6
           ],
           "parent": "root"
@@ -543,7 +575,7 @@
           "depth": 2,
           "numbering": [
             1,
-            7
+            8
           ],
           "parent": "root"
         },
@@ -553,7 +585,7 @@
           "depth": 2,
           "numbering": [
             1,
-            8
+            9
           ],
           "parent": "root"
         },
@@ -563,7 +595,7 @@
           "depth": 4,
           "numbering": [
             1,
-            8,
+            9,
             1,
             1
           ],
@@ -575,7 +607,7 @@
           "depth": 4,
           "numbering": [
             1,
-            8,
+            9,
             1,
             2
           ],
@@ -587,7 +619,7 @@
           "depth": 2,
           "numbering": [
             1,
-            9
+            10
           ],
           "parent": "root"
         },
@@ -597,7 +629,7 @@
           "depth": 3,
           "numbering": [
             1,
-            9,
+            10,
             1
           ],
           "parent": "root"
@@ -608,7 +640,7 @@
           "depth": 3,
           "numbering": [
             1,
-            9,
+            10,
             2
           ],
           "parent": "root"
@@ -619,7 +651,7 @@
           "depth": 3,
           "numbering": [
             1,
-            9,
+            10,
             3
           ],
           "parent": "root"
@@ -630,7 +662,7 @@
           "depth": 2,
           "numbering": [
             1,
-            10
+            11
           ],
           "parent": "root"
         },
@@ -640,7 +672,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             1
           ],
           "parent": "root"
@@ -651,7 +683,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             2
           ],
           "parent": "root"
@@ -662,7 +694,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             3
           ],
           "parent": "root"
@@ -673,7 +705,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             4
           ],
           "parent": "root"
@@ -684,7 +716,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             5
           ],
           "parent": "root"
@@ -695,7 +727,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             6
           ],
           "parent": "root"
@@ -706,7 +738,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             7
           ],
           "parent": "root"
@@ -717,7 +749,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             8
           ],
           "parent": "root"
@@ -728,7 +760,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             9
           ],
           "parent": "root"
@@ -739,7 +771,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             10
           ],
           "parent": "root"
@@ -750,7 +782,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             11
           ],
           "parent": "root"
@@ -761,7 +793,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             12
           ],
           "parent": "root"
@@ -772,7 +804,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             13
           ],
           "parent": "root"
@@ -783,7 +815,7 @@
           "depth": 3,
           "numbering": [
             1,
-            10,
+            11,
             14
           ],
           "parent": "root"
@@ -794,7 +826,7 @@
           "depth": 2,
           "numbering": [
             1,
-            11
+            12
           ],
           "parent": "root"
         }