Material React Table

1import React, { useMemo, useState } from 'react';
2import MaterialReactTable from 'material-react-table';
3import {
4  QueryClient,
5  QueryClientProvider,
6  useQuery,
7} from '@tanstack/react-query';
8import axios from 'axios';
9
10const Example = () => {
11  const [columnFilters, setColumnFilters] = useState([]);
12  const [globalFilter, setGlobalFilter] = useState('');
13  const [sorting, setSorting] = useState([]);
14  const [pagination, setPagination] = useState({
15    pageIndex: 0,
16    pageSize: 10,
17  });
18
19  const { data, isError, isFetching, isLoading } = useQuery(
20    [
21      'table-data',
22      columnFilters,
23      globalFilter,
24      pagination.pageIndex,
25      pagination.pageSize,
26      sorting,
27    ],
28    async () => {
29      const url = new URL(
30        '/api/data',
31        process.env.NODE_ENV === 'production'
32          ? 'https://www.material-react-table.com'
33          : 'http://localhost:3000',
34      );
35      url.searchParams.set(
36        'start',
37        `${pagination.pageIndex * pagination.pageSize}`,
38      );
39      url.searchParams.set('size', `${pagination.pageSize}`);
40      url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
41      url.searchParams.set('globalFilter', globalFilter ?? '');
42      url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
43
44      const { data: axiosData } = await axios.get(url.href);
45      return axiosData;
46    },
47    { keepPreviousData: true },
48  );
49
50  const columns = useMemo(
51    () => [
52      {
53        accessorKey: 'firstName',
54        header: 'First Name',
55      },
56      {
57        accessorKey: 'lastName',
58        header: 'Last Name',
59      },
60      {
61        accessorKey: 'address',
62        header: 'Address',
63      },
64      {
65        accessorKey: 'state',
66        header: 'State',
67      },
68      {
69        accessorKey: 'phoneNumber',
70        header: 'Phone Number',
71      },
72    ],
73    [],
74  );
75
76  return (
77    <MaterialReactTable
78      columns={columns}
79      data={data?.data ?? []}
80      initialState={{ showColumnFilters: true }}
81      manualFiltering
82      manualPagination
83      manualSorting
84      muiToolbarAlertBannerProps={
85        isError
86          ? {
87              color: 'error',
88              children: 'Error loading data',
89            }
90          : undefined
91      }
92      onColumnFiltersChange={setColumnFilters}
93      onGlobalFilterChange={setGlobalFilter}
94      onPaginationChange={setPagination}
95      onSortingChange={setSorting}
96      rowCount={data?.meta?.totalRowCount ?? 0}
97      state={{
98        columnFilters,
99        globalFilter,
100        isLoading,
101        pagination,
102        showAlertBanner: isError,
103        showProgressBars: isFetching,
104        sorting,
105      }}
106    />
107  );
108};
109
110const queryClient = new QueryClient();
111
112const ExampleWithReactQueryProvider = () => (
113  <QueryClientProvider client={queryClient}>
114    <Example />
115  </QueryClientProvider>
116);
117
118export default ExampleWithReactQueryProvider;
119