KARAKURIDESIGN SYSTEM

Table

Tableは、構造化データを行と列で表示するためのコンパウンドコンポーネントです。 ソート、ストライプ、スティッキーヘッダーなどの機能を備え、柔軟なデータ表示に対応します。

3
Variants
3
Sizes
8
サブコンポーネント
Pure
React

Playground

Preview
D
Status
PAY-7291Successemily@example.comDec 20, 2030$316.00
PAY-7292Successjames@example.comDec 20, 2030$242.00
PAY-7293Pendingsarah@example.comDec 21, 2030$837.00
PAY-7294Successdavid@example.comDec 21, 2030$124.00
PAY-7295Failedolivia@example.comDec 22, 2030$495.00
PAY-7296Successmichael@example.comDec 22, 2030$158.00
PAY-7297Pendingsophie@example.comDec 23, 2030$721.00
PAY-7298Successdaniel@example.comDec 24, 2030$89.00
PAY-7299Failedemma@example.comDec 24, 2030$362.00
PAY-7300Successryan@example.comDec 25, 2030$550.00
Variant
Size
Options
<Table>
  <TableHeader>
    <TableRow>
      <TableHead sortable sortDirection={sortKey === 'id' ? sortDir : null} onSort={() => handleSort('id')}>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead sortable sortDirection={sortKey === 'email' ? sortDir : null} onSort={() => handleSort('email')}>Email</TableHead>
      <TableHead sortable sortDirection={sortKey === 'date' ? sortDir : null} onSort={() => handleSort('date')}>Date</TableHead>
      <TableHead align="right" sortable sortDirection={sortKey === 'amount' ? sortDir : null} onSort={() => handleSort('amount')}>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {sortedData.map(row => (
      <TableRow key={row.id} interactive>
        <TableCell className="font-mono font-normal">{row.id}</TableCell>
        <TableCell>
          <Badge
            variant="subtle"
            color={statusMap[row.status].color}
            size="sm"
          >
            {statusMap[row.status].label}
          </Badge>
        </TableCell>
        <TableCell className="text-text-muted">{row.email}</TableCell>
        <TableCell className="text-text-muted whitespace-nowrap">{row.date}</TableCell>
        <TableCell align="right" className="font-mono">${row.amount.toFixed(2)}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Variants

Default

NameRoleStatus
BobDesignerAway
AliceEngineerActive

Bordered

NameRoleStatus
BobDesignerAway
AliceEngineerActive

Striped

NameRoleStatus
BobDesignerAway
AliceEngineerActive
CharliePMMeeting
DianaDevOpsActive

Sizes

sm
Cell PY8px
Cell PX12px
フォント14px
default
Cell PY12px
Cell PX16px
フォント14px
lg
Cell PY16px
Cell PX24px
フォント16px

API

Component Structure

Table— Pure React
.Header.Body.Footer.RowProps.HeadProps.CellProps.Caption

Props

Table

size"default"
"sm" | "default" | "lg"

テーブルの行密度（sm: コンパクト / default: 標準 / lg: ゆったり）

variant"default"
"default" | "bordered" | "striped"

テーブルのビジュアルスタイル

stickyHeaderfalse
boolean

ヘッダーをスクロール時に固定表示

wrapperClassNameundefined
string

スクロールラッパーに追加するclassName（例: "max-h-[400px]"）。stickyHeaderと組み合わせて使用

TableRow

interactivefalse
boolean

ホバー時にハイライト効果を表示

selectedfalse
boolean

行の選択状態を示す（data-selected属性を付与）

TableHead

align"left"
"left" | "center" | "right"

テキストの水平配置

sortablefalse
boolean

ソートインジケーターを表示

sortDirectionnull
"asc" | "desc" | null

現在のソート方向

onSortundefined
() => void

ソートクリック時のコールバック

sortIcon内蔵SVG
{ asc?: ReactNode, desc?: ReactNode, default?: ReactNode }

ソートアイコンをカスタマイズ（部分的なオーバーライド可）

TableCell

align"left"
"left" | "center" | "right"

テキストの水平配置

Customization

sortIcon propでソートアイコンを自由にカスタマイズできます。部分的なオーバーライドも可能です。

Lucideアイコンに変更

EmailRole
Bobbob@example.comDesigner
Alicealice@example.comEngineer
Charliecharlie@example.comPM
import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react' <TableHead sortable sortIcon={{ asc: <ArrowUp className="icon-xs" />, desc: <ArrowDown className="icon-xs" />, default: <ArrowUpDown className="icon-xs" />, }} > Name </TableHead>

部分的オーバーライド

Grade
95A+
87B+
72C+
// ascとdescだけオーバーライド（defaultは内蔵アイコンを維持） <TableHead sortable sortIcon={{ asc: <span>↑</span>, desc: <span>↓</span> }}> Score </TableHead>

Tip: アイコンサイズは icon-xs（14px）を推奨。テーブルヘッダーのテキストサイズに最適です。