1import React from 'react';
2import doc from './preExpanded.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
26export const PreExpanded = () => {
27	const data = tableDataItems;
28	data[0].defaultExpanded = true;
29
30	return (
31		<DataTable
32			title="Movie List - First row expanded"
33			columns={columns}
34			data={data}
35			expandableRows
36			expandableRowExpanded={row => row.defaultExpanded}
37			expandableRowsComponent={ExpandedComponent}
38			pagination
39		/>
40	);
41};
42
43export default {
44	title: 'Expandable/Pre Expanded ',
45	component: PreExpanded,
46	parameters: {
47		docs: {
48			page: doc,
49		},
50	},
51};