Table

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import React from 'react'
import styled from 'styled-components'
import { Base as BaseComponent } from '../Base'
import { Button } from '../Button'
import { Text } from '../Text'
import { TdCheckbox } from './TdCheckbox'
import { ThCheckbox } from './ThCheckbox'
import { BulkActionRow, EmptyTableBody, Table, Td, Th } from '.'
export default {
title: 'Data Display(データ表示)/Table',
component: Table,
subcomponents: { Th, Td, BulkActionRow },
}
const data = [
{
name: 'Tea',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
{
name: 'Smoothie',
calories: 10,
fat: 0,
carbs: 34.5,
protein: 1.0,
},
{
name: 'Milk',
calories: 199,
fat: 7.8,
carbs: 9.9,
protein: 6.8,
},
{
name: 'Coffee',
calories: 39,
fat: 7.8,
carbs: 10.9,
protein: 0,
},
{
name: 'Orange Juice',
calories: 200,
fat: 100.0,
carbs: 10,
protein: 300,
},
{
name: 'Apple Juice',
calories: 130,
fat: 200,
carbs: 99,
protein: 68,
},
{
name: 'Green Tea',
calories: 300,
fat: 100,
carbs: 10,
protein: 41,
},
{
name: 'Oolong Tea',
calories: 100,
fat: 10,
carbs: 9,
protein: 600,
},
]
export const All: Story = () => (
<Ul>
<li>
table
<Table>
<thead>
<tr>
<ThCheckbox name="tableAllCheckbox" />
<Th sort="asc" onSort={action('降順に並び替え')}>
Name
</Th>
<Th sort="none" onSort={action('昇順に並び替え')}>
Calories
</Th>
<Th>Fat (g)</Th>
<Th>Carbs (g)</Th>
<Th>Protein (g)</Th>
<Th>Button</Th>
</tr>
<BulkActionRow>Bulk action area</BulkActionRow>
</thead>
<tbody>
{data.map(({ name, calories, fat, carbs, protein }, i) => (
<tr key={name}>
<TdCheckbox name={`tableCheckBox-${i}`} aria-labelledby={`name-${i}`} />
<Td id={`name-${i}`}>{name}</Td>
<Td>{calories}</Td>
<Td>{fat}</Td>
<Td>{carbs}</Td>
<Td>{protein}</Td>
<Td>
<Button size="s">Button</Button>
</Td>
</tr>
))}
</tbody>
</Table>
</li>
<li>
行頭で改行が発生する場合
<Table>
<thead>
<tr>
<ThCheckbox name="tableAllCheckbox" checked={true} mixed />
<Th sort="asc" onSort={action('降順に並び替え')}>
Name
</Th>
<Th sort="none" onSort={action('昇順に並び替え')}>
Calories
<br />
(kcal)
</Th>
<Th>
Fat
<br />
(g)
</Th>
<Th>Carbs (g)</Th>
<Th>Protein (g)</Th>
<Th>Button</Th>
</tr>
</thead>
</Table>
</li>
<li>
table fixed header
<div style={{ overflow: 'clip' }}>
<Table fixedHead>
<thead>
<tr>
<ThCheckbox name="tableAllCheckbox" />
<Th
sort="desc"
onSort={action('昇順に並び替え')}
decorators={{ sortDirectionIconAlt: (text, { sort }) => `${sort} (${text})` }}
>
Name
</Th>
<Th>Calories</Th>
<Th>Fat (g)</Th>
<Th>Carbs (g)</Th>
<Th>Protein (g)</Th>
<Th>Button</Th>
</tr>
<BulkActionRow>Bulk action area</BulkActionRow>
</thead>
<tbody>
{data.map(({ name, calories, fat, carbs, protein }, i) => (
<tr key={name}>
<TdCheckbox name={`tableCheckBox-${i}`} aria-labelledby={`name-fixed-${i}`} />
<Td id={`name-fixed-${i}`}>{name}</Td>
<Td>{calories}</Td>
<Td>{fat}</Td>
<Td>{carbs}</Td>
<Td>{protein}</Td>
<Td>
<Button size="s">Button</Button>
</Td>
</tr>
))}
</tbody>
</Table>
</div>
</li>
<li>
colSpan / rowSpan
<Table>
<thead>
<tr>
<Th colSpan={3}>colSpan=3</Th>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
</tr>
</thead>
<tbody>
<tr>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
</tr>
<tr>
<Td rowSpan={2}>rowSpan=2</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
</tr>
<tr>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
</tr>
</tbody>
</Table>
</li>
<li>
Table on Base
<Base>
<Table>
<thead>
<tr>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
</tr>
</thead>
<tbody>
<tr>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
</tr>
<tr>
<Td>cell</Td>
<Td>cell</Td>
<Td>cell</Td>
</tr>
<tr>
<Td>cell</Td>
<Td>cell</Td>
<Td>
multi
<br />
line
</Td>
</tr>
<tr>
<Td nullable={true}></Td>
<Td nullable={true}>not null</Td>
<Td nullable={false}></Td>
</tr>
</tbody>
</Table>
</Base>
</li>
<li>
Table with empty state
<Base>
<Table>
<thead>
<tr>
<Th>cell</Th>
<Th>cell</Th>
<Th>cell</Th>
</tr>
</thead>
<EmptyTableBody>
<Text>お探しの条件に該当する項目はありません。</Text>
<Text>別の条件をお試しください。</Text>
</EmptyTableBody>
</Table>
</Base>
</li>
</Ul>
)
All.storyName = 'all'
const Ul = styled.ul`
list-style: none;
padding: 0;
> li {
margin-top: 2rem;
padding: 0 2rem;
}
`
const Base = styled(BaseComponent)`
overflow-x: auto;
`
処理中

Props

Table props

NameRequiredTypeDescription
fixedHead-false, true`true` のとき、スクロール時にヘッダーを固定表示する
children-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalテーブルの内容
className-stringコンポーネントに適用するクラス名

Th props

NameRequiredTypeDescription
sort-"desc", "none", "asc"並び替え状態
onSort-() => void並び替えをクリックした時に発火するコールバック関数
decorators-{ sortDirectionIconAlt: (text: string, { sort }: { sort: "desc" | "none" | "asc"; }) => ReactNode; }文言を変更するための関数

ThCheckbox props

NameRequiredTypeDescription
lineHeight-number
mixed-false, true
error-false, true
decorators-DecoratorsType<"checkAllInvisibleLabel">

Td props

NameRequiredTypeDescription
nullable-false, true`true` のとき、セル内が空であれば "----" を表示する

TdCheckbox props

NameRequiredTypeDescription
mixed-false, true`true` のとき、チェック状態を `mixed` にする
error-false, trueチェックボックスにエラーがあるかどうか
lineHeight-numberラベル部分の `line-height`
aria-labelledbytruestring値を特定するための行 id
children-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalaria-labelledby では特定できない場合に補足するための不可視ラベル

アクセシビリティ

行を選択するチェックボックスのラベル

<TdCheckbox>を用いてaria-labelledbyで行のオブジェクトを識別するためのテキストを参照してください。

<tr key={key}>
<TdCheckbox aria-labelledby={object.id} />
<Td>
<a href={`/hoge/${object.id}`} id={object.id}>{name}</a>
</Td>
...
</tr>