7onicDESIGN SYSTEM

Table

Tableは、構造化データを行と列で表示するためのコンパウンドコンポーネントです。ソート、ストライプ、スティッキーヘッダーなどの機能を備え、柔軟なデータ表示に対応します。

3
Variants
3
Sizes
8
Sub-components
Pure
React

Playground

Preview
D
Status
PAY-7291Successemily@example.comDec 20, 2030$316.00
PAY-7292Successjames@example.comDec 20, 2030$242.00
PAY-7293Pendingsarah@example.comDec 21, 2030$837.00
PAY-7294Successdavid@example.comDec 21, 2030$124.00
PAY-7295Failedolivia@example.comDec 22, 2030$495.00
PAY-7296Successmichael@example.comDec 22, 2030$158.00
PAY-7297Pendingsophie@example.comDec 23, 2030$721.00
PAY-7298Successdaniel@example.comDec 24, 2030$89.00
PAY-7299Failedemma@example.comDec 24, 2030$362.00
PAY-7300Successryan@example.comDec 25, 2030$550.00
Variant
Size
Options
<Table>
  <Table.Header>
    <Table.Row>
      <Table.Head sortable sortDirection={sortKey === 'id' ? sortDir : null} onSort={() => handleSort('id')}>Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head sortable sortDirection={sortKey === 'email' ? sortDir : null} onSort={() => handleSort('email')}>Email</Table.Head>
      <Table.Head sortable sortDirection={sortKey === 'date' ? sortDir : null} onSort={() => handleSort('date')}>Date</Table.Head>
      <Table.Head align="right" sortable sortDirection={sortKey === 'amount' ? sortDir : null} onSort={() => handleSort('amount')}>Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {sortedData.map(row => (
      <Table.Row key={row.id} interactive>
        <Table.Cell className="font-mono font-normal">{row.id}</Table.Cell>
        <Table.Cell>
          <Badge
            variant="subtle"
            color={statusMap[row.status].color}
            size="sm"
          >
            {statusMap[row.status].label}
          </Badge>
        </Table.Cell>
        <Table.Cell className="text-text-muted">{row.email}</Table.Cell>
        <Table.Cell className="text-text-muted whitespace-nowrap">{row.date}</Table.Cell>
        <Table.Cell align="right" className="font-mono">${row.amount.toFixed(2)}</Table.Cell>
      </Table.Row>
    ))}
  </Table.Body>
</Table>

Variants

Default

NameRoleStatus
BobDesignerAway
AliceEngineerActive
<Table>
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Role</Table.Head>
      <Table.Head>Status</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Bob</Table.Cell>
      <Table.Cell>Designer</Table.Cell>
      <Table.Cell>
        <Badge variant="subtle" color="warning" size="sm">Away</Badge>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Alice</Table.Cell>
      <Table.Cell>Engineer</Table.Cell>
      <Table.Cell>
        <Badge variant="subtle" color="success" size="sm">Active</Badge>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Bordered

NameRoleStatus
BobDesignerAway
AliceEngineerActive
<Table variant="bordered">...</Table>

Striped

NameRoleStatus
BobDesignerAway
AliceEngineerActive
CharliePMMeeting
DianaDevOpsActive
<Table variant="striped">...</Table>

Sizes

sm
Cell PY8px
Cell PX12px
フォント14px
default
Cell PY12px
Cell PX16px
フォント14px
lg
Cell PY16px
Cell PX24px
フォント16px

API

Component Structure

Table— Pure React
.Header.Body.Footer.RowProps.HeadProps.CellProps.Caption

Props

Table

size"default"
"sm" | "default" | "lg"

テーブルの行密度（sm: コンパクト / default: 標準 / lg: ゆったり）

variant"default"
"default" | "bordered" | "striped"

テーブルのビジュアルスタイル

stickyHeaderfalse
boolean

ヘッダーをスクロール時に固定表示

wrapperClassNameundefined
string

スクロールラッパーに追加するclassName（例: "max-h-[400px]"）。stickyHeaderと組み合わせて使用

Table.Row

interactivefalse
boolean

ホバー時にハイライト効果を表示

selectedfalse
boolean

行の選択状態を示す（data-selected属性を付与）

Table.Head

align"left"
"left" | "center" | "right"

テキストの水平配置

sortablefalse
boolean

ソートインジケーターを表示

sortDirectionnull
"asc" | "desc" | null

現在のソート方向

onSortundefined
() => void

ソートクリック時のコールバック

sortIconBuilt-in SVG
{ asc?: ReactNode, desc?: ReactNode, default?: ReactNode }

ソートアイコンをカスタマイズ（部分的なオーバーライド可）

Table.Cell

align"left"
"left" | "center" | "right"

テキストの水平配置

Customization

sortIcon sortIcon propでソートアイコンを自由にカスタマイズできます。部分的なオーバーライドも可能です。

Lucideアイコンに変更

EmailRole
Bobbob@example.comDesigner
Alicealice@example.comEngineer
Charliecharlie@example.comPM
import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react' <Table.Head sortable sortIcon={{ asc: <ArrowUp className="icon-xs" />, desc: <ArrowDown className="icon-xs" />, default: <ArrowUpDown className="icon-xs" />, }} > Name </Table.Head>

部分的オーバーライド

Grade
95A+
87B+
72C+
// Override only asc and desc (default keeps built-in icon) <Table.Head sortable sortIcon={{ asc: <span>↑</span>, desc: <span>↓</span> }}> Score </Table.Head>

Tip: アイコンサイズは icon-xs（14px）を推奨。テーブルヘッダーのテキストサイズに最適です。

Anatomy

1
2
3
Name
Status
4
5
Alice Johnson
Active
Bob Smith
Inactive
6
Showing 2 of 2 results
Cell PY12px
Cell PX16px
Head Font12px
1
Table
ルートコンテナ
2
Header Row
ヘッダー行
3
Header Cell
ヘッダーセル
4
Body Row
データ行
5
Body Cell
データセル
6
Footer
フッター行

Best Practices

✓

推奨

  • ✓明確なヘッダーラベルを使用する
  • ✓数値データは右寄せにする
  • ✓大量データにはスティッキーヘッダーを使う
  • ✓アクセシビリティのためにcaptionを設定する
✕

避けるべき

  • ✗列数が多すぎるテーブルを作らない
  • ✗レイアウト目的でテーブルを使わない
  • ✗ソートロジックをコンポーネント内に組み込まない
  • ✗セル内に過度に複雑なコンテンツを入れない

Accessibility

キーボード操作

Tabソートボタン間のフォーカス移動
Enterソートを実行

ARIA / WCAG

  • セマンティックHTML（table/thead/tbody/th/td）を使用
  • ソート方向はaria-sortで通知
  • ソートアイコンはaria-hidden="true"
  • captionによるテーブル説明をサポート