MRT logoMaterial React Table

PDF Export Example

Material React Table does not have a data exporting feature built-in. However, you can easily integrate your own exporting features.

In the example below, jspdf and jspdf-autotable are connected to some export buttons in the top toolbar to export table rows to a PDF file that can be downloaded.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
1ElenoraWilkinsonFeest - ReillyHertalandQatar
2BerneiceFeilDeckow, Leuschke and JaskolskiMillcreekNepal
3FriedaBaumbachHeidenreich, Grady and DurganVolkmansideCroatia
4ZacheryBrownCormier - SkilesFaychesterSaint Pierre and Miquelon
5KendraBinsWehner - WildermanNew ValentinSenegal
6LysanneFisherSchmidt LLCMalachitownCosta Rica
7GarrickRyanRyan - BuckridgeEast PearlCocos (Keeling) Islands
8HollisMedhurstQuitzon GroupWest SiennaPapua New Guinea
9ArloBuckridgeKonopelski - SpinkaChinoCongo
10RickieAuerLehner - WalshNyahfieldSudan

Source Code

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

View Extra Storybook Examples