Material React Table

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