1import { Button } from '@proton/atoms';
2import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from '@proton/components';
3
4import { getTitle } from '../../helpers/title';
5import mdx from './Table.mdx';
6
7export default {
8    title: getTitle(__filename, false),
9    component: Table,
10    subcomponents: { TableHeader, TableHeaderCell, TableRow, TableCell, TableBody },
11    parameters: {
12        docs: {
13            page: mdx,
14            inlineStories: false,
15        },
16    },
17};
18
19export const Basic = () => {
20    return (
21        <Table responsive="cards" hasActions>
22            <TableHeader>
23                <TableHeaderCell>ID</TableHeaderCell>
24                <TableHeaderCell>Name</TableHeaderCell>
25                <TableHeaderCell>Action</TableHeaderCell>
26            </TableHeader>
27            <TableBody>
28                <TableRow>
29                    <TableCell label="ID">Lorem ipsum</TableCell>
30                    <TableCell label="Name">Lorem ipsum</TableCell>
31                    <TableCell>
32                        <Button size="small">Loremium</Button>
33                    </TableCell>
34                </TableRow>
35                <TableRow>
36                    <TableCell label="ID">Lorem ipsum</TableCell>
37                    <TableCell label="Name">Lorem ipsum</TableCell>
38                    <TableCell>
39                        <Button size="small">Loremium</Button>
40                    </TableCell>
41                </TableRow>
42                <TableRow>
43                    <TableCell label="ID">Lorem ipsum</TableCell>
44                    <TableCell label="Name">Lorem ipsum</TableCell>
45                    <TableCell>
46                        <Button size="small">Loremium</Button>
47                    </TableCell>
48                </TableRow>
49            </TableBody>
50        </Table>
51    );
52};
53
54Basic.parameters = {
55    docs: {
56        iframeHeight: '300px',
57    },
58};
59
60export const Cards = () => {
61    return (
62        <Table responsive="cards">
63            <TableHeader>
64                <TableHeaderCell>ID</TableHeaderCell>
65                <TableHeaderCell>Name</TableHeaderCell>
66                <TableHeaderCell>Action</TableHeaderCell>
67            </TableHeader>
68            <TableBody>
69                <TableRow>
70                    <TableCell label="ID">Lorem ipsum</TableCell>
71                    <TableCell label="Name">Lorem ipsum</TableCell>
72                    <TableCell>
73                        <Button size="small">Settings</Button>
74                    </TableCell>
75                </TableRow>
76                <TableRow>
77                    <TableCell label="ID">Lorem ipsum</TableCell>
78                    <TableCell label="Name">Lorem ipsum</TableCell>
79                    <TableCell>
80                        <Button size="small">Settings</Button>
81                    </TableCell>
82                </TableRow>
83                <TableRow>
84                    <TableCell label="ID">Lorem ipsum</TableCell>
85                    <TableCell label="Name">Lorem ipsum</TableCell>
86                    <TableCell>
87                        <Button size="small">Settings</Button>
88                    </TableCell>
89                </TableRow>
90            </TableBody>
91        </Table>
92    );
93};
94
95Cards.parameters = {
96    docs: {
97        iframeHeight: '500px',
98    },
99};