1import React from 'react';
2import doc from './basic.mdx';
3import tableDataItems from '../../constants/sampleMovieData';
4import DataTable from '../../../src/index';
5
6const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;
7
8const columns = [
9	{
10		name: 'Title',
11		selector: row => row.title,
12		sortable: true,
13	},
14	{
15		name: 'Director',
16		selector: row => row.director,
17		sortable: true,
18	},
19	{
20		name: 'Year',
21		selector: row => row.year,
22		sortable: true,
23	},
24];
25
26const BasicStory = ({ expandableRows, expandOnRowClicked, expandOnRowDoubleClicked, expandableRowsHideExpander }) => (
27	<DataTable
28		title="Movie List"
29		columns={columns}
30		data={tableDataItems}
31		expandableRows={expandableRows}
32		expandableRowsComponent={ExpandedComponent}
33		expandOnRowClicked={expandOnRowClicked}
34		expandOnRowDoubleClicked={expandOnRowDoubleClicked}
35		expandableRowsHideExpander={expandableRowsHideExpander}
36		pagination
37	/>
38);
39
40const Template = args => <BasicStory {...args} />;
41
42export const Basic = Template.bind({});
43
44Basic.args = {
45	expandableRows: true,
46	expandOnRowClicked: false,
47	expandOnRowDoubleClicked: false,
48	expandableRowsHideExpander: false,
49};
50
51export default {
52	title: 'Expandable/Basic',
53	component: Basic,
54	parameters: {
55		docs: {
56			page: doc,
57		},
58	},
59};