1import React, { useState, useEffect } from 'react';
2import users from '../shared/users';
3import DataTable from '../../src/index';
4
5export const Delayed = () => {
6	const [columns, setColumns] = useState([]);
7	const [pending, setPending] = React.useState(true);
8
9	useEffect(() => {
10		const timeout = setTimeout(() => {
11			setColumns([
12				{
13					name: 'Name',
14					selector: row => row.name,
15					sortable: true,
16				},
17				{
18					name: 'Email',
19					selector: row => row.email,
20					sortable: true,
21				},
22				{
23					name: 'Address',
24					selector: row => row.address,
25					sortable: true,
26				},
27			]);
28			setPending(false);
29		}, 2000);
30		return () => clearTimeout(timeout);
31	}, []);
32
33	return <DataTable columns={columns} data={users} progressPending={pending} />;
34};
35
36export default {
37	title: 'Columns/Delayed',
38	Component: Delayed,
39};