Table

‮Native table with an optional interactive adapter.‬

‮Browsers‬: Chrome 123+Firefox 121+Safari 17.5+
‮Tier‬: 0
‮Bundle compressed‬: 617 B
‮Forced layout budget‬: 0 ms
‮Axe budget‬: 0
‮SSR compatible‬: ‮Yes‬
‮Published contract‬: ‮Test harness‬

‮Playground‬

Table

Native table example

Team members
Name	Role	Status
Alice Chen	Admin	Active
Bob Smith	Editor	Active
Carol Lee	Viewer	Invited
3 members · 2 active

Sort, filter and expand

Select all rows		Role
Select row	Alice Chen	Admin
alice@example.com · Active
Select row	Bob Smith	Editor
bob@example.com · Active
Select row	Carol Lee	Viewer
carol@example.com · Invited
3 members · 0 selected

Sticky headers, footer and columns

Member	Role	Email	Status
Member 1	Editor	member1@example.com	Active
Member 2	Editor	member2@example.com	Active
Member 3	Editor	member3@example.com	Active
Member 4	Editor	member4@example.com	Active
Member 5	Editor	member5@example.com	Active
Member 6	Editor	member6@example.com	Active
Member 7	Editor	member7@example.com	Active
Member 8	Editor	member8@example.com	Active
Member 9	Editor	member9@example.com	Active
Member 10	Editor	member10@example.com	Active
Member 11	Editor	member11@example.com	Active
Member 12	Editor	member12@example.com	Active
Member 13	Editor	member13@example.com	Active
Member 14	Editor	member14@example.com	Active
Member 15	Editor	member15@example.com	Active
Member 16	Editor	member16@example.com	Active
Member 17	Editor	member17@example.com	Active
Member 18	Editor	member18@example.com	Active
Member 19	Editor	member19@example.com	Active
Member 20	Editor	member20@example.com	Active
Member 21	Editor	member21@example.com	Active
Member 22	Editor	member22@example.com	Active
Member 23	Editor	member23@example.com	Active
Member 24	Editor	member24@example.com	Active
24 members

React

CSS

Tailwind

import { Table } from "@gunkin/uiify";
const rows = [
  { id: "alice", name: "Alice Chen", role: "Admin", status: "Active" },
  { id: "bob", name: "Bob Smith", role: "Editor", status: "Active" },
  { id: "carol", name: "Carol Lee", role: "Viewer", status: "Invited" },
];
export default function Example() {
  return (
    <Table.Root className="" variant="outline" size="sm">
      <Table.Caption>Team members</Table.Caption>
      <Table.Header>
        <Table.Row id="team-head">
          <Table.ColumnHeader id="team-name">Name</Table.ColumnHeader>
          <Table.ColumnHeader id="team-role">Role</Table.ColumnHeader>
          <Table.ColumnHeader id="team-status">Status</Table.ColumnHeader>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {rows.map((row) => (
          <Table.Row id={row.id} key={row.id}>
            <Table.RowHeader>{row.name}</Table.RowHeader>
            <Table.Cell>{row.role}</Table.Cell>
            <Table.Cell>{row.status}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row id="team-total">
          <Table.Cell colSpan={3}>3 members · 2 active</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  );
}

@layer components {
  [data-uiify-table] {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    color: var(--card-foreground);
    font-size: var(--text-sm);
  }
  [data-uiify-table][data-layout="fixed"] {
    table-layout: fixed;
  }
  [data-uiify-table] :is(th, td) {
    padding-block: 0.75rem;
    padding-inline: 1rem;
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--border);
    background: inherit;
  }
  [data-uiify-table] :is(th, td)[data-align="center"] {
    text-align: center;
  }
  [data-uiify-table] :is(th, td)[data-align="end"] {
    text-align: end;
  }
  [data-uiify-table] :is(thead, tfoot) {
    background: var(--secondary);
    font-weight: 600;
  }
  [data-uiify-table] tbody tr {
    background: var(--card);
  }
  [data-uiify-table] tbody tr:hover {
    background: var(--secondary);
  }
  [data-uiify-table] tbody tr[data-selected] {
    background: var(--accent);
  }
  [data-uiify-table] caption {
    padding-block: 0.75rem;
    text-align: start;
    color: var(--muted-foreground);
  }
  [data-uiify-table][data-size="sm"] :is(th, td) {
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
  }
  [data-uiify-table][data-size="lg"] :is(th, td) {
    padding-block: 1rem;
    padding-inline: 1.25rem;
  }
  [data-uiify-table][data-variant="outline"] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  [data-uiify-table][data-variant="ghost"] {
    background: transparent;
  }
  [data-uiify-table] :is(thead, tfoot, tr)[data-sticky] {
    position: sticky;
    inset-block-start: var(--uiify-table-sticky-offset, 0);
    z-index: 2;
  }
  [data-uiify-table] tfoot[data-sticky] {
    inset-block: auto var(--uiify-table-sticky-offset, 0);
  }
  [data-uiify-table] :is(th, td)[data-sticky] {
    position: sticky;
    z-index: 1;
  }
  [data-uiify-table] :is(th, td)[data-sticky="start"] {
    inset-inline-start: var(--uiify-table-sticky-offset, 0);
  }
  [data-uiify-table] :is(th, td)[data-sticky="end"] {
    inset-inline-end: var(--uiify-table-sticky-offset, 0);
  }
  [data-uiify-table] :is(thead, tfoot)[data-sticky] :is(th, td)[data-sticky] {
    z-index: 3;
  }
  [data-uiify-table] th > button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  [data-uiify-table] th[aria-sort="ascending"] > button::after {
    content: "↑" / "";
  }
  [data-uiify-table] th[aria-sort="descending"] > button::after {
    content: "↓" / "";
  }
  [data-uiify-table] [data-part="expanded-row"] {
    background: var(--secondary);
  }
  [data-uiify-table] :is(button, tr):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }
}

import { Table } from "@gunkin/uiify";
const rows = [
  { id: "alice", name: "Alice Chen", role: "Admin", status: "Active" },
  { id: "bob", name: "Bob Smith", role: "Editor", status: "Active" },
  { id: "carol", name: "Carol Lee", role: "Viewer", status: "Invited" },
];
export default function Example() {
  return (
    <Table.Root
      className={
        "[inline-size:100%] [border-collapse:separate] [border-spacing:0] bg-card text-card-foreground text-sm data-" +
        "[layout=fixed]:table-fixed [&_:is(th,td)]:[padding-block:0.75rem] [&_:is(th,td)]:[padding-inline:1rem] [&_:" +
        "is(th,td)]:text-start [&_:is(th,td)]:[vertical-align:middle] [&_:is(th,td)]:[border-block-end-width:1px] [&" +
        "_:is(th,td)]:[border-block-end-style:solid] [&_:is(th,td)]:[border-block-end-color:var(--border)] [&_:is(th" +
        ",td)]:[background:inherit] [&_:is(th,td)[data-align=center]]:text-center [&_:is(th,td)[data-align=end]]:tex" +
        "t-end [&_:is(thead,tfoot)]:bg-secondary [&_:is(thead,tfoot)]:[font-weight:600] [&_tbody_tr]:bg-card [&_tbod" +
        "y_tr:hover]:bg-secondary [&_tbody_tr[data-selected]]:bg-accent [&_caption]:[padding-block:0.75rem] [&_capti" +
        "on]:text-start [&_caption]:text-muted-foreground [&[data-size=sm]_:is(th,td)]:[padding-block:0.5rem] [&[dat" +
        "a-size=sm]_:is(th,td)]:[padding-inline:0.75rem] [&[data-size=lg]_:is(th,td)]:[padding-block:1rem] [&[data-s" +
        "ize=lg]_:is(th,td)]:[padding-inline:1.25rem] data-[variant=outline]:[border-width:1px] data-[variant=outlin" +
        "e]:border-solid data-[variant=outline]:border-border data-[variant=outline]:rounded-lg data-[variant=ghost]" +
        ":bg-transparent [&_:is(thead,tfoot,tr)[data-sticky]]:sticky [&_:is(thead,tfoot,tr)[data-sticky]]:[inset-blo" +
        "ck-start:var(--uiify-table-sticky-offset,_0)] [&_:is(thead,tfoot,tr)[data-sticky]]:z-[2] [&_tfoot[data-stic" +
        "ky]]:[inset-block:auto_var(--uiify-table-sticky-offset,_0)] [&_:is(th,td)[data-sticky]]:sticky [&_:is(th,td" +
        ")[data-sticky]]:z-[1] [&_:is(th,td)[data-sticky=start]]:[inset-inline-start:var(--uiify-table-sticky-offset" +
        ",_0)] [&_:is(th,td)[data-sticky=end]]:[inset-inline-end:var(--uiify-table-sticky-offset,_0)] [&_:is(thead,t" +
        "foot)[data-sticky]_:is(th,td)[data-sticky]]:z-[3] [&_th>button]:inline-flex [&_th>button]:items-center [&_t" +
        "h>button]:[gap:0.5rem] [&_th>button]:p-0 [&_th>button]:border-0 [&_th>button]:border-current [&_th>button]:" +
        "border-none [&_th>button]:bg-transparent [&_th>button]:text-inherit [&_th>button]:[font-style:inherit] [&_t" +
        "h>button]:[font-variant:inherit] [&_th>button]:[font-weight:inherit] [&_th>button]:[font-stretch:inherit] [" +
        "&_th>button]:text-[length:inherit] [&_th>button]:leading-[inherit] [&_th>button]:font-[family-name:inherit]" +
        " [&_th>button]:cursor-pointer [&_th[aria-sort=ascending]>button::after]:content-[\"↑\"_/_\"\"] [&_th[aria-sort=" +
        "descending]>button::after]:content-[\"↓\"_/_\"\"] [&_[data-part=expanded-row]]:bg-secondary [&_:is(button,tr):f" +
        "ocus-visible]:[outline:2px_solid_var(--ring)] [&_:is(button,tr):focus-visible]:[outline-offset:-2px]"
      }
      variant="outline"
      size="sm"
    >
      <Table.Caption>Team members</Table.Caption>
      <Table.Header>
        <Table.Row id="team-head">
          <Table.ColumnHeader id="team-name">Name</Table.ColumnHeader>
          <Table.ColumnHeader id="team-role">Role</Table.ColumnHeader>
          <Table.ColumnHeader id="team-status">Status</Table.ColumnHeader>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {rows.map((row) => (
          <Table.Row id={row.id} key={row.id}>
            <Table.RowHeader>{row.name}</Table.RowHeader>
            <Table.Cell>{row.role}</Table.Cell>
            <Table.Cell>{row.status}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row id="team-total">
          <Table.Cell colSpan={3}>3 members · 2 active</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[inline-size:100%] [border-collapse:separate] [border-spacing:0] bg-card text-card-foreground text-sm data-[layout=fixed]:table-fixed [&_:is(th,td)]:[padding-block:0.75rem] [&_:is(th,td)]:[padding-inline:1rem] [&_:is(th,td)]:text-start [&_:is(th,td)]:[vertical-align:middle] [&_:is(th,td)]:[border-block-end-width:1px] [&_:is(th,td)]:[border-block-end-style:solid] [&_:is(th,td)]:[border-block-end-color:var(--border)] [&_:is(th,td)]:[background:inherit] [&_:is(th,td)[data-align=center]]:text-center [&_:is(th,td)[data-align=end]]:text-end [&_:is(thead,tfoot)]:bg-secondary [&_:is(thead,tfoot)]:[font-weight:600] [&_tbody_tr]:bg-card [&_tbody_tr:hover]:bg-secondary [&_tbody_tr[data-selected]]:bg-accent [&_caption]:[padding-block:0.75rem] [&_caption]:text-start [&_caption]:text-muted-foreground [&[data-size=sm]_:is(th,td)]:[padding-block:0.5rem] [&[data-size=sm]_:is(th,td)]:[padding-inline:0.75rem] [&[data-size=lg]_:is(th,td)]:[padding-block:1rem] [&[data-size=lg]_:is(th,td)]:[padding-inline:1.25rem] data-[variant=outline]:[border-width:1px] data-[variant=outline]:border-solid data-[variant=outline]:border-border data-[variant=outline]:rounded-lg data-[variant=ghost]:bg-transparent [&_:is(thead,tfoot,tr)[data-sticky]]:sticky [&_:is(thead,tfoot,tr)[data-sticky]]:[inset-block-start:var(--uiify-table-sticky-offset,_0)] [&_:is(thead,tfoot,tr)[data-sticky]]:z-[2] [&_tfoot[data-sticky]]:[inset-block:auto_var(--uiify-table-sticky-offset,_0)] [&_:is(th,td)[data-sticky]]:sticky [&_:is(th,td)[data-sticky]]:z-[1] [&_:is(th,td)[data-sticky=start]]:[inset-inline-start:var(--uiify-table-sticky-offset,_0)] [&_:is(th,td)[data-sticky=end]]:[inset-inline-end:var(--uiify-table-sticky-offset,_0)] [&_:is(thead,tfoot)[data-sticky]_:is(th,td)[data-sticky]]:z-[3] [&_th>button]:inline-flex [&_th>button]:items-center [&_th>button]:[gap:0.5rem] [&_th>button]:p-0 [&_th>button]:border-0 [&_th>button]:border-current [&_th>button]:border-none [&_th>button]:bg-transparent [&_th>button]:text-inherit [&_th>button]:[font-style:inherit] [&_th>button]:[font-variant:inherit] [&_th>button]:[font-weight:inherit] [&_th>button]:[font-stretch:inherit] [&_th>button]:text-[length:inherit] [&_th>button]:leading-[inherit] [&_th>button]:font-[family-name:inherit] [&_th>button]:cursor-pointer [&_th[aria-sort=ascending]>button::after]:content-["↑"_/_""] [&_th[aria-sort=descending]>button::after]:content-["↓"_/_""] [&_[data-part=expanded-row]]:bg-secondary [&_:is(button,tr):focus-visible]:[outline:2px_solid_var(--ring)] [&_:is(button,tr):focus-visible]:[outline-offset:-2px]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

‮API‬

`Table.Root (native)`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`layout`	`"auto" \| "fixed"`	`"auto"`	‮Native table layout. Selection, sorting and expansion use the explicit TableClient entry.‬
`size`	`"sm" \| "md" \| "lg"`	—	‮Cell spacing from the selected stylesheet.‬
`variant`	`"solid" \| "outline" \| "ghost"`	—	‮Surface variant from the selected stylesheet.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.Footer`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`sticky`	`boolean`	—	‮Pins the footer to the block end of the scroll container.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.RowHeader / Table.Cell / Table.ColumnHeader`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`align`	`"start" \| "center" \| "end"`	`"start"`	‮Logical text alignment for this cell.‬
`sticky`	`"start" \| "end"`	—	‮Pins a cell to the logical inline edge. For adjacent sticky cells set `--uiify-table-sticky-offset` on each cell.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`TableClient.ExpandTrigger / TableClient.ExpandedRow`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`rowId`*	`string`	—	‮Shared row key connecting the expansion button to its native `<tr>`. Put a `<td colSpan={columnCount}>` inside the expanded row.‬

`TableClient.Root — @gunkin/uiify/components/table/client`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`aria-label`	`string`	—	‮Accessible name for the table when no visible caption or heading names it.‬
`aria-labelledby`	`string`	—	‮Id of the element that labels the table.‬
`selectionMode`	`"none" \| "single" \| "multiple"`	`"none"`	‮Whether rows can be selected, and how many at a time; "none" renders a plain static table with no grid role.‬
`selectionBehavior`	`"toggle" \| "replace"`	—	‮Whether clicking a row adds it to the selection or replaces the current selection.‬
`defaultSelectedKeys`	`Iterable<string>`	—	‮Row ids selected initially, leaving the selection uncontrolled inside the component.‬
`selectedKeys`	`Iterable<string>`	—	‮Row ids selected right now, making the selection controlled by the caller.‬
`onSelectionChange`	`(selectedKeys: Set<string>) => void`	—	‮Called with the new set of selected row ids whenever the selection changes.‬
`defaultSortDescriptor`	`SortDescriptor \| null`	—	‮Column and direction sorted initially, leaving the sort state uncontrolled inside the component.‬
`sortDescriptor`	`SortDescriptor \| null`	—	‮Column and direction sorted right now, making the sort controlled.‬
`onSortChange`	`(descriptor: SortDescriptor \| null) => void`	—	‮Called with the new sort descriptor, or null, when a sortable column header is activated.‬
`expandedKeys / defaultExpandedKeys`	`Iterable<string>`	—	‮Controlled or initial expanded row keys.‬
`onExpandedChange`	`(keys: Set<string>) => void`	—	‮Reports expansion requests. Controlled rows wait for the updated keys.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.Header`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`sticky`	`boolean`	`false`	‮Pins this section to the scroll container; Header uses block start and Footer uses block end.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.Body`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`children`	`ReactNode`	—	‮The rows of the table body.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.Row`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`id`*	`string`	—	‮Stable row id used as the selection key and as the element id.‬
`disabled`	`boolean`	`false`	‮Prevents the row from being selected or focused by keyboard.‬
`selected`	`boolean`	—	‮Marks the row selected in the server-rendered markup before the selection store takes over.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.ColumnHeader`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`id`*	`string`	—	‮Column id that sort descriptors refer to.‬
`allowsSorting`	`boolean`	`false`	‮Makes the header toggle sorting for its column and publish aria-sort.‬
`sortDirection`	`"ascending" \| "descending" \| null`	—	‮Sort direction rendered for this column, used for the initial server markup when sorting is allowed.‬
`onClick`	`React.MouseEventHandler<HTMLTableCellElement>`	—	‮Runs before sorting; preventDefault() vetoes the sort change.‬
`children`	`ReactNode`	—	‮The header label.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.Cell`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`children`	`ReactNode`	—	‮The cell contents.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.Caption`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`children`	`ReactNode`	—	‮The caption text describing the table.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

`Table.RowSelect`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`rowId`*	`string`	—	‮Id of the row this checkbox selects and deselects.‬

‮Keyboard‬

‮Key‬	‮Action‬
`Tab`	‮Focus sort, selection and expansion controls in TableClient‬
`Enter` / `Space`	‮Activate a focused sort or expansion button; toggle a checkbox‬
`Arrow keys`	‮Move between selectable body rows in TableClient‬

‮Accessibility‬

‮The default Table renders native <table>, <caption>, <thead>, <tbody> and <tfoot> without client JavaScript; use ColumnHeader and RowHeader for header semantics. The /client entry adds sorting, selection, keyboard row navigation and controlled expansion, exposed through aria-sort, aria-expanded and aria-controls. ExpandedRow is a native <tr>; put a Cell with colSpan inside it. Filtering and ordering stay with the consumer.‬

‮Styling hooks‬

data-uiify-tabledata-partdata-layoutdata-sizedata-variantdata-stickydata-selecteddata-disabled--uiify-table-sticky-offset

‮Framework‬

‮Style‬

‮Theme‬

‮Language‬

Table

‮Playground‬

Table

Native table example

Sort, filter and expand

Sticky headers, footer and columns

‮API‬

`Table.Root (native)`

`Table.Footer`

`Table.RowHeader / Table.Cell / Table.ColumnHeader`

`TableClient.ExpandTrigger / TableClient.ExpandedRow`

`TableClient.Root — @gunkin/uiify/components/table/client`

`Table.Header`

`Table.Body`

`Table.Row`

`Table.ColumnHeader`

`Table.Cell`

`Table.Caption`

`Table.RowSelect`

‮Keyboard‬

‮Accessibility‬

‮Styling hooks‬