@commercetools/nimbus-mcp 0.1.0 → 2.10.0

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

@@ -0,0 +1,472 @@
+{
+  "meta": {
+    "id": "Components-Table",
+    "title": "Table",
+    "exportName": "Table",
+    "description": "The Table component provides a straightforward way to display static, read-only data in a tabular format. It uses semantic HTML table elements and is designed for simple data presentation without interactive features like sorting, filtering, or selection.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/table/table.mdx",
+    "menu": [
+      "Components",
+      "Data Display",
+      "Table"
+    ],
+    "route": "components/data-display/table",
+    "tags": [
+      "component",
+      "table",
+      "tabular data",
+      "static",
+      "read-only"
+    ],
+    "toc": [],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n**Related components**\n\n- **[DataTable Component](/components/data-display/data-table)** - Upgrade to DataTable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\nThe DataTable component is built for complex, interactive data management. If you only need to display static content, Table is the simpler, lighter choice.\n",
+  "views": {
+    "overview": {
+      "mdx": "\n**Related components**\n\n- **[DataTable Component](/components/data-display/data-table)** - Upgrade to DataTable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\nThe DataTable component is built for complex, interactive data management. If you only need to display static content, Table is the simpler, lighter choice.\n",
+      "toc": []
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => {\n  const products = [\n    { id: '1', name: 'Laptop Pro', category: 'Electronics', price: '$1,299', stock: 'In Stock' },\n    { id: '2', name: 'Wireless Mouse', category: 'Accessories', price: '$29', stock: 'Low Stock' },\n    { id: '3', name: 'USB-C Cable', category: 'Accessories', price: '$15', stock: 'In Stock' },\n  ];\n\n  return (\n    <Table.Root>\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Product</Table.ColumnHeader>\n          <Table.ColumnHeader>Category</Table.ColumnHeader>\n          <Table.ColumnHeader>Price</Table.ColumnHeader>\n          <Table.ColumnHeader>Status</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {products.map((product) => (\n          <Table.Row key={product.id}>\n            <Table.Cell>{product.name}</Table.Cell>\n            <Table.Cell>{product.category}</Table.Cell>\n            <Table.Cell>{product.price}</Table.Cell>\n            <Table.Cell>{product.stock}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n\n### Accessibility standards\n\n- **Provide a caption or aria-label:** Use `<caption>` or `aria-label` to\n  provide a descriptive name for the table.\n- **Use proper table structure:** Use `<thead>`, `<tbody>`, `<tfoot>`, `<th>`,\n  and `<td>` elements to create semantic table structure.\n- **Scope attributes:** Use `scope=\"col\"` on column headers and `scope=\"row\"` on\n  row headers to establish relationships.\n- **Column and row headers:** Ensure all data cells have associated headers\n  using `<th>` elements or `headers` attribute for complex tables.\n- **Sufficient contrast:** Ensure text meets minimum contrast requirements\n  against backgrounds.\n- **Avoid empty cells:** If a cell must be empty, consider using a placeholder\n  or explanatory text for screen reader users.\n- **Responsive tables:** Ensure tables remain accessible on mobile devices,\n  consider alternative representations for small screens.\n- **Caption placement:** Place `<caption>` as the first child of `<table>`\n  element.\n\n### Resources\n\n- [W3C Tables Tutorial](https://www.w3.org/WAI/tutorials/tables/)\n- [WCAG 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)\n- [W3C ARIA Authoring Practices Guide (APG) - Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/)\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Table, type TableRootProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe Table component is a compound component that renders semantic HTML table markup with accessible structure. Use `Table.Root` as the container with nested parts for headers, body, rows, and cells:\n\n```jsx live-dev\nconst App = () => {\n  const products = [\n    { id: '1', name: 'Laptop Pro', category: 'Electronics', price: '$1,299', stock: 'In Stock' },\n    { id: '2', name: 'Wireless Mouse', category: 'Accessories', price: '$29', stock: 'Low Stock' },\n    { id: '3', name: 'USB-C Cable', category: 'Accessories', price: '$15', stock: 'In Stock' },\n  ];\n\n  return (\n    <Table.Root>\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Product</Table.ColumnHeader>\n          <Table.ColumnHeader>Category</Table.ColumnHeader>\n          <Table.ColumnHeader>Price</Table.ColumnHeader>\n          <Table.ColumnHeader>Status</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {products.map((product) => (\n          <Table.Row key={product.id}>\n            <Table.Cell>{product.name}</Table.Cell>\n            <Table.Cell>{product.category}</Table.Cell>\n            <Table.Cell>{product.price}</Table.Cell>\n            <Table.Cell>{product.stock}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n\n## When to use Table\n\nUse the **Table** component when you need to display **static, read-only data** in a simple tabular format. It's designed for straightforward data presentation without interactive features.\n\n### Ideal use cases\n\n- **Static content displays**: Product specifications, feature comparisons, pricing tiers\n- **Small datasets**: Fewer than 50 rows that don't require pagination\n- **Read-only data**: Information that users only need to view, not interact with\n- **Simple layouts**: Basic tables without complex features like sorting or filtering\n- **Documentation and reference**: Help content, glossaries, or static lists\n\n### When to upgrade to DataTable\n\nConsider upgrading to the [DataTable component](/components/data-display/data-table) when you need:\n\n- **Sorting**: Allow users to sort columns in ascending or descending order\n- **Row selection**: Enable users to select one or multiple rows for bulk actions\n- **Column management**: Let users show/hide, reorder, or resize columns\n- **Search and filtering**: Help users find specific data within large datasets\n- **Pagination**: Handle datasets with more than 50 rows efficiently\n- **Server-side operations**: Support for server-side sorting, filtering, and pagination\n- **Nested data**: Display hierarchical data with expandable rows\n- **Dense data visualization**: Use condensed row spacing for data-heavy interfaces\n\n**Quick decision guide:**\n\n| Feature | Table | DataTable |\n|---------|-------|-----------|\n| Static display | ✓ | ✓ |\n| Sorting | ✗ | ✓ |\n| Selection | ✗ | ✓ |\n| Filtering | ✗ | ✓ |\n| Pagination | ✗ | ✓ |\n| Column resizing | ✗ | ✓ |\n| Best for | < 20 rows | > 20 rows |\n\n## Usage examples\n\n### Size variants\n\nThe `size` prop controls padding and text size. Available sizes are `sm`, `md` (default), and `lg`:\n\n```jsx live-dev\nconst App = () => {\n  const [size, setSize] = useState('md');\n\n  const data = [\n    { name: 'Alice Johnson', role: 'Admin', email: 'alice@example.com' },\n    { name: 'Bob Smith', role: 'User', email: 'bob@example.com' },\n  ];\n\n  return (\n    <Stack gap=\"400\">\n      <Stack direction=\"row\" gap=\"300\">\n        <Button\n          variant={size === 'sm' ? 'solid' : 'outline'}\n          colorPalette=\"primary\"\n          onPress={() => setSize('sm')}\n        >\n          Small\n        </Button>\n        <Button\n          variant={size === 'md' ? 'solid' : 'outline'}\n          colorPalette=\"primary\"\n          onPress={() => setSize('md')}\n        >\n          Medium\n        </Button>\n        <Button\n          variant={size === 'lg' ? 'solid' : 'outline'}\n          colorPalette=\"primary\"\n          onPress={() => setSize('lg')}\n        >\n          Large\n        </Button>\n      </Stack>\n      <Table.Root size={size}>\n        <Table.Header>\n          <Table.Row>\n            <Table.ColumnHeader>Name</Table.ColumnHeader>\n            <Table.ColumnHeader>Role</Table.ColumnHeader>\n            <Table.ColumnHeader>Email</Table.ColumnHeader>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, idx) => (\n            <Table.Row key={idx}>\n              <Table.Cell>{row.name}</Table.Cell>\n              <Table.Cell>{row.role}</Table.Cell>\n              <Table.Cell>{row.email}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table.Root>\n    </Stack>\n  );\n}\n```\n\n### Visual variants\n\nThe `variant` prop controls the table's visual style. Available variants are `line` (default) and `outline`:\n\n```jsx live-dev\nconst App = () => {\n  const [variant, setVariant] = useState('line');\n\n  const orders = [\n    { id: '#1001', customer: 'John Doe', total: '$450.00', status: 'Shipped' },\n    { id: '#1002', customer: 'Jane Smith', total: '$320.00', status: 'Processing' },\n    { id: '#1003', customer: 'Bob Wilson', total: '$180.00', status: 'Delivered' },\n  ];\n\n  return (\n    <Stack gap=\"400\">\n      <Stack direction=\"row\" gap=\"300\">\n        <Button\n          variant={variant === 'line' ? 'solid' : 'outline'}\n          colorPalette=\"primary\"\n          onPress={() => setVariant('line')}\n        >\n          Line\n        </Button>\n        <Button\n          variant={variant === 'outline' ? 'solid' : 'outline'}\n          colorPalette=\"primary\"\n          onPress={() => setVariant('outline')}\n        >\n          Outline\n        </Button>\n      </Stack>\n      <Table.Root variant={variant}>\n        <Table.Header>\n          <Table.Row>\n            <Table.ColumnHeader>Order ID</Table.ColumnHeader>\n            <Table.ColumnHeader>Customer</Table.ColumnHeader>\n            <Table.ColumnHeader>Total</Table.ColumnHeader>\n            <Table.ColumnHeader>Status</Table.ColumnHeader>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {orders.map((order) => (\n            <Table.Row key={order.id}>\n              <Table.Cell>{order.id}</Table.Cell>\n              <Table.Cell>{order.customer}</Table.Cell>\n              <Table.Cell>{order.total}</Table.Cell>\n              <Table.Cell>\n                <Badge\n                  colorPalette={\n                    order.status === 'Delivered' ? 'positive' :\n                    order.status === 'Shipped' ? 'info' : 'warning'\n                  }\n                >\n                  {order.status}\n                </Badge>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table.Root>\n    </Stack>\n  );\n}\n```\n\n### Sticky headers\n\nUse `stickyHeader` to keep the table header visible when scrolling. Combine with `Table.ScrollArea` for scrollable content:\n\n```jsx live-dev\nconst App = () => {\n  const transactions = Array.from({ length: 20 }, (_, i) => ({\n    id: `TXN-${1000 + i}`,\n    date: `2024-01-${String(i + 1).padStart(2, '0')}`,\n    description: `Transaction ${i + 1}`,\n    amount: `$${(Math.random() * 500 + 50).toFixed(2)}`,\n  }));\n\n  return (\n    <Table.ScrollArea maxHeight=\"300px\">\n      <Table.Root stickyHeader>\n        <Table.Header>\n          <Table.Row>\n            <Table.ColumnHeader>Transaction ID</Table.ColumnHeader>\n            <Table.ColumnHeader>Date</Table.ColumnHeader>\n            <Table.ColumnHeader>Description</Table.ColumnHeader>\n            <Table.ColumnHeader textAlign=\"end\">Amount</Table.ColumnHeader>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {transactions.map((txn) => (\n            <Table.Row key={txn.id}>\n              <Table.Cell>{txn.id}</Table.Cell>\n              <Table.Cell>{txn.date}</Table.Cell>\n              <Table.Cell>{txn.description}</Table.Cell>\n              <Table.Cell textAlign=\"end\">{txn.amount}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table.Root>\n    </Table.ScrollArea>\n  );\n}\n```\n\n### Column borders\n\nShow vertical borders between columns with the `showColumnBorder` prop:\n\n```jsx live-dev\nconst App = () => {\n  const metrics = [\n    { metric: 'Revenue', q1: '$125K', q2: '$150K', q3: '$180K', q4: '$200K' },\n    { metric: 'Customers', q1: '450', q2: '520', q3: '610', q4: '720' },\n    { metric: 'Growth Rate', q1: '12%', q2: '15%', q3: '18%', q4: '22%' },\n  ];\n\n  return (\n    <Table.Root variant=\"outline\" showColumnBorder>\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Metric</Table.ColumnHeader>\n          <Table.ColumnHeader textAlign=\"end\">Q1</Table.ColumnHeader>\n          <Table.ColumnHeader textAlign=\"end\">Q2</Table.ColumnHeader>\n          <Table.ColumnHeader textAlign=\"end\">Q3</Table.ColumnHeader>\n          <Table.ColumnHeader textAlign=\"end\">Q4</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {metrics.map((row, idx) => (\n          <Table.Row key={idx}>\n            <Table.Cell fontWeight=\"medium\">{row.metric}</Table.Cell>\n            <Table.Cell textAlign=\"end\">{row.q1}</Table.Cell>\n            <Table.Cell textAlign=\"end\">{row.q2}</Table.Cell>\n            <Table.Cell textAlign=\"end\">{row.q3}</Table.Cell>\n            <Table.Cell textAlign=\"end\">{row.q4}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n\n### Table with caption\n\nUse `Table.Caption` to provide a title or description for the table:\n\n```jsx live-dev\nconst App = () => {\n  const schedule = [\n    { time: '9:00 AM', event: 'Team Checkpoint', location: 'Conference Room A' },\n    { time: '11:00 AM', event: 'Design Review', location: 'Meeting Room 3' },\n    { time: '2:00 PM', event: 'Client Presentation', location: 'Virtual' },\n  ];\n\n  return (\n    <Table.Root variant=\"outline\">\n      <Table.Caption>Today's Schedule - January 8, 2026</Table.Caption>\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Time</Table.ColumnHeader>\n          <Table.ColumnHeader>Event</Table.ColumnHeader>\n          <Table.ColumnHeader>Location</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {schedule.map((item, idx) => (\n          <Table.Row key={idx}>\n            <Table.Cell>{item.time}</Table.Cell>\n            <Table.Cell>{item.event}</Table.Cell>\n            <Table.Cell>{item.location}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n\n### Table with footer\n\nUse `Table.Footer` to display summary information or totals at the bottom of the table:\n\n```jsx live-dev\nconst App = () => {\n  const expenses = [\n    { category: 'Office Supplies', amount: 450.00 },\n    { category: 'Software Licenses', amount: 1200.00 },\n    { category: 'Travel', amount: 850.00 },\n    { category: 'Marketing', amount: 2100.00 },\n  ];\n\n  const total = expenses.reduce((sum, item) => sum + item.amount, 0);\n\n  return (\n    <Table.Root variant=\"outline\">\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Category</Table.ColumnHeader>\n          <Table.ColumnHeader textAlign=\"end\">Amount</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {expenses.map((expense, idx) => (\n          <Table.Row key={idx}>\n            <Table.Cell>{expense.category}</Table.Cell>\n            <Table.Cell textAlign=\"end\">${expense.amount.toFixed(2)}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n      <Table.Footer>\n        <Table.Row>\n          <Table.Cell fontWeight=\"bold\">Total</Table.Cell>\n          <Table.Cell textAlign=\"end\" fontWeight=\"bold\">\n            ${total.toFixed(2)}\n          </Table.Cell>\n        </Table.Row>\n      </Table.Footer>\n    </Table.Root>\n  );\n}\n```\n\n## Component requirements\n\n## Accessibility\n\nThe Table component follows semantic HTML table structure and WCAG 2.1 AA guidelines.\n\n**Role**: The component uses native HTML table elements (`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`) which have implicit ARIA roles.\n\n**Labeling**:\n- Use `Table.ColumnHeader` for header cells (renders `<th>`) to provide column labels\n- Consider adding `aria-label` or `aria-labelledby` to `Table.Root` for complex tables\n- Use `Table.Caption` to provide a descriptive title for the table\n\n**Keyboard Navigation**:\n- Tables are not interactive by default\n- If making rows clickable, ensure they are keyboard accessible\n- For interactive tables, consider adding `tabIndex={0}` to focusable elements\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"product-inventory-table\";\n\nexport const InventoryTable = () => (\n  <Table.Root id={PERSISTENT_ID}>\n    <Table.Header>\n      <Table.Row>\n        <Table.ColumnHeader>Product</Table.ColumnHeader>\n        <Table.ColumnHeader>Stock</Table.ColumnHeader>\n      </Table.Row>\n    </Table.Header>\n    <Table.Body>\n      {/* table rows */}\n    </Table.Body>\n  </Table.Root>\n);\n```\n\n## Compound component API\n\nThe Table component uses a compound component pattern with multiple sub-components that work together. Each part accepts standard HTML table element props plus Chakra style props.\n\n### Available sub-components\n\n| Component | Description |\n|-----------|-------------|\n| `Table.Root` | Main container that provides styling and configuration for the entire table |\n| `Table.Header` | Container for the table header row(s) (renders `<thead>`) |\n| `Table.Body` | Container for the table data rows (renders `<tbody>`) |\n| `Table.Footer` | Container for footer rows with summary or totals (renders `<tfoot>`) |\n| `Table.Row` | Individual table row (renders `<tr>`) |\n| `Table.ColumnHeader` | Header cell for column labels (renders `<th>`) |\n| `Table.Cell` | Data cell for table content (renders `<td>`) |\n| `Table.Caption` | Table caption for providing a title or description (renders `<caption>`) |\n| `Table.ScrollArea` | Wrapper for scrollable tables with sticky header support |\n\n## API reference\n\n<PropsTable id=\"Table\" />\n\n## Common patterns\n\n### Data density\n\nUse size variants to control information density based on use case:\n\n```tsx\n// Dense data tables (dashboards, reports)\n<Table.Root size=\"sm\">\n  {/* Compact spacing for scanning many rows */}\n</Table.Root>\n\n// Standard tables (most use cases)\n<Table.Root size=\"md\">\n  {/* Balanced spacing */}\n</Table.Root>\n\n// Spacious tables (forms, configuration)\n<Table.Root size=\"lg\">\n  {/* More whitespace for interaction */}\n</Table.Root>\n```\n\n### Empty states\n\nHandle empty data gracefully with a message in the table body:\n\n```tsx\n<Table.Root>\n  <Table.Header>\n    <Table.Row>\n      <Table.ColumnHeader>Name</Table.ColumnHeader>\n      <Table.ColumnHeader>Email</Table.ColumnHeader>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    {data.length === 0 ? (\n      <Table.Row>\n        <Table.Cell colSpan={2} textAlign=\"center\" py=\"600\">\n          <Text color=\"fg.muted\">No data available</Text>\n        </Table.Cell>\n      </Table.Row>\n    ) : (\n      data.map((row) => (\n        <Table.Row key={row.id}>\n          <Table.Cell>{row.name}</Table.Cell>\n          <Table.Cell>{row.email}</Table.Cell>\n        </Table.Row>\n      ))\n    )}\n  </Table.Body>\n</Table.Root>\n```\n\n### Loading states\n\nShow loading states while fetching data:\n\n```tsx\nconst [isLoading, setIsLoading] = useState(true);\nconst [data, setData] = useState([]);\n\nreturn (\n  <Table.Root>\n    <Table.Header>\n      <Table.Row>\n        <Table.ColumnHeader>Name</Table.ColumnHeader>\n        <Table.ColumnHeader>Status</Table.ColumnHeader>\n      </Table.Row>\n    </Table.Header>\n    <Table.Body>\n      {isLoading ? (\n        <Table.Row>\n          <Table.Cell colSpan={2} textAlign=\"center\" py=\"600\">\n            <Text>Loading...</Text>\n          </Table.Cell>\n        </Table.Row>\n      ) : (\n        data.map((row) => (\n          <Table.Row key={row.id}>\n            <Table.Cell>{row.name}</Table.Cell>\n            <Table.Cell>{row.status}</Table.Cell>\n          </Table.Row>\n        ))\n      )}\n    </Table.Body>\n  </Table.Root>\n);\n```\n\n### Numeric alignment\n\nAlign numeric columns to the right for better readability:\n\n```tsx\n<Table.Root>\n  <Table.Header>\n    <Table.Row>\n      <Table.ColumnHeader>Product</Table.ColumnHeader>\n      <Table.ColumnHeader textAlign=\"end\">Price</Table.ColumnHeader>\n      <Table.ColumnHeader textAlign=\"end\">Quantity</Table.ColumnHeader>\n      <Table.ColumnHeader textAlign=\"end\">Total</Table.ColumnHeader>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    {items.map((item) => (\n      <Table.Row key={item.id}>\n        <Table.Cell>{item.product}</Table.Cell>\n        <Table.Cell textAlign=\"end\">{item.price}</Table.Cell>\n        <Table.Cell textAlign=\"end\">{item.quantity}</Table.Cell>\n        <Table.Cell textAlign=\"end\">{item.total}</Table.Cell>\n      </Table.Row>\n    ))}\n  </Table.Body>\n</Table.Root>\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Table within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering Tests\n\nVerify the table renders with expected structure and content\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Table, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Table - Basic rendering\", () => {\n  it(\"renders table with headers and data\", () => {\n    const data = [\n      { id: \"1\", name: \"Product A\", price: \"$99.99\" },\n      { id: \"2\", name: \"Product B\", price: \"$149.99\" },\n    ];\n\n    render(\n      <NimbusProvider>\n        <Table.Root>\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeader>Name</Table.ColumnHeader>\n              <Table.ColumnHeader>Price</Table.ColumnHeader>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {data.map((item) => (\n              <Table.Row key={item.id}>\n                <Table.Cell>{item.name}</Table.Cell>\n                <Table.Cell>{item.price}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table.Root>\n      </NimbusProvider>\n    );\n\n    // Verify table exists\n    const table = screen.getByRole(\"table\");\n    expect(table).toBeInTheDocument();\n\n    // Verify headers\n    expect(\n      screen.getByRole(\"columnheader\", { name: \"Name\" })\n    ).toBeInTheDocument();\n    expect(\n      screen.getByRole(\"columnheader\", { name: \"Price\" })\n    ).toBeInTheDocument();\n\n    // Verify data cells\n    expect(screen.getByText(\"Product A\")).toBeInTheDocument();\n    expect(screen.getByText(\"$99.99\")).toBeInTheDocument();\n    expect(screen.getByText(\"Product B\")).toBeInTheDocument();\n    expect(screen.getByText(\"$149.99\")).toBeInTheDocument();\n  });\n\n  it(\"renders table with caption\", () => {\n    render(\n      <NimbusProvider>\n        <Table.Root>\n          <Table.Caption>Product Inventory</Table.Caption>\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeader>Product</Table.ColumnHeader>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            <Table.Row>\n              <Table.Cell>Item 1</Table.Cell>\n            </Table.Row>\n          </Table.Body>\n        </Table.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Product Inventory\")).toBeInTheDocument();\n  });\n\n  it(\"renders table with footer\", () => {\n    render(\n      <NimbusProvider>\n        <Table.Root>\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeader>Item</Table.ColumnHeader>\n              <Table.ColumnHeader>Amount</Table.ColumnHeader>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            <Table.Row>\n              <Table.Cell>Product</Table.Cell>\n              <Table.Cell>$100</Table.Cell>\n            </Table.Row>\n          </Table.Body>\n          <Table.Footer>\n            <Table.Row>\n              <Table.Cell>Total</Table.Cell>\n              <Table.Cell>$100</Table.Cell>\n            </Table.Row>\n          </Table.Footer>\n        </Table.Root>\n      </NimbusProvider>\n    );\n\n    const footer = screen.getByText(\"Total\");\n    expect(footer).toBeInTheDocument();\n  });\n});\n```\n\n### Accessibility Tests\n\nTest table accessibility features\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Table, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Table - Accessibility\", () => {\n  it(\"has proper table structure with semantic elements\", () => {\n    render(\n      <NimbusProvider>\n        <Table.Root>\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeader>Name</Table.ColumnHeader>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            <Table.Row>\n              <Table.Cell>Alice</Table.Cell>\n            </Table.Row>\n          </Table.Body>\n        </Table.Root>\n      </NimbusProvider>\n    );\n\n    const table = screen.getByRole(\"table\");\n    expect(table).toBeInTheDocument();\n\n    // Check for header cells\n    const columnHeader = screen.getByRole(\"columnheader\", { name: \"Name\" });\n    expect(columnHeader).toBeInTheDocument();\n\n    // Check for data cells\n    const cells = screen.getAllByRole(\"cell\");\n    expect(cells).toHaveLength(1);\n    expect(cells[0]).toHaveTextContent(\"Alice\");\n  });\n\n  it(\"supports aria-label for table identification\", () => {\n    render(\n      <NimbusProvider>\n        <Table.Root aria-label=\"User directory\">\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeader>Name</Table.ColumnHeader>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            <Table.Row>\n              <Table.Cell>Alice</Table.Cell>\n            </Table.Row>\n          </Table.Body>\n        </Table.Root>\n      </NimbusProvider>\n    );\n\n    const table = screen.getByRole(\"table\", { name: \"User directory\" });\n    expect(table).toBeInTheDocument();\n  });\n\n  it(\"uses caption for table description\", () => {\n    render(\n      <NimbusProvider>\n        <Table.Root>\n          <Table.Caption>Employee Information</Table.Caption>\n          <Table.Header>\n            <Table.Row>\n              <Table.ColumnHeader>Name</Table.ColumnHeader>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            <Table.Row>\n              <Table.Cell>Bob</Table.Cell>\n            </Table.Row>\n          </Table.Body>\n        </Table.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Employee Information\")).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Chakra UI - Table Documentation](https://chakra-ui.com/docs/components/table)\n- [MDN - HTML Table Element](https://developer.mozilla.org/en-docs/Web/HTML/Element/table)\n- [WCAG - Table Accessibility](https://www.w3.org/WAI/tutorials/tables/)\n\n**Related components**\n\n- **[DataTable Component](/components/data-display/data-table)** - Upgrade to DataTable when you need sorting, filtering, selection, pagination, or other interactive features for complex data management\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to use Table",
+          "href": "#when-to-use-table",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Ideal use cases",
+          "href": "#ideal-use-cases",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to upgrade to DataTable",
+          "href": "#when-to-upgrade-to-datatable",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size variants",
+          "href": "#size-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual variants",
+          "href": "#visual-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sticky headers",
+          "href": "#sticky-headers",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Column borders",
+          "href": "#column-borders",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Table with caption",
+          "href": "#table-with-caption",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Table with footer",
+          "href": "#table-with-footer",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Compound component API",
+          "href": "#compound-component-api",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Available sub-components",
+          "href": "#available-sub-components",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Data density",
+          "href": "#data-density",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Empty states",
+          "href": "#empty-states",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Loading states",
+          "href": "#loading-states",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Numeric alignment",
+          "href": "#numeric-alignment",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            9,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility Tests",
+          "href": "#accessibility-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            9,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            10
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n# Table Guidelines\n\nThe Table component provides a simple, semantic HTML table structure for displaying static, read-only data. It's designed for straightforward data presentation without interactive features like sorting, filtering, or selection.\n\n## When to use Table\n\nUse the **Table** component when you need to display **static, read-only data** in a simple tabular format. It's designed for straightforward data presentation without interactive features.\n\n> [!TIP]\\\n> **Ideal use cases**\n\n- **Static content displays**: Product specifications, feature comparisons, pricing tiers\n- **Small datasets**: Fewer than 50 rows that don't require pagination\n- **Read-only data**: Information that users only need to view, not interact with\n- **Simple layouts**: Basic tables without complex features like sorting or filtering\n- **Documentation and reference**: Help content, glossaries, or static lists\n\n## When to upgrade to DataTable\n\nConsider upgrading to the [DataTable component](/components/data-display/data-table) when you need any of these features:\n\n> [!CAUTION]\\\n> **Upgrade to DataTable if you need:**\n\n- **Sorting**: Allow users to sort columns in ascending or descending order\n- **Row selection**: Enable users to select one or multiple rows for bulk actions\n- **Column management**: Let users show/hide, reorder, or resize columns\n- **Search and filtering**: Help users find specific data within large datasets\n- **Pagination**: Handle datasets with more than 50 rows efficiently\n- **Server-side operations**: Support for server-side sorting, filtering, and pagination\n- **Nested data**: Display hierarchical data with expandable rows\n- **Dense data visualization**: Use condensed row spacing for data-heavy interfaces\n\n## Quick decision guide\n\n| Feature | Table | DataTable |\n|---------|-------|-----------|\n| Static display | ✓ | ✓ |\n| Sorting | ✗ | ✓ |\n| Selection | ✗ | ✓ |\n| Filtering | ✗ | ✓ |\n| Pagination | ✗ | ✓ |\n| Column resizing | ✗ | ✓ |\n| Best for | < 50 rows | > 50 rows |\n\n## Best practices\n\n> [!TIP]\\\n> **Do**\n\n- Use Table for static, read-only content that doesn't require user interaction\n- Keep tables simple with clear column headers and well-organized rows\n- Use consistent alignment (left-align text, right-align numbers)\n- Provide a caption or accessible label for screen readers\n- Consider responsive design for mobile viewports\n\n```jsx live\nconst App = () => {\n  const specs = [\n    { feature: 'Weight', value: '1.4 kg' },\n    { feature: 'Display', value: '13.3-inch Retina' },\n    { feature: 'Battery', value: 'Up to 17 hours' },\n    { feature: 'Storage', value: '256GB SSD' },\n  ];\n\n  return (\n    <Table.Root variant=\"outline\">\n      <Table.Caption>MacBook Air Specifications</Table.Caption>\n      <Table.Body>\n        {specs.map((spec, idx) => (\n          <Table.Row key={idx}>\n            <Table.Cell fontWeight=\"medium\">{spec.feature}</Table.Cell>\n            <Table.Cell>{spec.value}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n\n> [!CAUTION]\\\n> **Don't**\n\n- Don't use Table for interactive data that requires sorting, filtering, or selection\n- Don't use Table for large datasets (> 50 rows) that need pagination\n- Don't force horizontal scrolling unless absolutely necessary\n- Don't use tables only for layout purposes; they are for data only\n\n```jsx live\nconst App = () => {\n  // ✗ Avoid - This dataset is too large and needs sorting/filtering\n  const products = Array.from({ length: 100 }, (_, i) => ({\n    id: i + 1,\n    name: `Product ${i + 1}`,\n    price: `$${(Math.random() * 100).toFixed(2)}`,\n    status: i % 2 === 0 ? 'In Stock' : 'Out of Stock',\n  }));\n\n  return (\n    <Table.Root>\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Product</Table.ColumnHeader>\n          <Table.ColumnHeader>Price</Table.ColumnHeader>\n          <Table.ColumnHeader>Status</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {products.map((product) => (\n          <Table.Row key={product.id}>\n            <Table.Cell>{product.name}</Table.Cell>\n            <Table.Cell>{product.price}</Table.Cell>\n            <Table.Cell>{product.status}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n\n**Why this doesn't work:** This example shows 100 rows without pagination, sorting, or filtering—making it difficult for users to find information. Use [DataTable](/components/data-display/data-table) instead for datasets of this size.\n\n## Usage patterns\n\n### Product specifications\n\nPerfect for displaying static product details or feature comparisons:\n\n```jsx live\nconst App = () => {\n  const specs = [\n    { spec: 'Processor', basic: 'M1 Chip', pro: 'M1 Pro Chip', max: 'M1 Max Chip' },\n    { spec: 'RAM', basic: '8GB', pro: '16GB', max: '32GB' },\n    { spec: 'Storage', basic: '256GB', pro: '512GB', max: '1TB' },\n  ];\n\n  return (\n    <Table.Root variant=\"outline\" showColumnBorder>\n      <Table.Caption>MacBook Model Comparison</Table.Caption>\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Specification</Table.ColumnHeader>\n          <Table.ColumnHeader>Basic</Table.ColumnHeader>\n          <Table.ColumnHeader>Pro</Table.ColumnHeader>\n          <Table.ColumnHeader>Max</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {specs.map((spec, idx) => (\n          <Table.Row key={idx}>\n            <Table.Cell fontWeight=\"medium\">{spec.spec}</Table.Cell>\n            <Table.Cell>{spec.basic}</Table.Cell>\n            <Table.Cell>{spec.pro}</Table.Cell>\n            <Table.Cell>{spec.max}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n\n### Pricing tiers\n\nIdeal for displaying pricing information and plan comparisons:\n\n```jsx live\nconst App = () => {\n  const pricing = [\n    { feature: 'Users', starter: '5', business: '25', enterprise: 'Unlimited' },\n    { feature: 'Storage', starter: '10GB', business: '100GB', enterprise: '1TB' },\n    { feature: 'Support', starter: 'Email', business: 'Priority', enterprise: '24/7' },\n  ];\n\n  return (\n    <Table.Root>\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Feature</Table.ColumnHeader>\n          <Table.ColumnHeader>Starter</Table.ColumnHeader>\n          <Table.ColumnHeader>Business</Table.ColumnHeader>\n          <Table.ColumnHeader>Enterprise</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {pricing.map((item, idx) => (\n          <Table.Row key={idx}>\n            <Table.Cell fontWeight=\"medium\">{item.feature}</Table.Cell>\n            <Table.Cell>{item.starter}</Table.Cell>\n            <Table.Cell>{item.business}</Table.Cell>\n            <Table.Cell>{item.enterprise}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n\n### Reference data\n\nGreat for glossaries, definitions, or other reference content:\n\n```jsx live\nconst App = () => {\n  const terms = [\n    { term: 'API', definition: 'Application Programming Interface' },\n    { term: 'SDK', definition: 'Software Development Kit' },\n    { term: 'CLI', definition: 'Command Line Interface' },\n    { term: 'REST', definition: 'Representational State Transfer' },\n  ];\n\n  return (\n    <Table.Root variant=\"line\">\n      <Table.Caption>Common Development Terms</Table.Caption>\n      <Table.Header>\n        <Table.Row>\n          <Table.ColumnHeader>Term</Table.ColumnHeader>\n          <Table.ColumnHeader>Definition</Table.ColumnHeader>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {terms.map((item, idx) => (\n          <Table.Row key={idx}>\n            <Table.Cell fontWeight=\"medium\">{item.term}</Table.Cell>\n            <Table.Cell>{item.definition}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n```\n",
+      "toc": [
+        {
+          "value": "When to use Table",
+          "href": "#when-to-use-table",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to upgrade to DataTable",
+          "href": "#when-to-upgrade-to-datatable",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Quick decision guide",
+          "href": "#quick-decision-guide",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage patterns",
+          "href": "#usage-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Product specifications",
+          "href": "#product-specifications",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Pricing tiers",
+          "href": "#pricing-tiers",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Reference data",
+          "href": "#reference-data",
+          "depth": 3,
+          "numbering": [
+            1,
+            5,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}