Material React Table

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