smarthr-ui-spreadsheet-table

SpreadsheetTableは、表データを表計算ソフト風に表示するためのコンポーネントです。CSVインポート画面などで利用者にスプレッドシートを想像させるときに使います。

Stars: 30
Source: kufu/smarthr-design-system
Updated: 2026-05-29
Slug: kufu--smarthr-design-system--smarthr-ui-spreadsheet-table

// 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-spreadsheet-table/SKILL.md -o .claude/skills/smarthr-ui-spreadsheet-table.md

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

表データを表計算ソフト風に表示するためのコンポーネントです。CSVインポート画面などで利用者にスプレッドシートを想像させるときに使います。

import

import { SpreadsheetTableCorner, SpreadsheetTable } from 'smarthr-ui'

Props

SpreadsheetTableCorner

（固有 Props なし）

SpreadsheetTable

Props 名	型	デフォルト値	必須	説明
data	ReactNode[][]	-	-	-

実装ルール

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

使い方チェックリスト

レイアウト

[should] セル内で改行数が多くなるなど可読性が下がる場合は、セル内のテキストを折り返さずに表示できるよう、Reel を使用して SpreadsheetTable を水平方向にスクロールさせる