1import React from 'react';
2import doc from './preDisabled.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 PreDisabled = () => {
27	const data = tableDataItems.map(item => {
28		let disabled = false;
29		if (Number(item.year) < 2000) {
30			disabled = true;
31		}
32		return { ...item, disabled };
33	});
34	return (
35		<DataTable
36			title="Movie List - No additional info for old movies (Before 2000)"
37			columns={columns}
38			data={data}
39			expandableRows
40			expandableRowDisabled={row => row.disabled}
41			expandableRowsComponent={ExpandedComponent}
42			pagination
43		/>
44	);
45};
46
47export default {
48	title: 'Expandable/Pre Disabled ',
49	component: PreDisabled,
50	parameters: {
51		docs: {
52			page: doc,
53		},
54	},
55};