1import React from 'react';
2import data from '../constants/sampleMovieData';
3import DataTable from '../../src/index';
4
5const columns = [
6	{
7		name: 'Title',
8		selector: row => row.title,
9		sortable: true,
10	},
11	{
12		name: 'Director',
13		selector: row => row.director,
14		sortable: true,
15	},
16	{
17		name: 'Year',
18		selector: row => row.year,
19		sortable: true,
20	},
21];
22
23export const Basic = () => {
24	const [pending, setPending] = React.useState(true);
25	const [rows, setRows] = React.useState([]);
26	React.useEffect(() => {
27		const timeout = setTimeout(() => {
28			setRows(data);
29			setPending(false);
30		}, 2000);
31		return () => clearTimeout(timeout);
32	}, []);
33
34	return <DataTable title="Movie List" columns={columns} data={rows} progressPending={pending} pagination />;
35};
36
37export default {
38	title: 'Loading/Basic',
39	component: Basic,
40};