{
  "name": "TableCell",
  "source": "src/components/Table.tsx",
  "propsType": "TableCellProps",
  "description": "One component covers Figma's `Table Cell` + `Cell Text`: the two are never\nused apart in the design (`Table Cell` always wraps exactly one `Cell\nText`), so splitting them into two exported components would only add API\nsurface for a composition nothing ever varies independently.\n\n`header` decides `<th>` vs `<td>` directly rather than a `type` prop that\ncould disagree with where the cell actually sits — a `<th>` rendered inside\n`<tbody>` is still a header cell to the browser and to CSS either way.",
  "import": "import { TableCell } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One cell, covering Figma's Table Cell and Cell Text together. `header` decides <th> versus <td>.",
  "useWhen": [
    "every cell in a Table, header or data"
  ],
  "useInstead": [
    {
      "when": "the content is a status label",
      "use": "Badge",
      "why": "put it inside the cell — the cell is the container, not the label"
    }
  ],
  "variants": {
    "scope": {
      "col": {
        "use": "a column header — inferred inside TableHead"
      },
      "row": {
        "use": "a row header, e.g. the name column — inferred for a `header` cell in TableBody"
      },
      "colgroup": {
        "use": "a header spanning several columns, with colspan"
      },
      "rowgroup": {
        "use": "a header spanning several rows, with rowspan"
      }
    },
    "align": {
      "leading": {
        "use": "the default — text, names, identifiers"
      },
      "trailing": {
        "use": "numbers, currency and dates, so digits line up column-wise"
      },
      "center": {
        "use": "icons, short status marks, checkboxes"
      }
    },
    "variant": {
      "default": {
        "use": "the default — body text and icon colours"
      },
      "link": {
        "use": "recolours the content to `text/link` / `icon/primary` for a cell whose content navigates"
      }
    },
    "sortDirection": {
      "ascending": {
        "use": "the column the rows are sorted by, smallest or earliest first"
      },
      "descending": {
        "use": "the column the rows are sorted by, largest or newest first"
      },
      "none": {
        "use": "a column that can be sorted but is not the current sort — it shows the neutral indicator"
      }
    }
  },
  "slots": {
    "icon": {
      "accepts": "Icon",
      "note": "leading icon; omit its `label`"
    },
    "trailingIcon": {
      "accepts": "Icon",
      "note": "trailing icon; same rule"
    },
    "children": {
      "accepts": "any"
    }
  },
  "a11y": {
    "guarantees": [
      "`scope` is inferred when omitted — `col` in TableHead, `row` in TableBody — and can be set explicitly when the inference is wrong",
      "`header` decides the element directly rather than a `type` prop that could disagree with where the cell sits",
      "a sortable header renders a real <button> inside the <th>, so it is focusable and answers Enter and Space, and the header keeps its column-header role",
      "`aria-sort` is set on the sorted header only, never `none` on the rest",
      "`resize` puts a handle on a header's trailing edge: a focusable `role=\"separator\"` named for the column (\"Resize Agent\"), with the width as `aria-valuenow` and its limits as `aria-valuemin` / `aria-valuemax`",
      "the handle moves by drag, by the arrow keys (16px; 64px with Shift) and by Home and End to the limits, and a double-click puts the column back to its own width; right to left, ArrowLeft widens",
      "a resizable header is named by its label alone, so it does not read the handle's name as well"
    ],
    "requires": [
      "`scope=\"col\"` on header cells — inferred inside TableHead, but explicit for a header rendered outside it"
    ],
    "notes": [
      "`useTableSort` returns `sortDirection` and `onSort` for each column. The table never reorders rows itself: they may be one page of a server's thousands.",
      "`useTableColumns` returns `resize` for each column through `headerProps(key)`. The width set is the column's, padding included, and is its `min-width` too: when the other columns fill the table, the table scrolls sideways rather than squeezing a widened column back."
    ]
  },
  "antiPatterns": [
    {
      "dont": "`variant=\"link\"` on a cell with no link in it",
      "why": "link-coloured text that does nothing is the clearest possible false affordance"
    },
    {
      "dont": "leading-aligning a numeric column",
      "why": "digits stop lining up, so the column can no longer be scanned for magnitude"
    },
    {
      "dont": "`showDivider` on every cell",
      "why": "it is a column rule, not a row rule — on every cell it becomes a grid"
    },
    {
      "dont": "`onSort` on a header without `sortDirection`",
      "why": "the cell stays plain text, so nothing can be clicked; `sortDirection` is what makes it a sort control — pass `none` for an unsorted column"
    },
    {
      "dont": "`trailingIcon` on a sortable header",
      "why": "the sort indicator takes the trailing slot; the icon is not rendered"
    },
    {
      "dont": "`resize` on a body cell",
      "why": "a column has one width and its header holds it; the prop is ignored on a `<td>`"
    }
  ],
  "stylesheet": "src/styles/table.css",
  "tokens": [
    "--border-default",
    "--border-focus",
    "--border-strong",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-regular",
    "--icon-default",
    "--icon-interactive",
    "--icon-secondary",
    "--icon-size-sm",
    "--icon-tertiary",
    "--ion-duration-base",
    "--ion-ease-out",
    "--ion-shadow-shadow-md",
    "--ion-table-head-height",
    "--ion-table-held-width",
    "--ion-table-sticky-left",
    "--radius-full",
    "--radius-md",
    "--radius-xs",
    "--ring-focus",
    "--spacing-16",
    "--spacing-20",
    "--spacing-24",
    "--spacing-6",
    "--spacing-8",
    "--surface-default",
    "--surface-hover",
    "--surface-page",
    "--surface-primary-subtle",
    "--text-default",
    "--text-link",
    "--text-secondary",
    "--type-body-sm",
    "--type-body-sm-line-height"
  ],
  "props": {
    "header": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Renders `<th>` instead of `<td>` — Figma's header cell, `surface/page`\nfill included."
    },
    "scope": {
      "type": "TableCellScope | undefined",
      "required": false,
      "origin": "own",
      "description": "`<th>` scope. Inferred when omitted: `col` in `<thead>`, `row` in\n`<tbody>`. Pass explicitly when the inference is wrong (e.g. a column\nheader rendered outside `<thead>`).",
      "values": [
        "row",
        "rowgroup",
        "col",
        "colgroup"
      ]
    },
    "align": {
      "type": "TableCellAlign | undefined",
      "required": false,
      "origin": "own",
      "values": [
        "center",
        "leading",
        "trailing"
      ]
    },
    "variant": {
      "type": "\"default\" | \"link\" | undefined",
      "required": false,
      "origin": "own",
      "description": "Figma's `Type=Link` — recolours the content to `text/link` /\n`icon/primary` rather than the body defaults.",
      "values": [
        "default",
        "link"
      ]
    },
    "showDivider": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Figma's per-cell `Show Divider` — a column rule, not a row rule."
    },
    "icon": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Figma's `Leading Icon` / `Trailing Icon` slots on `Cell Text`."
    },
    "trailingIcon": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    },
    "sortDirection": {
      "type": "TableSortDirection | undefined",
      "required": false,
      "origin": "own",
      "description": "Makes a header cell a sort control. Set it on every sortable column:\n`ascending` or `descending` on the one the rows are sorted by, `none` on\nthe rest. Header cells only — ignored on a body cell. `useTableSort`\nreturns this and `onSort` for each column.",
      "values": [
        "none",
        "ascending",
        "descending"
      ]
    },
    "onSort": {
      "type": "(() => void) | undefined",
      "required": false,
      "origin": "own",
      "description": "Called when the header is activated. The table does not reorder rows:\nsorting is the caller's, since only it knows whether the data is local\nor paged from a server."
    },
    "resize": {
      "type": "TableCellResize | undefined",
      "required": false,
      "origin": "own",
      "description": "Makes a header cell's column resizable: a handle on its trailing edge,\ndragged or moved with the arrow keys. Header cells only. `useTableColumns`\nreturns this for each column through `headerProps`."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 11,
    "aria": 0,
    "dom": 284,
    "other": 0
  }
}