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

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	入金済

Empty

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

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";
};