Material React Table

1import React, { useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { Person } from './makeData';
4
5const Example = () => {
6  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7    //column definitions...
8    () => [
9      {
10        accessorKey: 'firstName',
11        header: 'First Name',
12      },
13      {
14        accessorKey: 'lastName',
15        header: 'Last Name',
16      },
17      {
18        accessorKey: 'email',
19        header: 'Email',
20      },
21      {
22        accessorKey: 'city',
23        header: 'City',
24      },
25    ],
26    [],
27    
28  );
29
30  return (
31    <MaterialReactTable
32      columns={columns}
33      data={[]}
34      state={{ isLoading: true }}
35    />
36  );
37};
38
39export default Example;
40

1import React, { useEffect, useMemo, useState } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { data, Person } from './makeData';
4import { Button } from '@mui/material';
5
6const Example = () => {
7  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8    //column definitions...
9    () => [
10      {
11        accessorKey: 'firstName',
12        header: 'First Name',
13      },
14      {
15        accessorKey: 'lastName',
16        header: 'Last Name',
17      },
18      {
19        accessorKey: 'email',
20        header: 'Email',
21      },
22      {
23        accessorKey: 'city',
24        header: 'City',
25      },
26    ],
27    [],
28    
29  );
30
31  const [progress, setProgress] = useState(0);
32
33  //simulate random progress for demo purposes
34  useEffect(() => {
35    const interval = setInterval(() => {
36      setProgress((oldProgress) => {
37        const newProgress = Math.random() * 20;
38        return Math.min(oldProgress + newProgress, 100);
39      });
40    }, 1000);
41    return () => clearInterval(interval);
42  }, []);
43
44  return (
45    <MaterialReactTable
46      columns={columns}
47      data={data}
48      muiLinearProgressProps={({ isTopToolbar }) => ({
49        color: 'secondary',
50        variant: 'determinate', //if you want to show exact progress value
51        value: progress, //value between 0 and 100
52        sx: {
53          display: isTopToolbar ? 'block' : 'none', //hide bottom progress bar
54        },
55      })}
56      renderTopToolbarCustomActions={() => (
57        <Button onClick={() => setProgress(0)} variant="contained">
58          Reset
59        </Button>
60      )}
61      state={{ showProgressBars: true }}
62    />
63  );
64};
65
66export default Example;
67

1import React, { useMemo, useState } from 'react';
2import MaterialReactTable, {
3  MRT_ColumnDef,
4  MRT_ColumnFiltersState,
5  MRT_PaginationState,
6  MRT_SortingState,
7} from 'material-react-table';
8import { IconButton, Tooltip } from '@mui/material';
9import RefreshIcon from '@mui/icons-material/Refresh';
10import {
11  QueryClient,
12  QueryClientProvider,
13  useQuery,
14} from '@tanstack/react-query';
15
16type UserApiResponse = {
17  data: Array<User>;
18  meta: {
19    totalRowCount: number;
20  };
21};
22
23type User = {
24  firstName: string;
25  lastName: string;
26  address: string;
27  state: string;
28  phoneNumber: string;
29};
30
31const Example = () => {
32  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
33    [],
34  );
35  const [globalFilter, setGlobalFilter] = useState('');
36  const [sorting, setSorting] = useState<MRT_SortingState>([]);
37  const [pagination, setPagination] = useState<MRT_PaginationState>({
38    pageIndex: 0,
39    pageSize: 10,
40  });
41
42  const { data, isError, isFetching, isLoading, refetch } =
43    useQuery<UserApiResponse>({
44      queryKey: [
45        'table-data',
46        columnFilters, //refetch when columnFilters changes
47        globalFilter, //refetch when globalFilter changes
48        pagination.pageIndex, //refetch when pagination.pageIndex changes
49        pagination.pageSize, //refetch when pagination.pageSize changes
50        sorting, //refetch when sorting changes
51      ],
52      queryFn: async () => {
53        const fetchURL = new URL(
54          '/api/data',
55          process.env.NODE_ENV === 'production'
56            ? 'https://www.material-react-table.com'
57            : 'http://localhost:3000',
58        );
59        fetchURL.searchParams.set(
60          'start',
61          `${pagination.pageIndex * pagination.pageSize}`,
62        );
63        fetchURL.searchParams.set('size', `${pagination.pageSize}`);
64        fetchURL.searchParams.set(
65          'filters',
66          JSON.stringify(columnFilters ?? []),
67        );
68        fetchURL.searchParams.set('globalFilter', globalFilter ?? '');
69        fetchURL.searchParams.set('sorting', JSON.stringify(sorting ?? []));
70
71        const response = await fetch(fetchURL.href);
72        const json = (await response.json()) as UserApiResponse;
73        return json;
74      },
75      keepPreviousData: true,
76    });
77
78  const columns = useMemo<MRT_ColumnDef<User>[]>(
79    () => [
80      {
81        accessorKey: 'firstName',
82        header: 'First Name',
83      },
84      {
85        accessorKey: 'lastName',
86        header: 'Last Name',
87      },
88      {
89        accessorKey: 'address',
90        header: 'Address',
91      },
92      {
93        accessorKey: 'state',
94        header: 'State',
95      },
96      {
97        accessorKey: 'phoneNumber',
98        header: 'Phone Number',
99      },
100    ],
101    [],
102  );
103
104  return (
105    <MaterialReactTable
106      columns={columns}
107      data={data?.data ?? []} //data is undefined on first render
108      initialState={{ showColumnFilters: true }}
109      manualFiltering
110      manualPagination
111      manualSorting
112      muiToolbarAlertBannerProps={
113        isError
114          ? {
115              color: 'error',
116              children: 'Error loading data',
117            }
118          : undefined
119      }
120      onColumnFiltersChange={setColumnFilters}
121      onGlobalFilterChange={setGlobalFilter}
122      onPaginationChange={setPagination}
123      onSortingChange={setSorting}
124      renderTopToolbarCustomActions={() => (
125        <Tooltip arrow title="Refresh Data">
126          <IconButton onClick={() => refetch()}>
127            <RefreshIcon />
128          </IconButton>
129        </Tooltip>
130      )}
131      rowCount={data?.meta?.totalRowCount ?? 0}
132      state={{
133        columnFilters,
134        globalFilter,
135        isLoading,
136        pagination,
137        showAlertBanner: isError,
138        showProgressBars: isFetching,
139        sorting,
140      }}
141    />
142  );
143};
144
145const queryClient = new QueryClient();
146
147const ExampleWithReactQueryProvider = () => (
148  <QueryClientProvider client={queryClient}>
149    <Example />
150  </QueryClientProvider>
151);
152
153export default ExampleWithReactQueryProvider;
154