セクションリストSectionListExperimental

The grouped-list / sectioned layout: a sequence of sections, each a heading band (title + sublabel + a right-aligned group aggregate) over the caller's body rows, with an optional per-group subtotal footer. The grouping spine every history / 利用明細 / 取引履歴 / statement / invoice-by-客先 screen hand-rolls — groupBy + a section header + a per-group subtotal. Body-agnostic: drop in ListCards (mobile history), a Table (desktop invoices), or signed ledger rows. The caller owns the grouping + subtotal math + any cross-group selection; this owns the consistent header/footer chrome + the sectioned a11y structure. Distinct from StatusBoard.groups (status tiles) and Itinerary.days (a trip timeline). sections[] of {key,title,sublabel?,meta?,content,footer?}; stickyHeaders optional. RSC-safe.

プレビュー

2026年6月末締め

3社
小計 ¥1,663,500
締め小計（3社）¥1,663,500

2026年6月20日締め

2社
小計 ¥808,500
締め小計（2社）¥808,500

締め日ごとにグループ化＋各グループの小計フッター。本文は呼び出し側（ここは ListCard）。

Props

表は横にスクロールできます
プロパティ型初期値説明
sectionsSectionListSection[]-事前グループ化したセクション（groupBy は呼び出し側）。各＝見出し帯＋本文＋任意の小計フッター。
stickyHeadersbooleanfalseスクロール中セクション見出しを上部に固定。
labelReactNode-グループ全体のアクセシブル名。
SectionListSection.keystring | number-セクションの安定キー。
SectionListSection.title / sublabelReactNode-グループ見出し（荷主/締め/月）＋副次。
SectionListSection.metaReactNode-見出し右寄せのグループ集計（小計¥…/N件）。
SectionListSection.contentReactNode-セクション本文＝呼び出し側の行（ListCard／Table／台帳行）。
SectionListSection.footerReactNode-グループごとの小計フッター帯（任意）。

Usage

import { SectionList, ListCard, type SectionListSection } from "@gunjo/ui"

// The caller owns the groupBy + subtotal math; SectionList owns the header/footer chrome.
const sections: SectionListSection[] = groups.map((g) => ({
  key: g.key,
  title: g.title,                 // 2026年6月末締め
  sublabel: `${g.rows.length}社`,
  meta: `小計 ¥${subtotal(g).toLocaleString()}`,   // right-aligned group aggregate
  content: g.rows.map((r) => <ListCard key={r.id} title={r.title} status={yen(r.amount)} />),
  footer: <><span>締め小計</span><span>¥{subtotal(g).toLocaleString()}</span></>,
}))

<SectionList sections={sections} label="締め別 請求一覧" />

使用コンポーネント

ListCardAmountBreakdownTable