Table

任意の対話的アダプターを追加できるネイティブのテーブル。

ブラウザー: Chrome 123+Firefox 121+Safari 17.5+
ティア: 0
圧縮後のサイズ: 617 B
強制レイアウトの上限: 0 ms
axe の上限: 0
SSR 対応: はい
公開された契約: テストハーネス

プレイグラウンド

Table

ネイティブのテーブルの例

チームメンバー
名前	ロール	ステータス
Alice Chen	管理者	有効
Bob Smith	編集者	有効
Carol Lee	閲覧者	招待済み
3人のメンバー・2人が有効

並べ替え・絞り込み・展開

Select all rows		ロール
Select row	Alice Chen	管理者
alice@example.com · 有効
Select row	Bob Smith	編集者
bob@example.com · 有効
Select row	Carol Lee	閲覧者
carol@example.com · 招待済み
3人のメンバー・0人を選択

固定するヘッダー・フッター・列

メンバー	ロール	メール	ステータス
メンバー1	編集者	member1@example.com	有効
メンバー2	編集者	member2@example.com	有効
メンバー3	編集者	member3@example.com	有効
メンバー4	編集者	member4@example.com	有効
メンバー5	編集者	member5@example.com	有効
メンバー6	編集者	member6@example.com	有効
メンバー7	編集者	member7@example.com	有効
メンバー8	編集者	member8@example.com	有効
メンバー9	編集者	member9@example.com	有効
メンバー10	編集者	member10@example.com	有効
メンバー11	編集者	member11@example.com	有効
メンバー12	編集者	member12@example.com	有効
メンバー13	編集者	member13@example.com	有効
メンバー14	編集者	member14@example.com	有効
メンバー15	編集者	member15@example.com	有効
メンバー16	編集者	member16@example.com	有効
メンバー17	編集者	member17@example.com	有効
メンバー18	編集者	member18@example.com	有効
メンバー19	編集者	member19@example.com	有効
メンバー20	編集者	member20@example.com	有効
メンバー21	編集者	member21@example.com	有効
メンバー22	編集者	member22@example.com	有効
メンバー23	編集者	member23@example.com	有効
メンバー24	編集者	member24@example.com	有効
24人のメンバー

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	型	既定値	説明
`layout`	`"auto" \| "fixed"`	`"auto"`	ネイティブのテーブルレイアウト。選択、並べ替え、展開には明示的なTableClientエントリーを使います。
`size`	`"sm" \| "md" \| "lg"`	—	選択したスタイルシートによるセルの間隔。
`variant`	`"solid" \| "outline" \| "ghost"`	—	選択したスタイルシートによるサーフェスのバリエーション。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`Table.Footer`

Prop	型	既定値	説明
`sticky`	`boolean`	—	フッターをスクロールコンテナーのブロック終端に固定します。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

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

Prop	型	既定値	説明
`align`	`"start" \| "center" \| "end"`	`"start"`	このセルの論理方向でのテキスト配置。
`sticky`	`"start" \| "end"`	—	セルを論理インライン方向の端に固定します。固定セルが隣接する場合は、各セルに`--uiify-table-sticky-offset`を設定します。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`TableClient.ExpandTrigger / TableClient.ExpandedRow`

Prop	型	既定値	説明
`rowId`*	`string`	—	展開ボタンとネイティブの`<tr>`をつなぐ共通の行キー。展開行の中に`<td colSpan={columnCount}>`を配置します。

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

Prop	型	既定値	説明
`aria-label`	`string`	—	可視のキャプションや見出しで名前を付けない場合の、テーブルのアクセシブルな名前。
`aria-labelledby`	`string`	—	テーブルのラベルとなる要素のID。
`selectionMode`	`"none" \| "single" \| "multiple"`	`"none"`	行を選択できるかと、同時に選択できる数。"none"はgridロールのない、通常の静的なテーブルを描画します。
`selectionBehavior`	`"toggle" \| "replace"`	—	行のクリックで選択に追加するか、現在の選択を置き換えるか。
`defaultSelectedKeys`	`Iterable<string>`	—	初期選択する行のID。選択はコンポーネント内部で非制御として管理します。
`selectedKeys`	`Iterable<string>`	—	現在選択している行のID。選択は呼び出し側が制御します。
`onSelectionChange`	`(selectedKeys: Set<string>) => void`	—	選択が変わるたび、新しく選択した行IDの集合で呼び出します。
`defaultSortDescriptor`	`SortDescriptor \| null`	—	初期の並べ替え列と方向。並べ替え状態はコンポーネント内部で非制御として管理します。
`sortDescriptor`	`SortDescriptor \| null`	—	現在の並べ替え列と方向。並べ替えは制御されます。
`onSortChange`	`(descriptor: SortDescriptor \| null) => void`	—	並べ替え可能な列見出しを実行すると、新しい並べ替え記述子またはnullで呼び出します。
`expandedKeys / defaultExpandedKeys`	`Iterable<string>`	—	制御される、または初期の展開行キー。
`onExpandedChange`	`(keys: Set<string>) => void`	—	展開の要求を通知します。制御される行はキーの更新を待ちます。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`Table.Header`

Prop	型	既定値	説明
`sticky`	`boolean`	`false`	このセクションをスクロールコンテナーに固定します。Headerはブロック始端、Footerはブロック終端を使います。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`Table.Body`

Prop	型	既定値	説明
`children`	`ReactNode`	—	テーブル本体の行。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`Table.Row`

Prop	型	既定値	説明
`id`*	`string`	—	選択キーと要素のIDに使う、安定した行ID。
`disabled`	`boolean`	`false`	行の選択と、キーボードによるフォーカスを防ぎます。
`selected`	`boolean`	—	選択ストアが管理を引き継ぐ前に、サーバーレンダリングしたマークアップで行を選択済みにします。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`Table.ColumnHeader`

Prop	型	既定値	説明
`id`*	`string`	—	並べ替え記述子が参照する列ID。
`allowsSorting`	`boolean`	`false`	見出しで列の並べ替えを切り替え、aria-sortを公開します。
`sortDirection`	`"ascending" \| "descending" \| null`	—	この列に描画する並べ替え方向。並べ替えを許可する場合の初期サーバーマークアップに使います。
`onClick`	`React.MouseEventHandler<HTMLTableCellElement>`	—	並べ替え前に実行します。preventDefault()で並べ替えの変更を拒否できます。
`children`	`ReactNode`	—	見出しのラベル。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`Table.Cell`

Prop	型	既定値	説明
`children`	`ReactNode`	—	セルの内容。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`Table.Caption`

Prop	型	既定値	説明
`children`	`ReactNode`	—	テーブルを説明するキャプションのテキスト。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`Table.RowSelect`

Prop	型	既定値	説明
`rowId`*	`string`	—	このチェックボックスで選択・解除する行のID。

キーボード

キー	操作
`Tab`	TableClientの並べ替え・選択・展開コントロールにフォーカス
`Enter` / `Space`	フォーカス中の並べ替え・展開ボタンを実行、チェックボックスを切り替え
`Arrow keys`	TableClient内の選択可能な本文行間を移動

アクセシビリティ

標準のTableは、クライアントJavaScriptなしでネイティブの<table>、<caption>、<thead>、<tbody>、<tfoot>を描画します。見出しのセマンティクスにはColumnHeaderとRowHeaderを使います。/clientエントリーは、並べ替え、選択、キーボードでの行移動、制御された展開を追加し、aria-sort、aria-expanded、aria-controlsで公開します。ExpandedRowはネイティブの<tr>です。内部にcolSpan付きのCellを配置してください。フィルタリングと並び順は利用側が管理します。

スタイリングのフック

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

フレームワーク

スタイル

テーマ

言語

Table

プレイグラウンド

Table

ネイティブのテーブルの例

並べ替え・絞り込み・展開

固定するヘッダー・フッター・列

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`

キーボード

アクセシビリティ

スタイリングのフック