テーブル

データを表示するためのセマンティックなテーブル要素。

ソースコードを見る問題を報告する Playgroundで見る

氏名	メールアドレス	グループ
ダニーロ・ソウザ	danilo@example.com	開発者
ザハラ・アンベッサ	zahra@example.com	管理者
ジャスパー・エリクソン	jasper@example.com	開発者

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>

  <Table.Body>
    <Table.Row>
      <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
      <Table.Cell>danilo@example.com</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
      <Table.Cell>zahra@example.com</Table.Cell>
      <Table.Cell>Admin</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
      <Table.Cell>jasper@example.com</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

APIリファレンス

ルート

HeaderとBodyの部分をグループ化します。このコンポーネントはtable要素に基づいており、共通のマージンプロパティをサポートしています。

プロパティ	型	デフォルト
`size`	`レスポンシブ<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "ghost"`	`"ghost"`
`layout`	`レスポンシブ<"auto" \| "fixed">`	デフォルト値なし

thead要素に基づいた、テーブルの列見出しを格納します。

ボディ

テーブルデータを表示します。このコンポーネントはtbody要素に基づいています。

行

テーブルセルの行。tr要素に基づいています。

プロパティ	型	デフォルト
`align`	`レスポンシブ<"start" \| "center" \| "end" \| "baseline">`	デフォルト値なし

セル

基本的なテーブルセル。このコンポーネントはtd要素に基づいていますが、テーブルセル内の水平スペースの配分を制御するためにalignの代わりにjustifyを使用します。

プロパティ	型	デフォルト
`justify`	`レスポンシブ<"start" \| "center" \| "end">`	デフォルト値なし
`width`	`レスポンシブ<string>`	デフォルト値なし
`minWidth`	`レスポンシブ<string>`	デフォルト値なし
`maxWidth`	`レスポンシブ<string>`	デフォルト値なし
`p`	`レスポンシブ<enum \| string>`	デフォルト値なし
`px`	`レスポンシブ<enum \| string>`	デフォルト値なし
`py`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pt`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pr`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pb`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pl`	`レスポンシブ<enum \| string>`	デフォルト値なし

列ヘッダーセル

テーブル列のヘッダー。th要素に基づいており、Cell部分と同じプロパティインターフェースを提供します。

プロパティ	型	デフォルト
`justify`	`レスポンシブ<"start" \| "center" \| "end">`	デフォルト値なし
`width`	`レスポンシブ<string>`	デフォルト値なし
`minWidth`	`レスポンシブ<string>`	デフォルト値なし
`maxWidth`	`レスポンシブ<string>`	デフォルト値なし
`p`	`レスポンシブ<enum \| string>`	デフォルト値なし
`px`	`レスポンシブ<enum \| string>`	デフォルト値なし
`py`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pt`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pr`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pb`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pl`	`レスポンシブ<enum \| string>`	デフォルト値なし

行ヘッダーセル

テーブル行のヘッダー。th要素に基づいており、Cell部分と同じプロパティインターフェースを提供します。

プロパティ	型	デフォルト
`justify`	`レスポンシブ<"start" \| "center" \| "end">`	デフォルト値なし
`width`	`レスポンシブ<string>`	デフォルト値なし
`minWidth`	`レスポンシブ<string>`	デフォルト値なし
`maxWidth`	`レスポンシブ<string>`	デフォルト値なし
`p`	`レスポンシブ<enum \| string>`	デフォルト値なし
`px`	`レスポンシブ<enum \| string>`	デフォルト値なし
`py`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pt`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pr`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pb`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pl`	`レスポンシブ<enum \| string>`	デフォルト値なし

例

サイズ

テーブルセルのテキストとパディングの大きさを制御するには、sizeプロパティを使用します。

氏名	メールアドレス
ダニーロ・ソウザ	danilo@example.com
ザハラ・アンベッサ	zahra@example.com

氏名	メールアドレス
ダニーロ・ソウザ	danilo@example.com
ザハラ・アンベッサ	zahra@example.com

氏名	メールアドレス
ダニーロ・ソウザ	danilo@example.com
ザハラ・アンベッサ	zahra@example.com

<Flex direction="column" gap="5" maxWidth="350px">
  <Table.Root size="1">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
        <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
        <Table.Cell>danilo@example.com</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
        <Table.Cell>zahra@example.com</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>

  <Table.Root size="2">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
        <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
        <Table.Cell>danilo@example.com</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
        <Table.Cell>zahra@example.com</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>

  <Table.Root size="3">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
        <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
        <Table.Cell>danilo@example.com</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
        <Table.Cell>zahra@example.com</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>
</Flex>

バックプレート付き

テーブルに視覚的に囲まれたバックプレートを追加するには、variant="surface"を使用します。

氏名	メールアドレス	グループ
ダニーロ・ソウザ	danilo@example.com	開発者
ザハラ・アンベッサ	zahra@example.com	管理者
ジャスパー・エリクソン	jasper@example.com	開発者

<Table.Root variant="surface">
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>

  <Table.Body>
    <Table.Row>
      <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
      <Table.Cell>danilo@example.com</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
      <Table.Cell>zahra@example.com</Table.Cell>
      <Table.Cell>Admin</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
      <Table.Cell>jasper@example.com</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

前へスイッチ

次へタブ

GitHubでこのページを編集する。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

テーブル