Skip to content

document component vol7 #239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 2, 2021
Merged

document component vol7 #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e477978
Dividerをいい感じにする
youchann Jan 29, 2021
b368338
DataTable いい感じになった
youchann Jan 29, 2021
5a24359
yarn upgrade
youchann Jan 29, 2021
b5ef393
update snapshot
youchann Jan 29, 2021
d9b9e2c
Revert "yarn upgrade"
youchann Jan 29, 2021
c627292
tweak
youchann Jan 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
352 changes: 352 additions & 0 deletions src/components/DataTable/DataTable.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
import DataTable from "./DataTable";
import Button from "../Button";
import { data } from "./data";

<Meta
title="Components/Data Display/DataTable"
component={DataTable}
parameters={{
docs: { source: { type: "code" } },
}}
/>

# DataTable

<ArgsTable of={DataTable} />

## Samples

### Basic
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

props多すぎるので、まだまだ表現の幅あるが、一旦これぐらいにしておく


<Canvas>
<Story name="basic" args={{}}>
{(args) => (
<DataTable
data={data.slice(0, 4)}
columns={[
{
name: "ID",
selector: (data) => data.id,
},
{
name: "Impression",
selector: (data) => data.imp,
},
{
name: "Created at",
selector: (data) => data.created_at,
},
]}
{...args}
/>
)}
</Story>
</Canvas>

### With vertical line

<Canvas>
<Story name="with vertical line" args={{}}>
{(args) => (
<DataTable
enableRuledLine={true}
data={data.slice(0, 4)}
columns={[
{
name: "ID",
selector: (data) => data.id,
},
{
name: "Impression",
selector: (data) => data.imp,
},
{
name: "Created at",
selector: (data) => data.created_at,
},
]}
{...args}
/>
)}
</Story>
</Canvas>

### With pagination

<Canvas>
<Story name="with pagination" args={{}}>
{(args) => (
<DataTable
data={data}
per={5}
enablePagination={true}
columns={[
{
name: "ID",
selector: (data) => data.id,
sortable: true,
},
{
name: "Impression",
selector: (data) => data.imp,
sortable: true,
},
]}
{...args}
/>
)}
</Story>
</Canvas>

### With sticky header

<Canvas>
<Story name="with sticky header" args={{ tableMaxHeight: "300px" }}>
{(args) => (
<DataTable
tableMaxHeight="300px"
data={data}
columns={[
{
name: "ID",
selector: (data) => data.id,
sortable: true,
},
{
name: "Impression",
selector: (data) => data.imp,
sortable: true,
},
]}
{...args}
/>
)}
</Story>
</Canvas>

### WithTabs

<Canvas>
<Story name="with tabs" args={{}}>
{(args) => (
<DataTable
enablePagination={true}
per={5}
tabs={[
{
label: "All",
filter: (data) => data,
},
{
label: "imp odd",
filter: (data) => data.filter((item) => item.imp % 2 !== 0),
},
{
label: "imp even",
filter: (data) => data.filter((item) => item.imp % 2 === 0),
},
{
label: "empty",
filter: () => [],
},
]}
data={data}
columns={[
{
name: "ID",
selector: (data) => data.id,
},
{
name: "Impression",
selector: (data) => data.imp,
sortable: true,
},
{
name: "Created at",
selector: (data) => data.created_at,
sortable: true,
},
]}
{...args}
/>
)}
</Story>
</Canvas>

### Selectable with checkbox

<Canvas>
<Story name="selectable with checkbox" args={{}}>
{(args) => {
const [selectedRows, setSelectedRows] = React.useState([]);
const handleClick = () => {
alert(selectedRows.join(","));
};
return (
<>
<Button onClick={handleClick}>Show selected Items</Button>
<DataTable
data={data.slice(0, 4)}
columns={[
{
name: "ID",
selector: (data) => data.id,
},
{
name: "Impression",
selector: (data) => data.imp,
sortable: true,
},
{
name: "Created at",
selector: (data) => data.created_at,
sortable: true,
},
]}
onSelectRowsChange={setSelectedRows}
{...args}
/>
</>
);
}}
</Story>
</Canvas>

### Selectable with radio button

<Canvas>
<Story name="selectable with radio button" args={{}}>
{(args) => {
const [selectedRow, setSelectedRow] = React.useState();
const handleClick = () => {
alert(selectedRow.join(","));
};
return (
<>
<Button onClick={handleClick}>Show selected Items</Button>
<DataTable
data={data.slice(0, 4)}
columns={[
{
name: "ID",
selector: (data) => data.id,
},
{
name: "Impression",
selector: (data) => data.imp,
sortable: true,
},
{
name: "Created at",
selector: (data) => data.created_at,
sortable: true,
},
]}
onRadioChange={setSelectedRow}
{...args}
/>
</>
);
}}
</Story>
</Canvas>

### Custom cell

<Canvas>
<Story name="custom cell" args={{}}>
{(args) => (
<DataTable
data={data.slice(0, 4)}
columns={[
{
name: "ID",
selector: (data) => data.id,
sortable: true,
},
{
name: "Impression",
selector: (data) => data.imp,
renderCell: (data) => (
<div style={{ color: "red" }}>{data.imp}</div>
),
sortable: true,
},
]}
{...args}
/>
)}
</Story>
</Canvas>

### With row span

<Canvas>
<Story name="with row span" args={{}}>
{(args) => {
const [selectedRows, setSelectedRows] = React.useState([]);
const handleClick = () => {
alert(selectedRows.join(","));
};
// MEMO: Need to sort data yourself.
const sampleDataWithDuplicateId = [
{ id: 1, name: "2name", count: 8 },
{ id: 1, name: "2name", count: 4 },
{ id: 1, name: "2name", count: 3 },
{ id: 2, name: "2name", count: 8 },
{ id: 3, name: "3name", count: 7 },
{ id: 5, name: "5name", count: 5 },
];
return (
<>
<Button onClick={handleClick}>Show selected items</Button>
<DataTable
enableRuledLine={true}
data={sampleDataWithDuplicateId}
columns={[
{
name: "ID",
selector: (data) => data.id,
enableMergeCell: true,
},
{
name: "name",
selector: (data) => data.name,
sortable: true,
enableMergeCell: true,
},
{
name: "count",
selector: (data) => data.count,
// MEMO: Cannot use sort when using "enableMergeCall"
sortable: true,
},
]}
onSelectRowsChange={setSelectedRows}
{...args}
/>
</>
);
}}
</Story>
</Canvas>

### Empty

<Canvas>
<Story name="empty" args={{}}>
{(args) => (
<DataTable
data={[]}
columns={[
{
name: "ID",
selector: (data) => data.id,
},
]}
{...args}
/>
)}
</Story>
</Canvas>
Loading