Skip to content

Commit edf8c10

Browse files
youchannyouchann
authored
document component vol7 (#239)
* Dividerをいい感じにする * DataTable いい感じになった * yarn upgrade * update snapshot * Revert "yarn upgrade" This reverts commit 5a24359. * tweak
1 parent 0c0d1f9 commit edf8c10

File tree

8 files changed

+464
-555
lines changed

8 files changed

+464
-555
lines changed

‎src/components/DataTable/DataTable.stories.mdx

+352
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,352 @@
1+
import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
2+
import DataTable from "./DataTable";
3+
import Button from "../Button";
4+
import { data } from "./data";
5+
6+
<Meta
7+
title="Components/Data Display/DataTable"
8+
component={DataTable}
9+
parameters={{
10+
docs: { source: { type: "code" } },
11+
}}
12+
/>
13+
14+
# DataTable
15+
16+
<ArgsTable of={DataTable} />
17+
18+
## Samples
19+
20+
### Basic
21+
22+
<Canvas>
23+
<Story name="basic" args={{}}>
24+
{(args) => (
25+
<DataTable
26+
data={data.slice(0, 4)}
27+
columns={[
28+
{
29+
name: "ID",
30+
selector: (data) => data.id,
31+
},
32+
{
33+
name: "Impression",
34+
selector: (data) => data.imp,
35+
},
36+
{
37+
name: "Created at",
38+
selector: (data) => data.created_at,
39+
},
40+
]}
41+
{...args}
42+
/>
43+
)}
44+
</Story>
45+
</Canvas>
46+
47+
### With vertical line
48+
49+
<Canvas>
50+
<Story name="with vertical line" args={{}}>
51+
{(args) => (
52+
<DataTable
53+
enableRuledLine={true}
54+
data={data.slice(0, 4)}
55+
columns={[
56+
{
57+
name: "ID",
58+
selector: (data) => data.id,
59+
},
60+
{
61+
name: "Impression",
62+
selector: (data) => data.imp,
63+
},
64+
{
65+
name: "Created at",
66+
selector: (data) => data.created_at,
67+
},
68+
]}
69+
{...args}
70+
/>
71+
)}
72+
</Story>
73+
</Canvas>
74+
75+
### With pagination
76+
77+
<Canvas>
78+
<Story name="with pagination" args={{}}>
79+
{(args) => (
80+
<DataTable
81+
data={data}
82+
per={5}
83+
enablePagination={true}
84+
columns={[
85+
{
86+
name: "ID",
87+
selector: (data) => data.id,
88+
sortable: true,
89+
},
90+
{
91+
name: "Impression",
92+
selector: (data) => data.imp,
93+
sortable: true,
94+
},
95+
]}
96+
{...args}
97+
/>
98+
)}
99+
</Story>
100+
</Canvas>
101+
102+
### With sticky header
103+
104+
<Canvas>
105+
<Story name="with sticky header" args={{ tableMaxHeight: "300px" }}>
106+
{(args) => (
107+
<DataTable
108+
tableMaxHeight="300px"
109+
data={data}
110+
columns={[
111+
{
112+
name: "ID",
113+
selector: (data) => data.id,
114+
sortable: true,
115+
},
116+
{
117+
name: "Impression",
118+
selector: (data) => data.imp,
119+
sortable: true,
120+
},
121+
]}
122+
{...args}
123+
/>
124+
)}
125+
</Story>
126+
</Canvas>
127+
128+
### WithTabs
129+
130+
<Canvas>
131+
<Story name="with tabs" args={{}}>
132+
{(args) => (
133+
<DataTable
134+
enablePagination={true}
135+
per={5}
136+
tabs={[
137+
{
138+
label: "All",
139+
filter: (data) => data,
140+
},
141+
{
142+
label: "imp odd",
143+
filter: (data) => data.filter((item) => item.imp % 2 !== 0),
144+
},
145+
{
146+
label: "imp even",
147+
filter: (data) => data.filter((item) => item.imp % 2 === 0),
148+
},
149+
{
150+
label: "empty",
151+
filter: () => [],
152+
},
153+
]}
154+
data={data}
155+
columns={[
156+
{
157+
name: "ID",
158+
selector: (data) => data.id,
159+
},
160+
{
161+
name: "Impression",
162+
selector: (data) => data.imp,
163+
sortable: true,
164+
},
165+
{
166+
name: "Created at",
167+
selector: (data) => data.created_at,
168+
sortable: true,
169+
},
170+
]}
171+
{...args}
172+
/>
173+
)}
174+
</Story>
175+
</Canvas>
176+
177+
### Selectable with checkbox
178+
179+
<Canvas>
180+
<Story name="selectable with checkbox" args={{}}>
181+
{(args) => {
182+
const [selectedRows, setSelectedRows] = React.useState([]);
183+
const handleClick = () => {
184+
alert(selectedRows.join(","));
185+
};
186+
return (
187+
<>
188+
<Button onClick={handleClick}>Show selected Items</Button>
189+
<DataTable
190+
data={data.slice(0, 4)}
191+
columns={[
192+
{
193+
name: "ID",
194+
selector: (data) => data.id,
195+
},
196+
{
197+
name: "Impression",
198+
selector: (data) => data.imp,
199+
sortable: true,
200+
},
201+
{
202+
name: "Created at",
203+
selector: (data) => data.created_at,
204+
sortable: true,
205+
},
206+
]}
207+
onSelectRowsChange={setSelectedRows}
208+
{...args}
209+
/>
210+
</>
211+
);
212+
}}
213+
</Story>
214+
</Canvas>
215+
216+
### Selectable with radio button
217+
218+
<Canvas>
219+
<Story name="selectable with radio button" args={{}}>
220+
{(args) => {
221+
const [selectedRow, setSelectedRow] = React.useState();
222+
const handleClick = () => {
223+
alert(selectedRow.join(","));
224+
};
225+
return (
226+
<>
227+
<Button onClick={handleClick}>Show selected Items</Button>
228+
<DataTable
229+
data={data.slice(0, 4)}
230+
columns={[
231+
{
232+
name: "ID",
233+
selector: (data) => data.id,
234+
},
235+
{
236+
name: "Impression",
237+
selector: (data) => data.imp,
238+
sortable: true,
239+
},
240+
{
241+
name: "Created at",
242+
selector: (data) => data.created_at,
243+
sortable: true,
244+
},
245+
]}
246+
onRadioChange={setSelectedRow}
247+
{...args}
248+
/>
249+
</>
250+
);
251+
}}
252+
</Story>
253+
</Canvas>
254+
255+
### Custom cell
256+
257+
<Canvas>
258+
<Story name="custom cell" args={{}}>
259+
{(args) => (
260+
<DataTable
261+
data={data.slice(0, 4)}
262+
columns={[
263+
{
264+
name: "ID",
265+
selector: (data) => data.id,
266+
sortable: true,
267+
},
268+
{
269+
name: "Impression",
270+
selector: (data) => data.imp,
271+
renderCell: (data) => (
272+
<div style={{ color: "red" }}>{data.imp}</div>
273+
),
274+
sortable: true,
275+
},
276+
]}
277+
{...args}
278+
/>
279+
)}
280+
</Story>
281+
</Canvas>
282+
283+
### With row span
284+
285+
<Canvas>
286+
<Story name="with row span" args={{}}>
287+
{(args) => {
288+
const [selectedRows, setSelectedRows] = React.useState([]);
289+
const handleClick = () => {
290+
alert(selectedRows.join(","));
291+
};
292+
// MEMO: Need to sort data yourself.
293+
const sampleDataWithDuplicateId = [
294+
{ id: 1, name: "2name", count: 8 },
295+
{ id: 1, name: "2name", count: 4 },
296+
{ id: 1, name: "2name", count: 3 },
297+
{ id: 2, name: "2name", count: 8 },
298+
{ id: 3, name: "3name", count: 7 },
299+
{ id: 5, name: "5name", count: 5 },
300+
];
301+
return (
302+
<>
303+
<Button onClick={handleClick}>Show selected items</Button>
304+
<DataTable
305+
enableRuledLine={true}
306+
data={sampleDataWithDuplicateId}
307+
columns={[
308+
{
309+
name: "ID",
310+
selector: (data) => data.id,
311+
enableMergeCell: true,
312+
},
313+
{
314+
name: "name",
315+
selector: (data) => data.name,
316+
sortable: true,
317+
enableMergeCell: true,
318+
},
319+
{
320+
name: "count",
321+
selector: (data) => data.count,
322+
// MEMO: Cannot use sort when using "enableMergeCall"
323+
sortable: true,
324+
},
325+
]}
326+
onSelectRowsChange={setSelectedRows}
327+
{...args}
328+
/>
329+
</>
330+
);
331+
}}
332+
</Story>
333+
</Canvas>
334+
335+
### Empty
336+
337+
<Canvas>
338+
<Story name="empty" args={{}}>
339+
{(args) => (
340+
<DataTable
341+
data={[]}
342+
columns={[
343+
{
344+
name: "ID",
345+
selector: (data) => data.id,
346+
},
347+
]}
348+
{...args}
349+
/>
350+
)}
351+
</Story>
352+
</Canvas>

0 commit comments

Comments
 (0)