Material React Table

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

In the example below, export-to-csv is connected to some export buttons in the top toolbar. If you need to export in Excel or PDF format, there are a variety of NPM packages that can be used to export in these formats.

Export to CSV Export to PDF More Examples

Demo

Open Code Sandbox

Drop to group by

Export All Data

Export All Rows

Export Page Rows

Export Selected Rows

First Name Rows per page This example is written for MRT V3.

If your app is still using MRT V1, either Upgrade to MRT V3 or use the V1 Docs instead. (useMaterialReactTable only exists in V2 and V3)

Source Code

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

View Extra Storybook Examples

Suggest an Edit for this page on GitHub

Using Mantine instead of Material UI?
Check out Mantine React Table
Plausible Analytics for this page

© 2024 Kevin Van Cott