メインコンテンツまでスキップ

.table()

テーブルを追加します。

TableOptions​

.table({
  preset?: "basic" | "minimal" | "striped",
  columns: Column<T>[],
  data: T[],
  autoWidth?: "all" | "body" | false,
  mergeSameValues?: boolean,
  style?: TableStyle,
  border?: BorderStyle,
  conditionalStyle?: (row: T, col: keyof T) => CellStyle | {},
})
オプション型デフォルト説明
preset"basic" | "minimal" | "striped"-プリセットスタイル
columnsColumn<T>[]必須カラム定義
dataT[]必須データ配列
autoWidth"all" | "body" | falsefalse列幅自動調整
mergeSameValuesbooleanfalse同じ値のセルを縦方向にマージ
styleTableStyle-テーブル全体のスタイル
borderBorderStyle-罫線設定
conditionalStylefunction-条件付きスタイル

カラム定義（Column）​

LeafColumn（通常のカラム）​

{
  key: keyof T & string,     // データのキー
  label: string,             // ヘッダーテキスト
  style?: CellStyle,         // この列のデフォルトスタイル
  mergeSameValues?: boolean, // この列で同値マージするか
}

ParentColumn（マルチヘッダー用）​

{
  label: string,             // 親ヘッダーテキスト
  children: Column<T>[],     // 子カラム（再帰的に定義可能）
}

マルチヘッダーの例:

columns: [
  {
    label: "商品情報",
    children: [
      { key: "category", label: "カテゴリ" },
      { key: "name", label: "商品名" },
    ],
  },
  { key: "price", label: "価格" },
]

結果:

| 商品情報           | 価格 |
| カテゴリ | 商品名 |      |

autoWidth​

列幅を自動調整します。

値説明
"all"ヘッダーとボディ両方の最大幅で調整
"body"ボディのみで調整（ヘッダーは無視）
false自動調整しない（デフォルト）
.table({
  autoWidth: "all",
  columns: [...],
  data: [...],
})

mergeSameValues​

同じ値のセルを縦方向にマージします。

// テーブル全体でマージ
.table({
  mergeSameValues: true,
  columns: [...],
  data: [...],
})

// 列単位でマージ
.table({
  columns: [
    { key: "category", label: "カテゴリ", mergeSameValues: true },
    { key: "name", label: "商品名" },
  ],
  data: [...],
})

conditionalStyle​

条件に基づいてセルにスタイルを適用します。

.table({
  columns: [...],
  data: [...],
  conditionalStyle: (row, col) => {
    if (col === "profit" && row.profit < 0) {
      return { color: "#FF0000" };
    }
    return {};
  },
})

関連​