Table

インポート

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@caroainc/ui-components/server'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@caroainc/ui-components/table'

基本的な使い方

名前	メール	ステータス
山田太郎	[email protected]	アクティブ
鈴木花子	[email protected]	非アクティブ
田中一郎	[email protected]	アクティブ

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>名前</TableHead>
      <TableHead>メール</TableHead>
      <TableHead>ステータス</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>山田太郎</TableCell>
      <TableCell>[email protected]</TableCell>
      <TableCell>アクティブ</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>鈴木花子</TableCell>
      <TableCell>[email protected]</TableCell>
      <TableCell>非アクティブ</TableCell>
    </TableRow>
  </TableBody>
</Table>

商品一覧の例

商品名	価格	在庫
商品A	¥1,000	50
商品B	¥2,500	30
商品C	¥800	100

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>商品名</TableHead>
      <TableHead className="text-right">価格</TableHead>
      <TableHead className="text-right">在庫</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">商品A</TableCell>
      <TableCell className="text-right">¥1,000</TableCell>
      <TableCell className="text-right">50</TableCell>
    </TableRow>
  </TableBody>
</Table>

カラム幅の指定

columnWidths にカラムごとの幅を配列で渡すと、colgroup を自動レンダリングして table-layout: fixed を適用します。number指定はpx、stringは任意のCSS幅（'20%'等）、nullは幅未指定（auto）として扱われます。何も指定しない場合は従来どおりcolgroupを出力しません。

商品名	割合	備考
とても長い商品名が入っても幅は固定されたままになる例	50%	-
商品B	25%	在庫少

<Table columnWidths={[120, '20%', null]}>
  <TableHeader>
    <TableRow>
      <TableHead>商品名</TableHead>
      <TableHead>割合</TableHead>
      <TableHead>備考</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="truncate">商品A</TableCell>
      <TableCell>50%</TableCell>
      <TableCell>-</TableCell>
    </TableRow>
  </TableBody>
</Table>

ドラッグでのリサイズが必要な場合は DataTable の resizableColumns を使用してください（Table単体は静的な幅指定のみ）。

stickyHeader + columnWidths併用時の注意

stickyHeader と columnWidths を併用し、かつカラム幅の合計がコンテナ幅を超える場合、ラッパーのoverflow-xは自動的にautoになり、横スクロールで右側のカラムまで到達できます（stickyHeaderのみの場合は従来どおりoverflow-x-clipのまま非破壊）。

ただしCSSの仕様上、overflow-xをautoにするとoverflow-yも自動的にvisible以外へ計算されてしまい（ブラウザ実機で検証済み。clipを明示指定しても同様に強制ペアリングされる）、この副作用としてヘッダーのposition: stickyが「外側のスクロール祖先（ページ本体や利用側が用意したoverflow-autoコンテナ）」を基準に機能しなくなります。ラッパー自身に高さ制限が無いため、内部的にはスクロール祖先として割り込むだけで実際にはスクロールが起きず、結果として見た目は通常のヘッダー行と同じ（画面上部に固定されない）になります。

つまり「合計幅がコンテナを超えるカラム幅指定」+「スクロール時にヘッダーを画面に固定する」は、このコンポーネント単体では両立しません。優先順位として、Caroa UIは全カラムへの到達可能性を優先し、この組み合わせでは横スクロールを有効にする代わりにヘッダー固定を諦めます。

両方を求める場合は、Tableをラップする側で高さ制限付きのoverflow-autoコンテナを自前で用意し、縦横のスクロールをそのコンテナ1つに集約してください（stickyHeaderpropは付けず、ネイティブのtheadのstickyはそのコンテナに対して自前で適用するか、DataTableのresizableColumnsのような別実装を検討してください）。

// 両立させたい場合の回避策（例）
<div className="max-h-[480px] overflow-auto rounded-md border border-border">
  <Table columnWidths={[160, 160, 160, 160]}>
    {/* stickyHeaderは付けない。このdiv自体が縦横スクロールの唯一の境界になる */}
    ...
  </Table>
</div>

DataTableとの違い

Table	DataTable
静的な表示	ソート・フィルタ・ページネーション対応
シンプル	機能豊富
Server Component対応	Client Component必須
`columnWidths`で静的な幅指定のみ	`resizableColumns`でドラッグリサイズ対応

Props

Table

Prop	Type	Default	Description
`divided`	`boolean`	`false`	セル間に縦線を表示する
`stickyHeader`	`boolean`	`false`	ヘッダーをスクロール時に固定する。columnWidthsと併用しカラム幅の合計がコンテナ幅を超える場合の注意点は上記「stickyHeader + columnWidths併用時の注意」を参照
`columnWidths`	`Array<number \| string \| null>`	`-`	カラムごとの幅。number=px / string=任意のCSS幅 / null=auto。指定時のみcolgroupを自動レンダリングしtable-layout: fixedを適用する
`className`	`string`	`-`	追加のクラス名

TableHead

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'auto'`	`'auto'`	カラムの幅プリセット

TableCell

Prop	Type	Default	Description
`numeric`	`boolean`	`false`	数値カラム（右寄せ + 等幅フォント）にする

Table

On this page