{
  "name": "TableHead",
  "source": "src/components/Table.tsx",
  "propsType": null,
  "import": "import { TableHead } from 'ionbase-ui';",
  "status": "stable",
  "summary": "The <thead> section. Takes no props — it places the header row and gives its cells their head-or-body context.",
  "useWhen": [
    "every Table with column headers, which is every data table"
  ],
  "useInstead": [
    {
      "when": "the rows are data",
      "use": "TableBody"
    }
  ],
  "composition": {
    "order": [
      "Table",
      "TableHead",
      "TableRow",
      "TableCell"
    ],
    "note": "Exists so TableRow and TableCell can tell head from body through context, rather than the caller repeating a prop that has to stay in sync with where the row actually sits.",
    "example": "<TableHead><TableRow><TableCell scope=\"col\">Name</TableCell></TableRow></TableHead>"
  },
  "a11y": {
    "guarantees": [
      "cells inside it default to <th scope=\"col\">, and a row-selection cell becomes the select-all header"
    ],
    "requires": [
      "a header row for every data table — without one, no data cell has a column to be associated with"
    ]
  },
  "antiPatterns": [
    {
      "dont": "a data table with no TableHead",
      "why": "a screen-reader user hears values with no field names"
    },
    {
      "dont": "styling a first TableBody row to look like a header",
      "why": "it looks like a header and announces as data"
    }
  ],
  "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": {},
  "propCounts": {
    "own": 0,
    "aria": 0,
    "dom": 0,
    "other": 0
  }
}