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 { jsPDF } from 'jspdf'; //or use your library of choice here
10import autoTable from 'jspdf-autotable';
11import { data, type Person } from './makeData';
12
13const columnHelper = createMRTColumnHelper<Person>();
14
15const columns = [
16  columnHelper.accessor('id', {
17    header: 'ID',
18    size: 40,
19  }),
20  columnHelper.accessor('firstName', {
21    header: 'First Name',
22    size: 120,
23  }),
24  columnHelper.accessor('lastName', {
25    header: 'Last Name',
26    size: 120,
27  }),
28  columnHelper.accessor('company', {
29    header: 'Company',
30    size: 300,
31  }),
32  columnHelper.accessor('city', {
33    header: 'City',
34  }),
35  columnHelper.accessor('country', {
36    header: 'Country',
37    size: 220,
38  }),
39];
40
41const Example = () => {
42  const handleExportRows = (rows: MRT_Row<Person>[]) => {
43    const doc = new jsPDF();
44    const tableData = rows.map((row) => Object.values(row.original));
45    const tableHeaders = columns.map((c) => c.header);
46
47    autoTable(doc, {
48      head: [tableHeaders],
49      body: tableData,
50    });
51
52    doc.save('mrt-pdf-example.pdf');
53  };
54
55  const table = useMaterialReactTable({
56    columns,
57    data,
58    enableRowSelection: true,
59    columnFilterDisplayMode: 'popover',
60    paginationDisplayMode: 'pages',
61    positionToolbarAlertBanner: 'bottom',
62    renderTopToolbarCustomActions: ({ table }) => (
63      <Box
64        sx={{
65          display: 'flex',
66          gap: '16px',
67          padding: '8px',
68          flexWrap: 'wrap',
69        }}
70      >
71        <Button
72          disabled={table.getPrePaginationRowModel().rows.length === 0}
73          //export all rows, including from the next page, (still respects filtering and sorting)
74          onClick={() =>
75            handleExportRows(table.getPrePaginationRowModel().rows)
76          }
77          startIcon={<FileDownloadIcon />}
78        >
79          Export All Rows
80        </Button>
81        <Button
82          disabled={table.getRowModel().rows.length === 0}
83          //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
84          onClick={() => handleExportRows(table.getRowModel().rows)}
85          startIcon={<FileDownloadIcon />}
86        >
87          Export Page Rows
88        </Button>
89        <Button
90          disabled={
91            !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
92          }
93          //only export selected rows
94          onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
95          startIcon={<FileDownloadIcon />}
96        >
97          Export Selected Rows
98        </Button>
99      </Box>
100    ),
101  });
102
103  return <MaterialReactTable table={table} />;
104};
105
106export default Example;
107