Material React Table

1import { useEffect, useMemo, useState } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6  type MRT_ColumnFiltersState,
7  type MRT_PaginationState,
8  type MRT_SortingState,
9  type MRT_ColumnOrderState,
10} from 'material-react-table';
11import { IconButton, Tooltip } from '@mui/material';
12import RefreshIcon from '@mui/icons-material/Refresh';
13import {
14  QueryClient,
15  QueryClientProvider,
16  keepPreviousData,
17  useQuery,
18} from '@tanstack/react-query'; //note: this is TanStack React Query V5
19
20//Your API response shape will probably be different. Knowing a total row count is important though.
21type UserApiResponse = {
22  data: Array<User>;
23  meta: {
24    totalRowCount: number;
25  };
26};
27
28type User = {
29  firstName: string;
30  lastName: string;
31  address: string;
32  state: string;
33  phoneNumber: string;
34  lastLogin: Date;
35};
36
37const columnNames = {
38  firstName: 'First Name',
39  lastName: 'Last Name',
40  address: 'Address',
41  state: 'State',
42  phoneNumber: 'Phone Number',
43  lastLogin: 'Last Login',
44} as const;
45
46const Example = () => {
47  //manage our own state for stuff we want to pass to the API
48  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
49    [],
50  );
51  const [globalFilter, setGlobalFilter] = useState('');
52  const [sorting, setSorting] = useState<MRT_SortingState>([]);
53  const [pagination, setPagination] = useState<MRT_PaginationState>({
54    pageIndex: 0,
55    pageSize: 10,
56  });
57
58  //if using dynamic columns that are loaded after table instance creation, we will need to manage the column order state ourselves
59  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>([]);
60
61  //consider storing this code in a custom hook (i.e useFetchUsers)
62  const {
63    data: { data = [], meta } = {}, //your data and api response will probably be different
64    isError,
65    isRefetching,
66    isLoading,
67    refetch,
68  } = useQuery<UserApiResponse>({
69    queryKey: [
70      'table-data',
71      columnFilters, //refetch when columnFilters changes
72      globalFilter, //refetch when globalFilter changes
73      pagination.pageIndex, //refetch when pagination.pageIndex changes
74      pagination.pageSize, //refetch when pagination.pageSize changes
75      sorting, //refetch when sorting changes
76    ],
77    queryFn: async () => {
78      await new Promise((resolve) => setTimeout(resolve, 1000)); //simulate network delay
79      const fetchURL = new URL(
80        '/api/data',
81        process.env.NODE_ENV === 'production'
82          ? 'https://www.material-react-table.com'
83          : 'http://localhost:3000',
84      );
85
86      //read our state and pass it to the API as query params
87      fetchURL.searchParams.set(
88        'start',
89        `${pagination.pageIndex * pagination.pageSize}`,
90      );
91      fetchURL.searchParams.set('size', `${pagination.pageSize}`);
92      fetchURL.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
93      fetchURL.searchParams.set('globalFilter', globalFilter ?? '');
94      fetchURL.searchParams.set('sorting', JSON.stringify(sorting ?? []));
95
96      //use whatever fetch library you want, fetch, axios, etc
97      const response = await fetch(fetchURL.href);
98      const json = (await response.json()) as UserApiResponse;
99      return json;
100    },
101    placeholderData: keepPreviousData, //don't go to 0 rows when refetching or paginating to next page
102  });
103
104  //create columns from data
105  const columns = useMemo<MRT_ColumnDef<User>[]>(
106    () =>
107      data.length
108        ? Object.keys(data[0]).map((columnId) => ({
109            header: columnNames[columnId as keyof User] ?? columnId,
110            accessorKey: columnId,
111            id: columnId,
112          }))
113        : [],
114    [data],
115  );
116
117  useEffect(() => {
118    //if using dynamic columns that are loaded after table instance creation, we will need to set the column order state ourselves
119    setColumnOrder(columns.map((column) => column.id!));
120  }, [columns]);
121
122  const table = useMaterialReactTable({
123    columns,
124    data,
125    initialState: { showColumnFilters: true },
126    manualFiltering: true, //turn off built-in client-side filtering
127    manualPagination: true, //turn off built-in client-side pagination
128    manualSorting: true, //turn off built-in client-side sorting
129    //give loading spinner somewhere to go while loading
130    muiTableBodyProps: {
131      children: isLoading ? (
132        <tr style={{ height: '200px' }}>
133          <td />
134        </tr>
135      ) : undefined,
136    },
137    muiToolbarAlertBannerProps: isError
138      ? {
139          color: 'error',
140          children: 'Error loading data',
141        }
142      : undefined,
143    onColumnFiltersChange: setColumnFilters,
144    onColumnOrderChange: setColumnOrder,
145    onGlobalFilterChange: setGlobalFilter,
146    onPaginationChange: setPagination,
147    onSortingChange: setSorting,
148    renderTopToolbarCustomActions: () => (
149      <Tooltip arrow title="Refresh Data">
150        <IconButton onClick={() => refetch()}>
151          <RefreshIcon />
152        </IconButton>
153      </Tooltip>
154    ),
155    rowCount: meta?.totalRowCount ?? 0,
156    state: {
157      columnFilters,
158      columnOrder,
159      globalFilter,
160      isLoading,
161      pagination,
162      showAlertBanner: isError,
163      showProgressBars: isRefetching,
164      sorting,
165    },
166  });
167
168  return <MaterialReactTable table={table} />;
169};
170
171const queryClient = new QueryClient();
172
173const ExampleWithReactQueryProvider = () => (
174  //App.tsx or AppProviders file. Don't just wrap this component with QueryClientProvider! Wrap your whole App!
175  <QueryClientProvider client={queryClient}>
176    <Example />
177  </QueryClientProvider>
178);
179
180export default ExampleWithReactQueryProvider;
181