書類行DocumentRowExperimental

The downloadable document / file row: a leading control slot (a Checkbox for bulk-select), a file-type icon, the document name + meta (format / size / 発行日), and a trailing INDEPENDENT action button (download). The spine of every 帳票 / 明細 / 書類 / 添付 / download surface. Unlike ListCard (whose onSelect makes the WHOLE card one button, so a nested download button is invalid HTML), DocumentRow keeps MULTIPLE independent hit targets — select, open-to-preview (onOpen), and the trailing download action. Group rows with SectionList (by year / type) for headings + subtotals. title + description?/meta?/icon?/control?/status?/actions?/onOpen?. RSC-safe except the opt-in onOpen / action handlers.

プレビュー

2026年

3件
2026年6月分 給与明細新着PDF・124KB・発行日 2026/06/25
2026年5月分 給与明細PDF・122KB・発行日 2026/05/25
2026年 夏季賞与明細PDF・98KB・発行日 2026/06/10

2025年

1件
2025年分 給与所得の源泉徴収票PDF・88KB・発行日 2026/01/20

チェックボックス・行・DLボタンは独立した3つの操作対象（ListCard の単一 button では作れない）。

Props

表は横にスクロールできます
プロパティ型初期値説明
titleReactNode-書類名（2026年6月分 給与明細）。
descriptionReactNode-タイトル下の副次行。
metaReactNode-形式/サイズ/日付（PDF・124KB・発行日 2026/06/25）。
iconReactNode-ファイル種別アイコン（色付きタイル内）。
controlReactNode-先頭の独立した操作対象＝一括選択の Checkbox。
statusReactNode-状態ピル（新着/発行済）。
actionsReactNode-末尾の独立したアクションボタン＝ダウンロード（onOpen と別）。
onOpen() => void-ファイル本体（アイコン＋名前＋meta）をプレビュー button に（actions と独立）。

Usage

import { DocumentRow, Checkbox, Button } from "@gunjo/ui"
import { IconFileTypePdf, IconDownload } from "@tabler/icons-react"

<DocumentRow
  icon={<IconFileTypePdf />}
  title="2026年6月分 給与明細"
  meta="PDF・124KB・発行日 2026/06/25"
  control={<Checkbox checked={sel} onCheckedChange={toggle} aria-label="選択" />}
  actions={<Button variant="ghost" size="icon" aria-label="ダウンロード"><IconDownload /></Button>}
/>

// 3 independent hit targets: checkbox / open-to-preview (onOpen) / download — what ListCard can't do.

使用コンポーネント

SectionListListCardNavRow