Material React Table

1import { useMemo } from 'react';
2
3//MRT Imports
4import {
5  MaterialReactTable,
6  useMaterialReactTable,
7  type MRT_ColumnDef,
8  MRT_GlobalFilterTextField,
9  MRT_ToggleFiltersButton,
10} from 'material-react-table';
11
12//Material UI Imports
13import {
14  Box,
15  Button,
16  ListItemIcon,
17  MenuItem,
18  Typography,
19  lighten,
20} from '@mui/material';
21
22//Icons Imports
23import { AccountCircle, Send } from '@mui/icons-material';
24
25//Mock Data
26import { data } from './makeData';
27
28export type Employee = {
29  firstName: string;
30  lastName: string;
31  email: string;
32  jobTitle: string;
33  salary: number;
34  startDate: string;
35  signatureCatchPhrase: string;
36  avatar: string;
37};
38
39const Example = () => {
40  const columns = useMemo<MRT_ColumnDef<Employee>[]>(
41    () => [
42      {
43        id: 'employee', //id used to define `group` column
44        header: 'Employee',
45        columns: [
46          {
47            accessorFn: (row) => `${row.firstName} ${row.lastName}`, //accessorFn used to join multiple data into a single cell
48            id: 'name', //id is still required when using accessorFn instead of accessorKey
49            header: 'Name',
50            size: 250,
51            Cell: ({ renderedCellValue, row }) => (
52              <Box
53                sx={{
54                  display: 'flex',
55                  alignItems: 'center',
56                  gap: '1rem',
57                }}
58              >
59                <img
60                  alt="avatar"
61                  height={30}
62                  src={row.original.avatar}
63                  loading="lazy"
64                  style={{ borderRadius: '50%' }}
65                />
66                {/* using renderedCellValue instead of cell.getValue() preserves filter match highlighting */}
67                <span>{renderedCellValue}</span>
68              </Box>
69            ),
70          },
71          {
72            accessorKey: 'email', //accessorKey used to define `data` column. `id` gets set to accessorKey automatically
73            enableClickToCopy: true,
74            filterVariant: 'autocomplete',
75            header: 'Email',
76            size: 300,
77          },
78        ],
79      },
80      {
81        id: 'id',
82        header: 'Job Info',
83        columns: [
84          {
85            accessorKey: 'salary',
86            // filterVariant: 'range', //if not using filter modes feature, use this instead of filterFn
87            filterFn: 'between',
88            header: 'Salary',
89            size: 200,
90            //custom conditional format and styling
91            Cell: ({ cell }) => (
92              <Box
93                component="span"
94                sx={(theme) => ({
95                  backgroundColor:
96                    cell.getValue<number>() < 50_000
97                      ? theme.palette.error.dark
98                      : cell.getValue<number>() >= 50_000 &&
99                          cell.getValue<number>() < 75_000
100                        ? theme.palette.warning.dark
101                        : theme.palette.success.dark,
102                  borderRadius: '0.25rem',
103                  color: '#fff',
104                  maxWidth: '9ch',
105                  p: '0.25rem',
106                })}
107              >
108                {cell.getValue<number>()?.toLocaleString?.('en-US', {
109                  style: 'currency',
110                  currency: 'USD',
111                  minimumFractionDigits: 0,
112                  maximumFractionDigits: 0,
113                })}
114              </Box>
115            ),
116          },
117          {
118            accessorKey: 'jobTitle', //hey a simple column for once
119            header: 'Job Title',
120            size: 350,
121          },
122          {
123            accessorFn: (row) => new Date(row.startDate), //convert to Date for sorting and filtering
124            id: 'startDate',
125            header: 'Start Date',
126            filterVariant: 'date',
127            filterFn: 'lessThan',
128            sortingFn: 'datetime',
129            Cell: ({ cell }) => cell.getValue<Date>()?.toLocaleDateString(), //render Date as a string
130            Header: ({ column }) => <em>{column.columnDef.header}</em>, //custom header markup
131            muiFilterTextFieldProps: {
132              sx: {
133                minWidth: '250px',
134              },
135            },
136          },
137        ],
138      },
139    ],
140    [],
141  );
142
143  const table = useMaterialReactTable({
144    columns,
145    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
146    enableColumnFilterModes: true,
147    enableColumnOrdering: true,
148    enableGrouping: true,
149    enableColumnPinning: true,
150    enableFacetedValues: true,
151    enableRowActions: true,
152    enableRowSelection: true,
153    initialState: {
154      showColumnFilters: true,
155      showGlobalFilter: true,
156      columnPinning: {
157        left: ['mrt-row-expand', 'mrt-row-select'],
158        right: ['mrt-row-actions'],
159      },
160    },
161    paginationDisplayMode: 'pages',
162    positionToolbarAlertBanner: 'bottom',
163    muiSearchTextFieldProps: {
164      size: 'small',
165      variant: 'outlined',
166    },
167    muiPaginationProps: {
168      color: 'secondary',
169      rowsPerPageOptions: [10, 20, 30],
170      shape: 'rounded',
171      variant: 'outlined',
172    },
173    renderDetailPanel: ({ row }) => (
174      <Box
175        sx={{
176          alignItems: 'center',
177          display: 'flex',
178          justifyContent: 'space-around',
179          left: '30px',
180          maxWidth: '1000px',
181          position: 'sticky',
182          width: '100%',
183        }}
184      >
185        <img
186          alt="avatar"
187          height={200}
188          src={row.original.avatar}
189          loading="lazy"
190          style={{ borderRadius: '50%' }}
191        />
192        <Box sx={{ textAlign: 'center' }}>
193          <Typography variant="h4">Signature Catch Phrase:</Typography>
194          <Typography variant="h1">
195            &quot;{row.original.signatureCatchPhrase}&quot;
196          </Typography>
197        </Box>
198      </Box>
199    ),
200    renderRowActionMenuItems: ({ closeMenu }) => [
201      <MenuItem
202        key={0}
203        onClick={() => {
204          // View profile logic...
205          closeMenu();
206        }}
207        sx={{ m: 0 }}
208      >
209        <ListItemIcon>
210          <AccountCircle />
211        </ListItemIcon>
212        View Profile
213      </MenuItem>,
214      <MenuItem
215        key={1}
216        onClick={() => {
217          // Send email logic...
218          closeMenu();
219        }}
220        sx={{ m: 0 }}
221      >
222        <ListItemIcon>
223          <Send />
224        </ListItemIcon>
225        Send Email
226      </MenuItem>,
227    ],
228    renderTopToolbar: ({ table }) => {
229      const handleDeactivate = () => {
230        table.getSelectedRowModel().flatRows.map((row) => {
231          alert('deactivating ' + row.getValue('name'));
232        });
233      };
234
235      const handleActivate = () => {
236        table.getSelectedRowModel().flatRows.map((row) => {
237          alert('activating ' + row.getValue('name'));
238        });
239      };
240
241      const handleContact = () => {
242        table.getSelectedRowModel().flatRows.map((row) => {
243          alert('contact ' + row.getValue('name'));
244        });
245      };
246
247      return (
248        <Box
249          sx={(theme) => ({
250            backgroundColor: lighten(theme.palette.background.default, 0.05),
251            display: 'flex',
252            gap: '0.5rem',
253            p: '8px',
254            justifyContent: 'space-between',
255          })}
256        >
257          <Box sx={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
258            {/* import MRT sub-components */}
259            <MRT_GlobalFilterTextField table={table} />
260            <MRT_ToggleFiltersButton table={table} />
261          </Box>
262          <Box>
263            <Box sx={{ display: 'flex', gap: '0.5rem' }}>
264              <Button
265                color="error"
266                disabled={!table.getIsSomeRowsSelected()}
267                onClick={handleDeactivate}
268                variant="contained"
269              >
270                Deactivate
271              </Button>
272              <Button
273                color="success"
274                disabled={!table.getIsSomeRowsSelected()}
275                onClick={handleActivate}
276                variant="contained"
277              >
278                Activate
279              </Button>
280              <Button
281                color="info"
282                disabled={!table.getIsSomeRowsSelected()}
283                onClick={handleContact}
284                variant="contained"
285              >
286                Contact
287              </Button>
288            </Box>
289          </Box>
290        </Box>
291      );
292    },
293  });
294
295  return <MaterialReactTable table={table} />;
296};
297
298//Date Picker Imports - these should just be in your Context Provider
299import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
300import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
301
302const ExampleWithLocalizationProvider = () => (
303  //App.tsx or AppProviders file
304  <LocalizationProvider dateAdapter={AdapterDayjs}>
305    <Example />
306  </LocalizationProvider>
307);
308
309export default ExampleWithLocalizationProvider;
310