Skip to main content
Designkufu

smarthr-ui-table

Tableは、table要素の代替として表形式でデータを表示するためのコンポーネントです。データを行列で一覧表示するとき、レコードを並べて比較するビューを提示するときに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-table
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/kufu/smarthr-design-system/HEAD/plugins/smarthr-design-system/skills/smarthr-ui-table/SKILL.md -o .claude/skills/smarthr-ui-table.md

Drops the SKILL.md into .claude/skills/smarthr-ui-table.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

table要素の代替として表形式でデータを表示するためのコンポーネントです。データを行列で一覧表示するとき、レコードを並べて比較するビューを提示するときに使います。

他のコンポーネントと組み合わせることが多いため、具体的な使用方法はよくあるテーブル（https://smarthr.design/products/design-patterns/smarthr-table/）を参照してください。

import

import { Table } from 'smarthr-ui'

Props

Props 名 型 デフォルト値 必須 説明
fixedHead boolean - - -
borderType "both" | "horizontal" | "vertical" | "all" | "outer" - - -
borderStyle "solid" | "dotted" | "dashed" - - -
layout "fixed" | "auto" - - -
rounded boolean | "all" | "top" | "bottom" | "left" | "right" - - -
reel boolean true - -

実装ルール

a11y-prohibit-checkbox-or-radio-in-table-cell

テーブルセル（Th, Td）内に直接 Checkbox, RadioButton を配置することを禁止するルールです。
SmartHR UI には、デフォルトでアクセシブルネームを設定する TdCheckbox, ThCheckbox, TdRadioButton といったより適切なコンポーネントが用意されています。

詳細は eslint-plugin-smarthr の各ルール README を参照してください。

使い方チェックリスト

アクセシビリティ > セル内にチェックボックスやラジオボタンをそのまま配置しない

  • [avoid] セルの内部に Checkbox や RadioButton をそのまま配置せず、TdCheckbox / ThCheckbox / TdRadioButton を利用する

アクセシビリティ > TdCheckboxおよびTdRadioButtonでは行を特定できる要素をIDで参照する

  • [must] TdCheckbox および TdRadioButton を利用する場合は aria-labelledby 属性を必ず指定し、それだけで行を一意に判別できる要素への ID 参照を指定する
  • [must] オブジェクト名だけで一意に判別できないオブジェクトでは、複数の要素の ID 参照をスペース区切りで指定する