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.
ID | First Name | Last Name | Company | City | Country | |
---|---|---|---|---|---|---|
1 | Elenora | Wilkinson | Feest - Reilly | Hertaland | Qatar | |
2 | Berneice | Feil | Deckow, Leuschke and Jaskolski | Millcreek | Nepal | |
3 | Frieda | Baumbach | Heidenreich, Grady and Durgan | Volkmanside | Croatia | |
4 | Zachery | Brown | Cormier - Skiles | Faychester | Saint Pierre and Miquelon | |
5 | Kendra | Bins | Wehner - Wilderman | New Valentin | Senegal | |
6 | Lysanne | Fisher | Schmidt LLC | Malachitown | Costa Rica | |
7 | Garrick | Ryan | Ryan - Buckridge | East Pearl | Cocos (Keeling) Islands | |
8 | Hollis | Medhurst | Quitzon Group | West Sienna | Papua New Guinea | |
9 | Arlo | Buckridge | Konopelski - Spinka | Chino | Congo | |
10 | Rickie | Auer | Lehner - Walsh | Nyahfield | Sudan |
10
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 here10import autoTable from 'jspdf-autotable';11import { data, type Person } from './makeData';1213const columnHelper = createMRTColumnHelper<Person>();1415const 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];4041const 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);4647 autoTable(doc, {48 head: [tableHeaders],49 body: tableData,50 });5152 doc.save('mrt-pdf-example.pdf');53 };5455 const table = useMaterialReactTable({56 columns,57 data,58 enableRowSelection: true,59 columnFilterDisplayMode: 'popover',60 paginationDisplayMode: 'pages',61 positionToolbarAlertBanner: 'bottom',62 renderTopToolbarCustomActions: ({ table }) => (63 <Box64 sx={{65 display: 'flex',66 gap: '16px',67 padding: '8px',68 flexWrap: 'wrap',69 }}70 >71 <Button72 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 Rows80 </Button>81 <Button82 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 Rows88 </Button>89 <Button90 disabled={91 !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()92 }93 //only export selected rows94 onClick={() => handleExportRows(table.getSelectedRowModel().rows)}95 startIcon={<FileDownloadIcon />}96 >97 Export Selected Rows98 </Button>99 </Box>100 ),101 });102103 return <MaterialReactTable table={table} />;104};105106export default Example;107
View Extra Storybook Examples