Design System
⌘K

Table 表 · kf-table

一覧。罫線は line の 1px だけ、縞も影も付けない。

名前状態金額(円)件数更新
項目 A完了1,200,00082026-10-22
項目 B確認待ち980,00042026-10-24
項目 C進行中2,400,000—2026-10-23
項目 D下書き150,00022026-10-20
クラスkf-btnkf-btn-quietkf-btn-smkf-codekf-keykf-numkf-statuskf-status-infokf-status-okkf-status-warnkf-table
HTML
<table class="kf-table">
  <thead><tr><th>名前</th><th>状態</th><th class="kf-num">金額(円)</th><th class="kf-num">件数</th><th>更新</th><th></th></tr></thead>
  <tbody>
    <tr><td class="kf-key">項目 A</td><td><span class="kf-status kf-status-ok">完了</span></td><td class="kf-num">1,200,000</td><td class="kf-num">8</td><td class="kf-code">2026-10-22</td><td><button class="kf-btn kf-btn-quiet kf-btn-sm">開く</button></td></tr>
    <tr class="is-selected"><td class="kf-key">項目 B</td><td><span class="kf-status kf-status-warn">確認待ち</span></td><td class="kf-num">980,000</td><td class="kf-num">4</td><td class="kf-code">2026-10-24</td><td><button class="kf-btn kf-btn-quiet kf-btn-sm">開く</button></td></tr>
    <tr><td class="kf-key">項目 C</td><td><span class="kf-status kf-status-info">進行中</span></td><td class="kf-num">2,400,000</td><td class="kf-num">—</td><td class="kf-code">2026-10-23</td><td><button class="kf-btn kf-btn-quiet kf-btn-sm">開く</button></td></tr>
    <tr><td class="kf-key">項目 D</td><td><span class="kf-status">下書き</span></td><td class="kf-num">150,000</td><td class="kf-num">2</td><td class="kf-code">2026-10-20</td><td><button class="kf-btn kf-btn-quiet kf-btn-sm">開く</button></td></tr>
  </tbody>
</table>
  • 見出し行は label スタイル(ink-muted、surface-sunken の地)。
  • 1 列目は行の主キー(kf-key、500、ink-strong)。ID や日時は kf-code(mono、ink-faint)。
  • 金額・件数・割合は kf-num(本文と同じ書体の等幅数字、右寄せ)。見出しも右寄せに揃える。単位は見出しに書き、セルには数字だけ。
  • 状態は Status を 1 列に。文字の色だけで状態を示さない。
  • 行の操作は右端の列に kf-btn-sm。hover で surface-sunken、選択中は is-selected(accent-soft)。
  • 50 行を超える一覧は絞り込みを先に置く。
コピーした