1import React, { useState, useEffect } from 'react';
2import doc from './remote.mdx';
3import axios from 'axios';
4import DataTable from '../../../src/index';
5
6const columns = [
7	{
8		name: 'First Name',
9		selector: row => row.first_name,
10		sortable: true,
11	},
12	{
13		name: 'Last Name',
14		selector: row => row.last_name,
15		sortable: true,
16	},
17	{
18		name: 'Email',
19		selector: row => row.email,
20		sortable: true,
21	},
22];
23
24export const Remote = () => {
25	const [data, setData] = useState([]);
26	const [loading, setLoading] = useState(false);
27	const [totalRows, setTotalRows] = useState(0);
28	const [perPage, setPerPage] = useState(10);
29
30	const fetchUsers = async page => {
31		setLoading(true);
32
33		const response = await axios.get(`https://reqres.in/api/users?page=${page}&per_page=${perPage}&delay=1`);
34
35		setData(response.data.data);
36		setTotalRows(response.data.total);
37		setLoading(false);
38	};
39
40	const handlePageChange = page => {
41		fetchUsers(page);
42	};
43
44	const handlePerRowsChange = async (newPerPage, page) => {
45		setLoading(true);
46
47		const response = await axios.get(`https://reqres.in/api/users?page=${page}&per_page=${newPerPage}&delay=1`);
48
49		setData(response.data.data);
50		setPerPage(newPerPage);
51		setLoading(false);
52	};
53
54	useEffect(() => {
55		fetchUsers(1); // fetch page 1 of users
56		
57	}, []);
58
59	return (
60		<DataTable
61			title="Users"
62			columns={columns}
63			data={data}
64			progressPending={loading}
65			pagination
66			paginationServer
67			paginationTotalRows={totalRows}
68			onChangeRowsPerPage={handlePerRowsChange}
69			onChangePage={handlePageChange}
70		/>
71	);
72};
73
74export default {
75	title: 'Pagination/Remote',
76	component: Remote,
77	parameters: {
78		docs: {
79			page: doc,
80		},
81	},
82};