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

LineItemTable

請求書や見積書の明細行を表示するテーブル。ネイビーヘッダー、行追加ボタン、フッター集計に対応。

import { LineItemTable, type LineItemColumn } from "@blueai/ui"

Examples

基本

品名	数量	単位	単価	金額
Webサイト制作	1	式	500,000円	500,000円
ロゴデザイン	1	式	150,000円	150,000円
コンサルティング	10	時間	15,000円	150,000円

const columns: LineItemColumn<Item>[] = [
  { key: "name", header: "品名", width: "40%", render: (row) => row.name },
  { key: "quantity", header: "数量", align: "right", render: (row) => row.quantity },
  { key: "unit", header: "単位", align: "center", render: (row) => row.unit },
  { key: "unitPrice", header: "単価", align: "right", render: (row) => formatYen(row.unitPrice) },
  { key: "amount", header: "金額", align: "right", render: (row) => formatYen(row.amount) },
];

<LineItemTable columns={columns} rows={items} />

行追加 + フッター合計

品名	数量	単位	単価	金額
Webサイト制作	1	式	500,000円	500,000円
ロゴデザイン	1	式	150,000円	150,000円
コンサルティング	10	時間	15,000円	150,000円

合計: 800,000円

<LineItemTable
  columns={columns}
  rows={items}
  onAddRow={() => console.log("add")}
  footer={
    <div className="text-[13px] font-medium text-text-primary">
      合計: {total.toLocaleString()}円
    </div>
  }
/>

Props

Prop	Type	Default	Description
columns*	LineItemColumn<T>[]	—	列定義の配列
rows*	T[]	—	行データの配列
onAddRow	() => void	—	行追加ボタンクリック時のコールバック
addLabel	string	—	行追加ボタンのラベル（デフォルト: "行を追加"）
footer	ReactNode	—	フッター右側に表示するコンテンツ（合計など）
className	string	—	追加CSSクラス

Types

LineItemColumn<T>

{ key: string; header: string; width?: string; align?: "left" | "center" | "right"; render: (row: T, index: number) => ReactNode }