Material React Table

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