Material React Table

1import {
2  MaterialReactTable,
3  useMaterialReactTable,
4  type MRT_Row,
5  createMRTColumnHelper,
6} from 'material-react-table';
7import { Box, Button } from '@mui/material';
8import FileDownloadIcon from '@mui/icons-material/FileDownload';
9import { mkConfig, generateCsv, download } from 'export-to-csv'; //or use your library of choice here
10import { data, type Person } from './makeData';
11
12const columnHelper = createMRTColumnHelper<Person>();
13
14const columns = [
15  columnHelper.accessor('id', {
16    header: 'ID',
17    size: 40,
18  }),
19  columnHelper.accessor('firstName', {
20    header: 'First Name',
21    size: 120,
22  }),
23  columnHelper.accessor('lastName', {
24    header: 'Last Name',
25    size: 120,
26  }),
27  columnHelper.accessor('company', {
28    header: 'Company',
29    size: 300,
30  }),
31  columnHelper.accessor('city', {
32    header: 'City',
33  }),
34  columnHelper.accessor('country', {
35    header: 'Country',
36    size: 220,
37  }),
38];
39
40const csvConfig = mkConfig({
41  fieldSeparator: ',',
42  decimalSeparator: '.',
43  useKeysAsHeaders: true,
44});
45
46const Example = () => {
47  const handleExportRows = (rows: MRT_Row<Person>[]) => {
48    const rowData = rows.map((row) => row.original);
49    const csv = generateCsv(csvConfig)(rowData);
50    download(csvConfig)(csv);
51  };
52
53  const handleExportData = () => {
54    const csv = generateCsv(csvConfig)(data);
55    download(csvConfig)(csv);
56  };
57
58  const table = useMaterialReactTable({
59    columns,
60    data,
61    enableRowSelection: true,
62    columnFilterDisplayMode: 'popover',
63    paginationDisplayMode: 'pages',
64    positionToolbarAlertBanner: 'bottom',
65    renderTopToolbarCustomActions: ({ table }) => (
66      <Box
67        sx={{
68          display: 'flex',
69          gap: '16px',
70          padding: '8px',
71          flexWrap: 'wrap',
72        }}
73      >
74        <Button
75          //export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
76          onClick={handleExportData}
77          startIcon={<FileDownloadIcon />}
78        >
79          Export All Data
80        </Button>
81        <Button
82          disabled={table.getPrePaginationRowModel().rows.length === 0}
83          //export all rows, including from the next page, (still respects filtering and sorting)
84          onClick={() =>
85            handleExportRows(table.getPrePaginationRowModel().rows)
86          }
87          startIcon={<FileDownloadIcon />}
88        >
89          Export All Rows
90        </Button>
91        <Button
92          disabled={table.getRowModel().rows.length === 0}
93          //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
94          onClick={() => handleExportRows(table.getRowModel().rows)}
95          startIcon={<FileDownloadIcon />}
96        >
97          Export Page Rows
98        </Button>
99        <Button
100          disabled={
101            !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
102          }
103          //only export selected rows
104          onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
105          startIcon={<FileDownloadIcon />}
106        >
107          Export Selected Rows
108        </Button>
109      </Box>
110    ),
111  });
112
113  return <MaterialReactTable table={table} />;
114};
115
116export default Example;
117