テーブル／データテーブル
テーブルは、データや情報を行と列の組み合わせで構造化された表組です。
import { Table } from "@/components/ui/table";使用例
import { css } from "styled-system/css";
import { Table } from "@/components/ui/table";
export default function App() {
return (
<Table.Root>
<Table.Caption>テーブル</Table.Caption>
<colgroup>
<col
className={css({
borderRightWidth: "1px",
borderColor: "black",
bg: "solid-gray.50",
})}
/>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<Table.Head>
<Table.Row>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
{Array.from({ length: 4 }).map((_, index) => (
<Table.Row key={index}>
<Table.Header scope="row">データ</Table.Header>
<Table.Cell>データ</Table.Cell>
<Table.Cell>データ</Table.Cell>
<Table.Cell>データ</Table.Cell>
<Table.Cell>データ</Table.Cell>
<Table.Cell>データ</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
);
}
Dense, ストライプ, ホバーハイライト
<Table.Root>に以下の属性を付与するとテーブルのスタイルが変わります。
dense: 行のサイズを小さくするstriped: 行をストライプ表示にするhovered: マウスカーソルが乗った行をホバーハイライトで表示する
import { css } from "styled-system/css";
import { Table } from "@/components/ui/table";
export default function App() {
return (
<Table.Root dense hovered striped>
<Table.Caption>テーブル</Table.Caption>
<colgroup>
<col
className={css({
borderRightWidth: "1px",
borderColor: "black",
})}
/>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<Table.Head>
<Table.Row>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
<Table.Header scope="col">ラベル</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
{Array.from({ length: 4 }).map((_, index) => (
<Table.Row key={index}>
<Table.Header scope="row">データ</Table.Header>
<Table.Cell>データ</Table.Cell>
<Table.Cell>データ</Table.Cell>
<Table.Cell>データ</Table.Cell>
<Table.Cell>データ</Table.Cell>
<Table.Cell>データ</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
);
}