Lily Design System™

Table TH

TableTH is a headless component that renders a <th scope="col"> element — a column header cell — intended to live inside a TableRow within TableHead.

Use this component to label the columns of a table.

Example

Column heading
Show demo markup 
<th class="table-th">Column heading</th>
Usage example 
<Table label="Users">
  <TableHead>
    <TableRow>
      <TableTH>Name</TableTH>
      <TableTH>Email</TableTH>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableTD>Alice</TableTD>
      <TableTD>alice@example.com</TableTD>
    </TableRow>
  </TableBody>
</Table>
Show Svelte source 
// In your Svelte component:
import TableTH from "lily-design-system-svelte-headless/components/TableTH/TableTH.svelte";

<TableTH>
  <!-- TableTH content -->
</TableTH>

Usage

<Table label="Users">
  <TableHead>
    <TableRow>
      <TableTH>Name</TableTH>
      <TableTH>Email</TableTH>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableTD>Alice</TableTD>
      <TableTD>alice@example.com</TableTD>
    </TableRow>
  </TableBody>
</Table>

Props

  • className: string (default: "") -- CSS class appended to the base table-th class
  • colspan: number (optional) -- number of columns this header cell spans
  • rowspan: number (optional) -- number of rows this header cell spans
  • scope: "col" | "row" | "colgroup" | "rowgroup" (default: "col") -- header scope
  • children: optional -- header cell content
  • ...restProps: unknown -- additional attributes spread onto the <th> element

Keyboard Interactions

None. Header cells are not interactive.

ARIA

scope="col" associates the header with its column for assistive technologies. Use scope="colgroup" together with colspan for grouped column headers.

When to Use

  • For column header cells in the header row of a table
  • For grouped header cells via colspan / rowspan

When Not to Use

  • Do not use for data cells -- use TableTD for <td> elements
  • Do not use for column-wide styling hooks via <colgroup> / <col> -- write those directly inside Table
  • Do not use outside of a Table -- use DataTableTD for DataTable, CalendarTableTD for CalendarTable, etc.

Headless

This headless component renders a <th> element. The consumer provides all visual styling.

Styles

The consumer provides all CSS styling. The component renders with a .table-th class for targeting.

Testing

  • Verify the component renders a <th> element
  • Verify scope="col" is the default
  • Verify colspan / rowspan are applied when set
  • Verify pass-through attributes are applied

Composition

TableTH is a child of TableRow within TableHead, following the Table pattern: Table > TableHead/TableBody/TableFoot > TableRow > TableTH/TableTD.

Related components

  • table — a table with rows and columns <table>
  • table-body — a table interactive grid tbody <tbody>
  • table-foot — a table interactive grid tfoot <tfoot>
  • table-head — a table interactive grid thead <thead>
  • table-row — a table interactive grid row <tr>
  • table-td — a table interactive grid data cell <td>

References

  • MDN th element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

Implementation Notes

  • Renders a <th> element with scope="col" by default
  • Accepts className for CSS class targeting
  • Accepts optional colspan / rowspan for grouped header cells
  • Accepts an alternative scope (e.g. "colgroup" for grouped headers)
  • Renders header text via children
  • Spreads restProps onto the <th> element

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: table-th
  • PascalCase: TableTH
  • Description: a table interactive grid header cell <th>
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <th>
  • CSS class: .table-th
  • Interactive: no

ARIA

  • scope="col" associates the header with its column for assistive technologies

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • colspan: number (optional) -- number of columns this header cell spans
  • rowspan: number (optional) -- number of rows this header cell spans
  • scope: "col" | "row" | "colgroup" | "rowgroup" (default: "col") -- header scope
  • children: optional -- header cell content
  • ...restProps: unknown -- additional attributes spread onto the <th> element