ホーム/コンポーネント/データ表示/データテーブル DataTable

DataTable

データテーブルコンポーネント。列定義・ページネーション・インライン編集をサポート。

import { DataTable } from "@blueai/ui"

Examples

Basic

請求番号	取引先	金額	ステータス
INV-0042	株式会社サンプル	¥385,000	入金済
INV-0041	テスト商事	¥128,700	下書き
INV-0040	ABC Holdings	¥1,540,000	期限超過
INV-0039	グローバル・テック	¥264,000	下書き
INV-0038	ネクスト・デザイン	¥792,000	入金済

const columns: DataTableColumn<Invoice>[] = [
  {
    header: "請求番号",
    cell: (row) => <span className="font-mono">{row.id}</span>,
  },
  { header: "取引先", cell: (row) => row.client },
  { header: "金額", cell: (row) => row.amount },
  {
    header: "ステータス",
    cell: (row) => <Badge variant="success">入金済</Badge>,
  },
];

<DataTable columns={columns} data={data} rowKey={(row) => row.id} />

Empty

請求番号	取引先	金額	ステータス
データがありません

<DataTable
  columns={columns}
  data={[]}
  rowKey={(_, i) => String(i)}
  emptyMessage="データがありません"
/>

Inline Editable

品目	数量	単価	小計
デザインレビュー	2	50000	100,000
コーディング	5	80000	400,000
テスト	3	40000	120,000

const columns: DataTableColumn<LineItem>[] = [
  { header: "品目", key: "name", editable: true },
  { header: "数量", key: "quantity", editable: true, align: "right", mono: true },
  { header: "単価", key: "unitPrice", editable: true, align: "right", mono: true },
  {
    header: "小計",
    cell: (row) => (Number(row.quantity) * Number(row.unitPrice)).toLocaleString(),
    align: "right",
  },
];

<DataTable
  columns={columns}
  data={items}
  rowKey={(row) => row.id}
  onCellChange={(rowIndex, key, value) => {
    setItems(prev => prev.map((item, i) =>
      i === rowIndex ? { ...item, [key]: value } : item
    ));
  }}
  onRowDelete={(rowIndex) => setItems(prev => prev.filter((_, i) => i !== rowIndex))}
  onRowDuplicate={(rowIndex) => { /* duplicate logic */ }}
  onAddRow={() => setItems(prev => [...prev, newItem()])}
  addRowLabel="+ 明細を追加"
/>

Props

Prop	Type	Default	Description
columns*	DataTableColumn<T>[]	—	列定義 { header, cell?, key?, editable?, format?, mono?, width?, align? }
data*	T[]	—	表示データ
rowKey*	(row: T, index: number) => string	—	各行の一意キーを返す関数
loading	boolean	—	ローディング状態
emptyMessage	string	—	データなし時のメッセージ
pagination	DataTablePagination	—	ページネーション設定
onCellChange	(rowIndex: number, key: string, value: string) => void	—	インライン編集時のコールバック

ガイドライン

●ページネーションで表示件数を制限する
●主要カラムを左側に配置する

Don't

●横スクロール必須になるほどカラムを増やさない
●全データを一括表示しない（パフォーマンス低下の原因）

Types

DataTableColumn<T>

type DataTableColumn<T> = {
  header: string;
  cell?: (row: T) => ReactNode;
  key?: string;
  editable?: boolean;
  format?: "number";
  mono?: boolean;
  width?: string;
  align?: "left" | "center" | "right";
};