Skip to main content
Designkufu

smarthr-ui-empty-table-body

EmptyTableBodyは、テーブルにデータがない場合に空状態を表示するtbodyコンポーネントです。空状態のメッセージを提示するときに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-empty-table-body
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-empty-table-body/SKILL.md -o .claude/skills/smarthr-ui-empty-table-body.md

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

テーブルにデータがない場合に空状態を表示するtbodyコンポーネントです。空状態のメッセージを提示するときに使います。

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

import

import { EmptyTableBody } from 'smarthr-ui'

Props

Props 名 型 デフォルト値 必須 説明
padding any - - 境界とコンテンツの間の余白
ref Ref - - -

実装ルール

EmptyTableBody に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。

使い方チェックリスト

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

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

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

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