Material React Table

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { Box, Typography } from '@mui/material';
8import { data, type Person } from './makeData';
9
10const Example = () => {
11  const columns = useMemo<MRT_ColumnDef<Person>[]>(
12    //column definitions...
13    () => [
14      {
15        accessorKey: 'id',
16        header: 'ID',
17        size: 50,
18      },
19      {
20        accessorKey: 'firstName',
21        header: 'First Name',
22      },
23      {
24        accessorKey: 'middleName',
25        header: 'Middle Name',
26      },
27      {
28        accessorKey: 'lastName',
29        header: 'Last Name',
30      },
31    ],
32    [],
33    
34  );
35
36  const table = useMaterialReactTable({
37    columns,
38    data,
39    enableExpandAll: false, //disable expand all button
40    muiDetailPanelProps: () => ({
41      sx: (theme) => ({
42        backgroundColor:
43          theme.palette.mode === 'dark'
44            ? 'rgba(255,210,244,0.1)'
45            : 'rgba(0,0,0,0.1)',
46      }),
47    }),
48    //custom expand button rotation
49    muiExpandButtonProps: ({ row, table }) => ({
50      onClick: () => table.setExpanded({ [row.id]: !row.getIsExpanded() }), //only 1 detail panel open at a time
51      sx: {
52        transform: row.getIsExpanded() ? 'rotate(180deg)' : 'rotate(-90deg)',
53        transition: 'transform 0.2s',
54      },
55    }),
56    //conditionally render detail panel
57    renderDetailPanel: ({ row }) =>
58      row.original.address ? (
59        <Box
60          sx={{
61            display: 'grid',
62            margin: 'auto',
63            gridTemplateColumns: '1fr 1fr',
64            width: '100%',
65          }}
66        >
67          <Typography>Address: {row.original.address}</Typography>
68          <Typography>City: {row.original.city}</Typography>
69          <Typography>State: {row.original.state}</Typography>
70          <Typography>Country: {row.original.country}</Typography>
71        </Box>
72      ) : null,
73  });
74
75  return <MaterialReactTable table={table} />;
76};
77
78export default Example;
79

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { Box, Typography, useMediaQuery } from '@mui/material';
8import { data, type Person } from './makeData';
9
10const Example = () => {
11  const isMobile = useMediaQuery('(max-width: 720px)');
12
13  const columns = useMemo<MRT_ColumnDef<Person>[]>(
14    //column definitions...
15    () => [
16      {
17        accessorKey: 'id',
18        header: 'ID',
19        size: 50,
20      },
21      {
22        accessorKey: 'firstName',
23        header: 'First Name',
24      },
25      {
26        accessorKey: 'middleName',
27        header: 'Middle Name',
28      },
29      {
30        accessorKey: 'lastName',
31        header: 'Last Name',
32      },
33    ],
34    [],
35    
36  );
37
38  const table = useMaterialReactTable({
39    columns,
40    data,
41    // displayColumnDefOptions: { //built-in now in v2.6.0 when positionExpandColumn is 'last'
42    //   'mrt-row-expand': {
43    //     muiTableHeadCellProps: {
44    //       align: 'right',
45    //     },
46    //     muiTableBodyCellProps: {
47    //       align: 'right',
48    //     },
49    //   },
50    // },
51    enableColumnPinning: isMobile, //alternative
52    initialState: {
53      expanded: true,
54    },
55    state: {
56      columnPinning: isMobile ? { right: ['mrt-row-expand'] } : {}, //alternative
57    },
58    renderDetailPanel: ({ row }) => (
59      <Box
60        sx={{
61          display: 'grid',
62          margin: 'auto',
63          gridTemplateColumns: '1fr 1fr',
64          width: '100%',
65        }}
66      >
67        <Typography>Address: {row.original.address}</Typography>
68        <Typography>City: {row.original.city}</Typography>
69        <Typography>State: {row.original.state}</Typography>
70        <Typography>Country: {row.original.country}</Typography>
71      </Box>
72    ),
73    positionExpandColumn: 'last',
74  });
75
76  return <MaterialReactTable table={table} />;
77};
78
79export default Example;
80

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { useTheme } from '@mui/material/styles';
8import { LineChart } from '@mui/x-charts/LineChart';
9import { data, type Person } from './makeData';
10
11const Example = () => {
12  const theme = useTheme();
13
14  const columns = useMemo<MRT_ColumnDef<Person>[]>(
15    //column definitions...
16    () => [
17      {
18        accessorKey: 'id',
19        header: 'ID',
20        size: 50,
21      },
22      {
23        accessorKey: 'firstName',
24        header: 'First Name',
25      },
26      {
27        accessorKey: 'middleName',
28        header: 'Middle Name',
29      },
30      {
31        accessorKey: 'lastName',
32        header: 'Last Name',
33      },
34    ],
35    [],
36    
37  );
38
39  const table = useMaterialReactTable({
40    columns,
41    data,
42    initialState: { expanded: { 0: true } },
43    muiTableBodyRowProps: {
44      sx: {
45        '.Mui-TableBodyCell-DetailPanel': {
46          backgroundColor:
47            theme.palette.mode === 'dark'
48              ? theme.palette.grey[900]
49              : theme.palette.grey[100],
50        },
51      },
52    },
53    renderDetailPanel: ({ row }) => (
54      <LineChart
55        xAxis={[
56          {
57            data: row.original.gamesPlayed,
58            label: 'Games Played',
59            valueFormatter: (value) => `#${value}`,
60            tickLabelInterval: (value) => value % 1 === 0,
61          },
62        ]}
63        yAxis={[{ min: 0, max: 60 }]}
64        series={[
65          {
66            color: theme.palette.primary.dark,
67            data: row.original.points,
68            label: 'Points',
69          },
70          {
71            color: theme.palette.secondary.main,
72            data: row.original.assists,
73            label: 'Assists',
74          },
75          {
76            color: theme.palette.error.main,
77            data: row.original.turnovers,
78            label: 'Turnovers',
79          },
80        ]}
81        height={250}
82      />
83    ),
84  });
85
86  return <MaterialReactTable table={table} />;
87};
88
89export default Example;
90

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { Box, Typography } from '@mui/material';
8import { data, type Person } from './makeData';
9
10const Example = () => {
11  const columns = useMemo<MRT_ColumnDef<Person>[]>(
12    //column definitions...
13    () => [
14      {
15        accessorKey: 'firstName',
16        header: 'First Name',
17      },
18      {
19        accessorKey: 'lastName',
20        header: 'Last Name',
21      },
22      {
23        accessorKey: 'email',
24        header: 'Email',
25      },
26    ],
27    [],
28    
29  );
30
31  const table = useMaterialReactTable({
32    columns,
33    data,
34    enableBottomToolbar: false,
35    enablePagination: false,
36    enableRowVirtualization: true,
37    muiTableContainerProps: {
38      sx: {
39        maxHeight: '500px',
40      },
41    },
42    renderDetailPanel: ({ row }) => (
43      <Box
44        sx={{
45          display: 'grid',
46          margin: 'auto',
47          gridTemplateColumns: '1fr 1fr',
48          width: '100%',
49        }}
50      >
51        <Typography>Address: {row.original.address}</Typography>
52        <Typography>City: {row.original.city}</Typography>
53        <Typography>State: {row.original.state}</Typography>
54        <Typography>Country: {row.original.country}</Typography>
55      </Box>
56    ),
57    rowVirtualizerOptions: ({ table }) => {
58      const { density, expanded } = table.getState();
59      return {
60        //adjust to your needs
61        estimateSize: (index) =>
62          index % 2 === 1 //even rows are normal rows, odd rows are detail panels
63            ? //Estimate open detail panels as 80px tall, closed detail panels as 0px tall
64              expanded === true
65              ? 80
66              : 0
67            : //estimate normal row heights
68              density === 'compact'
69              ? 37
70              : density === 'comfortable'
71                ? 58
72                : 73,
73      };
74    },
75  });
76
77  return <MaterialReactTable table={table} />;
78};
79
80export default Example;
81

1import { lazy, Suspense, 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  type MRT_Row,
10} from 'material-react-table';
11import { Alert, CircularProgress, Stack } from '@mui/material';
12import AddIcon from '@mui/icons-material/Add';
13import MinusIcon from '@mui/icons-material/Remove';
14import {
15  QueryClient,
16  QueryClientProvider,
17  keepPreviousData,
18  useQuery,
19} from '@tanstack/react-query'; //note: this is TanStack React Query V5
20
21//Your API response shape will probably be different. Knowing a total row count is important though.
22type UserApiResponse = {
23  data: Array<User>;
24  meta: {
25    totalRowCount: number;
26  };
27};
28
29type User = {
30  firstName: string;
31  lastName: string;
32  address: string;
33  state: string;
34  phoneNumber: string;
35  lastLogin: Date;
36};
37
38type FullUserInfoApiResponse = FullUserInfo;
39
40type FullUserInfo = User & {
41  favoriteMusic: string;
42  favoriteSong: string;
43  quote: string;
44};
45
46const DetailPanel = ({ row }: { row: MRT_Row<User> }) => {
47  const {
48    data: userInfo,
49    isLoading,
50    isError,
51  } = useFetchUserInfo(
52    {
53      phoneNumber: row.id, //the row id is set to the user's phone number
54    },
55    {
56      enabled: row.getIsExpanded(),
57    },
58  );
59  if (isLoading) return <CircularProgress />;
60  if (isError) return <Alert severity="error">Error Loading User Info</Alert>;
61
62  const { favoriteMusic, favoriteSong, quote } = userInfo ?? {};
63
64  return (
65    <Stack gap="0.5rem" minHeight="00px">
66      <div>
67        <b>Favorite Music:</b> {favoriteMusic}
68      </div>
69      <div>
70        <b>Favorite Song:</b> {favoriteSong}
71      </div>
72      <div>
73        <b>Quote:</b> {quote}
74      </div>
75    </Stack>
76  );
77};
78
79const Example = () => {
80  //manage our own state for stuff we want to pass to the API
81  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
82    [],
83  );
84  const [globalFilter, setGlobalFilter] = useState('');
85  const [sorting, setSorting] = useState<MRT_SortingState>([]);
86  const [pagination, setPagination] = useState<MRT_PaginationState>({
87    pageIndex: 0,
88    pageSize: 5,
89  });
90
91  const {
92    data: { data = [], meta } = {},
93    isError,
94    isRefetching,
95    isLoading,
96  } = useFetchUsers({
97    columnFilters,
98    globalFilter,
99    pagination,
100    sorting,
101  });
102
103  const columns = useMemo<MRT_ColumnDef<User>[]>(
104    //column definitions...
105    () => [
106      {
107        accessorKey: 'firstName',
108        header: 'First Name',
109      },
110      {
111        accessorKey: 'lastName',
112        header: 'Last Name',
113      },
114      {
115        accessorKey: 'address',
116        header: 'Address',
117      },
118      {
119        accessorKey: 'state',
120        header: 'State',
121      },
122      {
123        accessorKey: 'phoneNumber',
124        header: 'Phone Number',
125      },
126    ],
127    [],
128    
129  );
130
131  const table = useMaterialReactTable({
132    columns,
133    data,
134    getRowId: (row) => row.phoneNumber,
135    manualFiltering: true, //turn off built-in client-side filtering
136    manualPagination: true, //turn off built-in client-side pagination
137    manualSorting: true, //turn off built-in client-side sorting
138    muiExpandButtonProps: ({ row }) => ({
139      children: row.getIsExpanded() ? <MinusIcon /> : <AddIcon />,
140    }),
141    muiToolbarAlertBannerProps: isError
142      ? {
143          color: 'error',
144          children: 'Error loading data',
145        }
146      : undefined,
147    onColumnFiltersChange: setColumnFilters,
148    onGlobalFilterChange: setGlobalFilter,
149    onPaginationChange: setPagination,
150    onSortingChange: setSorting,
151    renderDetailPanel: ({ row }) => <DetailPanel row={row} />,
152    rowCount: meta?.totalRowCount ?? 0,
153    state: {
154      columnFilters,
155      globalFilter,
156      isLoading,
157      pagination,
158      showAlertBanner: isError,
159      showProgressBars: isRefetching,
160      sorting,
161    },
162  });
163
164  return <MaterialReactTable table={table} />;
165};
166
167//react query setup in App.tsx
168const ReactQueryDevtoolsProduction = lazy(() =>
169  import('@tanstack/react-query-devtools/build/modern/production.js').then(
170    (d) => ({
171      default: d.ReactQueryDevtools,
172    }),
173  ),
174);
175
176const queryClient = new QueryClient();
177
178export default function App() {
179  return (
180    <QueryClientProvider client={queryClient}>
181      <Example />
182      <Suspense fallback={null}>
183        <ReactQueryDevtoolsProduction />
184      </Suspense>
185    </QueryClientProvider>
186  );
187}
188
189//fetch user hook
190const useFetchUsers = ({
191  columnFilters,
192  globalFilter,
193  pagination,
194  sorting,
195}: {
196  columnFilters: MRT_ColumnFiltersState;
197  globalFilter: string;
198  pagination: MRT_PaginationState;
199  sorting: MRT_SortingState;
200}) => {
201  return useQuery<UserApiResponse>({
202    queryKey: [
203      'users', //give a unique key for this query
204      columnFilters, //refetch when columnFilters changes
205      globalFilter, //refetch when globalFilter changes
206      pagination.pageIndex, //refetch when pagination.pageIndex changes
207      pagination.pageSize, //refetch when pagination.pageSize changes
208      sorting, //refetch when sorting changes
209    ],
210    queryFn: async () => {
211      const fetchURL = new URL('/api/data', location.origin);
212
213      //read our state and pass it to the API as query params
214      fetchURL.searchParams.set(
215        'start',
216        `${pagination.pageIndex * pagination.pageSize}`,
217      );
218      fetchURL.searchParams.set('size', `${pagination.pageSize}`);
219      fetchURL.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
220      fetchURL.searchParams.set('globalFilter', globalFilter ?? '');
221      fetchURL.searchParams.set('sorting', JSON.stringify(sorting ?? []));
222
223      //use whatever fetch library you want, fetch, axios, etc
224      const response = await fetch(fetchURL.href);
225      const json = (await response.json()) as UserApiResponse;
226      return json;
227    },
228    placeholderData: keepPreviousData, //don't go to 0 rows when refetching or paginating to next page
229  });
230};
231
232//fetch more user info hook
233const useFetchUserInfo = (
234  params: { phoneNumber: string },
235  options: { enabled: boolean },
236) => {
237  return useQuery<FullUserInfoApiResponse>({
238    enabled: options.enabled, //only fetch when the detail panel is opened
239    staleTime: 60 * 1000, //don't refetch for 60 seconds
240    queryKey: ['user', params.phoneNumber], //give a unique key for this query for each user fetch
241    queryFn: async () => {
242      const fetchURL = new URL(
243        `/api/moredata/${params.phoneNumber
244          .replaceAll('-', '')
245          .replaceAll('.', '')
246          .replaceAll('(', '')
247          .replaceAll(')', '')}`,
248        location.origin,
249      );
250
251      //use whatever fetch library you want, fetch, axios, etc
252      const response = await fetch(fetchURL.href);
253      const json = (await response.json()) as FullUserInfoApiResponse;
254      return json;
255    },
256  });
257};
258