Material React Table

1import { useMemo, useState } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6  type MRT_PaginationState,
7  type MRT_SortingState,
8  type MRT_ExpandedState,
9} from 'material-react-table';
10import {
11  QueryClient,
12  QueryClientProvider,
13  keepPreviousData,
14  useQuery,
15} from '@tanstack/react-query'; //note: this is TanStack React Query V5
16
17//Your API response shape will probably be different. Knowing a total row count is important though.
18type UserApiResponse = {
19  data: Array<User>;
20  meta: {
21    totalRowCount: number;
22  };
23};
24
25type User = {
26  id: string;
27  firstName: string;
28  lastName: string;
29  email: string;
30  state: string;
31  managerId: string | null; //row's parent row id
32  subordinateIds: string[]; //or some type of boolean that indicates that there are sub-rows
33};
34
35const columns: MRT_ColumnDef<User>[] = [
36  //column definitions...
37  {
38    accessorKey: 'firstName',
39    header: 'First Name',
40  },
41  {
42    accessorKey: 'lastName',
43    header: 'Last Name',
44  },
45  {
46    accessorKey: 'email',
47    header: 'Email',
48  },
49  {
50    accessorKey: 'state',
51    header: 'State',
52  },
53  
54];
55
56const Example = () => {
57  const [sorting, setSorting] = useState<MRT_SortingState>([]);
58  const [pagination, setPagination] = useState<MRT_PaginationState>({
59    pageIndex: 0,
60    pageSize: 10,
61  });
62  const [expanded, setExpanded] = useState<MRT_ExpandedState>({}); //Record<string, boolean> | true
63
64  //which rows have sub-rows expanded and need their direct sub-rows to be included in the API call
65  const expandedRowIds: string[] | 'all' = useMemo(
66    () =>
67      expanded === true
68        ? 'all'
69        : Object.entries(expanded)
70            .filter(([_managerId, isExpanded]) => isExpanded)
71            .map(([managerId]) => managerId),
72    [expanded],
73  );
74
75  const {
76    data: { data = [], meta } = {},
77    isError,
78    isRefetching,
79    isLoading,
80  } = useFetchUsers({
81    pagination,
82    sorting,
83    expandedRowIds,
84  });
85
86  //get data for root rows only (top of the tree data)
87  const rootData = useMemo(() => data.filter((r) => !r.managerId), [data]);
88
89  const table = useMaterialReactTable({
90    columns,
91    data: rootData,
92    enableExpanding: true, //enable expanding column
93    enableFilters: false,
94    //tell MRT which rows have additional sub-rows that can be fetched
95    getRowCanExpand: (row) => !!row.original.subordinateIds.length, //just some type of boolean
96    //identify rows by the user's id
97    getRowId: (row) => row.id,
98    //if data is delivered in a flat array, MRT can convert it to a tree structure
99    //though it's usually better if the API can construct the nested structure before this point
100    getSubRows: (row) => data.filter((r) => r.managerId === row.id), //parse flat array into tree structure
101    // paginateExpandedRows: false, //the back-end in this example is acting as if this option is false
102    manualPagination: true, //turn off built-in client-side pagination
103    manualSorting: true, //turn off built-in client-side sorting
104    muiToolbarAlertBannerProps: isError
105      ? {
106          color: 'error',
107          children: 'Error loading data',
108        }
109      : undefined,
110    onExpandedChange: setExpanded,
111    onPaginationChange: setPagination,
112    onSortingChange: setSorting,
113    rowCount: meta?.totalRowCount ?? 0,
114    state: {
115      expanded,
116      isLoading,
117      pagination,
118      showAlertBanner: isError,
119      showProgressBars: isRefetching,
120      sorting,
121    },
122  });
123
124  return <MaterialReactTable table={table} />;
125};
126
127const queryClient = new QueryClient();
128
129const ExampleWithReactQueryProvider = () => (
130  //App.tsx or AppProviders file. Don't just wrap this component with QueryClientProvider! Wrap your whole App!
131  <QueryClientProvider client={queryClient}>
132    <Example />
133  </QueryClientProvider>
134);
135
136export default ExampleWithReactQueryProvider;
137
138//fetch user hook
139const useFetchUsers = ({
140  pagination,
141  sorting,
142  expandedRowIds,
143}: {
144  pagination: MRT_PaginationState;
145  sorting: MRT_SortingState;
146  expandedRowIds: string[] | 'all';
147}) => {
148  return useQuery<UserApiResponse>({
149    queryKey: [
150      'users', //give a unique key for this query
151      pagination.pageIndex, //refetch when pagination.pageIndex changes
152      pagination.pageSize, //refetch when pagination.pageSize changes
153      sorting, //refetch when sorting changes
154      expandedRowIds,
155    ],
156    queryFn: async () => {
157      const fetchURL = new URL('/api/treedata', location.origin);
158
159      //read our state and pass it to the API as query params
160      fetchURL.searchParams.set(
161        'start',
162        `${pagination.pageIndex * pagination.pageSize}`,
163      );
164      fetchURL.searchParams.set('size', `${pagination.pageSize}`);
165      fetchURL.searchParams.set('sorting', JSON.stringify(sorting ?? []));
166      fetchURL.searchParams.set(
167        'expandedRowIds',
168        expandedRowIds === 'all' ? 'all' : JSON.stringify(expandedRowIds ?? []),
169      );
170
171      //use whatever fetch library you want, fetch, axios, etc
172      const response = await fetch(fetchURL.href);
173      const json = (await response.json()) as UserApiResponse;
174      return json;
175    },
176    placeholderData: keepPreviousData, //don't go to 0 rows when refetching or paginating to next page
177  });
178};
179