1import React from 'react';
2import data from '../constants/sampleMovieData';
3import DataTable from '../../src/index';
4import Button from '../shared/Button';
5
6export const OmitDynamically = () => {
7	const [hideDirector, setHideDirector] = React.useState(false);
8
9	const columns = React.useMemo(
10		() => [
11			{
12				name: 'Title',
13				selector: row => row.title,
14				sortable: true,
15			},
16			{
17				name: 'Director',
18				selector: row => row.director,
19				sortable: true,
20				omit: hideDirector,
21			},
22			{
23				name: 'Year',
24				selector: row => row.year,
25				sortable: true,
26			},
27		],
28		[hideDirector],
29	);
30
31	return (
32		<>
33			<Button onClick={() => setHideDirector(!hideDirector)}>Hide Directory Column</Button>
34			<DataTable title="Movie List" columns={columns} data={data} pagination />
35		</>
36	);
37};
38
39export default {
40	title: 'Columns/Omit Dynamically',
41	component: OmitDynamically,
42};