DataTable.stories.mdx

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

Samples

Basic

{(args) => ( data.id, }, { name: "Impression", selector: (data) => data.imp, }, { name: "Created at", selector: (data) => data.created_at, }, ]} {...args} /> )}

With vertical line

{(args) => ( data.id, }, { name: "Impression", selector: (data) => data.imp, }, { name: "Created at", selector: (data) => data.created_at, }, ]} {...args} /> )}

With pagination

{(args) => ( data.id, sortable: true, }, { name: "Impression", selector: (data) => data.imp, sortable: true, }, ]} {...args} /> )}

With sticky header

{(args) => ( data.id, sortable: true, }, { name: "Impression", selector: (data) => data.imp, sortable: true, }, ]} {...args} /> )}

WithTabs

{(args) => ( 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} /> )}

Selectable with checkbox

{(args) => { const [selectedRows, setSelectedRows] = React.useState([]); const handleClick = () => { alert(selectedRows.join(",")); }; return ( <> Show selected Items data.id, }, { name: "Impression", selector: (data) => data.imp, sortable: true, }, { name: "Created at", selector: (data) => data.created_at, sortable: true, }, ]} onSelectRowsChange={setSelectedRows} {...args} /> ); }}

Selectable with radio button

{(args) => { const [selectedRow, setSelectedRow] = React.useState(); const handleClick = () => { alert(selectedRow.join(",")); }; return ( <> Show selected Items data.id, }, { name: "Impression", selector: (data) => data.imp, sortable: true, }, { name: "Created at", selector: (data) => data.created_at, sortable: true, }, ]} onRadioChange={setSelectedRow} {...args} /> ); }}

Custom cell

{(args) => ( data.id, sortable: true, }, { name: "Impression", selector: (data) => data.imp, renderCell: (data) => (

{data.imp}

), sortable: true, }, ]} {...args} /> )}

With row span

{(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 ( <> Show selected items 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} /> ); }}

Empty

{(args) => ( data.id, }, ]} {...args} /> )}