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} from 'material-react-table';
10
11type UserApiResponse = {
12  data: Array<User>;
13  meta: {
14    totalRowCount: number;
15  };
16};
17
18type User = {
19  firstName: string;
20  lastName: string;
21  address: string;
22  state: string;
23  phoneNumber: string;
24};
25
26const Example = () => {
27  //data and fetching state
28  const [data, setData] = useState<User[]>([]);
29  const [isError, setIsError] = useState(false);
30  const [isLoading, setIsLoading] = useState(false);
31  const [isRefetching, setIsRefetching] = useState(false);
32  const [rowCount, setRowCount] = useState(0);
33
34  //table state
35  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
36    [],
37  );
38  const [globalFilter, setGlobalFilter] = useState('');
39  const [sorting, setSorting] = useState<MRT_SortingState>([]);
40  const [pagination, setPagination] = useState<MRT_PaginationState>({
41    pageIndex: 0,
42    pageSize: 10,
43  });
44
45  //if you want to avoid useEffect, look at the React Query example instead
46  useEffect(() => {
47    const fetchData = async () => {
48      if (!data.length) {
49        setIsLoading(true);
50      } else {
51        setIsRefetching(true);
52      }
53
54      const url = new URL(
55        '/api/data',
56        process.env.NODE_ENV === 'production'
57          ? 'https://www.material-react-table.com'
58          : 'http://localhost:3000',
59      );
60      url.searchParams.set(
61        'start',
62        `${pagination.pageIndex * pagination.pageSize}`,
63      );
64      url.searchParams.set('size', `${pagination.pageSize}`);
65      url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
66      url.searchParams.set('globalFilter', globalFilter ?? '');
67      url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
68
69      try {
70        const response = await fetch(url.href);
71        const json = (await response.json()) as UserApiResponse;
72        setData(json.data);
73        setRowCount(json.meta.totalRowCount);
74      } catch (error) {
75        setIsError(true);
76        console.error(error);
77        return;
78      }
79      setIsError(false);
80      setIsLoading(false);
81      setIsRefetching(false);
82    };
83    fetchData();
84    // eslint-disable-next-line react-hooks/exhaustive-deps
85  }, [
86    columnFilters, //re-fetch when column filters change
87    globalFilter, //re-fetch when global filter changes
88    pagination.pageIndex, //re-fetch when page index changes
89    pagination.pageSize, //re-fetch when page size changes
90    sorting, //re-fetch when sorting changes
91  ]);
92
93  const columns = useMemo<MRT_ColumnDef<User>[]>(
94    () => [
95      {
96        accessorKey: 'firstName',
97        header: 'First Name',
98      },
99      //column definitions...
100      {
101        accessorKey: 'lastName',
102        header: 'Last Name',
103      },
104      {
105        accessorKey: 'address',
106        header: 'Address',
107      },
108      {
109        accessorKey: 'state',
110        header: 'State',
111      },
112      {
113        accessorKey: 'phoneNumber',
114        header: 'Phone Number',
115      },
116      
117    ],
118    [],
119  );
120
121  const table = useMaterialReactTable({
122    columns,
123    data,
124    enableRowSelection: true,
125    getRowId: (row) => row.phoneNumber,
126    initialState: { showColumnFilters: true },
127    manualFiltering: true,
128    manualPagination: true,
129    manualSorting: true,
130    muiToolbarAlertBannerProps: isError
131      ? {
132          color: 'error',
133          children: 'Error loading data',
134        }
135      : undefined,
136    onColumnFiltersChange: setColumnFilters,
137    onGlobalFilterChange: setGlobalFilter,
138    onPaginationChange: setPagination,
139    onSortingChange: setSorting,
140    rowCount,
141    state: {
142      columnFilters,
143      globalFilter,
144      isLoading,
145      pagination,
146      showAlertBanner: isError,
147      showProgressBars: isRefetching,
148      sorting,
149    },
150  });
151
152  return <MaterialReactTable table={table} />;
153};
154
155export default Example;
156