Material React Table

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