Material React Table

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