Material React Table

1import {
2  MaterialReactTable,
3  useMaterialReactTable,
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 { mkConfig, generateCsv, download } from 'export-to-csv'; //or use your library of choice here
10import { data, type Person } from './makeData';
11
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 csvConfig = mkConfig({
45  fieldSeparator: ',',
46  decimalSeparator: '.',
47  useKeysAsHeaders: true,
48});
49
50const Example = () => {
51  const handleExportRows = (rows: MRT_Row<Person>[]) => {
52    const rowData = rows.map((row) => row.original);
53    const csv = generateCsv(csvConfig)(rowData);
54    download(csvConfig)(csv);
55  };
56
57  const handleExportData = () => {
58    const csv = generateCsv(csvConfig)(data);
59    download(csvConfig)(csv);
60  };
61
62  const table = useMaterialReactTable({
63    columns,
64    data,
65    enableRowSelection: true,
66    columnFilterDisplayMode: 'popover',
67    paginationDisplayMode: 'pages',
68    positionToolbarAlertBanner: 'bottom',
69    renderTopToolbarCustomActions: ({ table }) => (
70      <Box
71        sx={{
72          display: 'flex',
73          gap: '16px',
74          padding: '8px',
75          flexWrap: 'wrap',
76        }}
77      >
78        <Button
79          //export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
80          onClick={handleExportData}
81          startIcon={<FileDownloadIcon />}
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        >
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        >
101          Export Page Rows
102        </Button>
103        <Button
104          disabled={
105            !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
106          }
107          //only export selected rows
108          onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
109          startIcon={<FileDownloadIcon />}
110        >
111          Export Selected Rows
112        </Button>
113      </Box>
114    ),
115  });
116
117  return <MaterialReactTable table={table} />;
118};
119
120export default Example;
121