MRT logoMaterial React Table

Data Export Example

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.


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

Rows per page

1-10 of 12

Source Code

1import React, { FC } from 'react';
2import MaterialReactTable, {
3 MRT_ColumnDef,
4 MRT_Row,
5} from 'material-react-table';
6import { Box, Button } from '@mui/material';
7import FileDownloadIcon from '@mui/icons-material/FileDownload';
8import { ExportToCsv } from 'export-to-csv'; //or use your library of choice here
9import { data, Person } from './makeData';
10
11//defining columns outside of the component is fine, is stable
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 csvOptions = {
45 fieldSeparator: ',',
46 quoteStrings: '"',
47 decimalSeparator: '.',
48 showLabels: true,
49 useBom: true,
50 useKeysAsHeaders: false,
51 headers: columns.map((c) => c.header),
52};
53
54const csvExporter = new ExportToCsv(csvOptions);
55
56const Example: FC = () => {
57 const handleExportRows = (rows: MRT_Row<Person>[]) => {
58 csvExporter.generateCsv(rows.map((row) => row.original));
59 };
60
61 const handleExportData = () => {
62 csvExporter.generateCsv(data);
63 };
64
65 return (
66 <MaterialReactTable
67 columns={columns}
68 data={data}
69 enableRowSelection
70 positionToolbarAlertBanner="bottom"
71 renderTopToolbarCustomActions={({ table }) => (
72 <Box
73 sx={{ display: 'flex', gap: '1rem', p: '0.5rem', flexWrap: 'wrap' }}
74 >
75 <Button
76 color="primary"
77 //export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
78 onClick={handleExportData}
79 startIcon={<FileDownloadIcon />}
80 variant="contained"
81 >
82 Export All Data
83 </Button>
84 <Button
85 disabled={table.getPrePaginationRowModel().rows.length === 0}
86 //export all rows, including from the next page, (still respects filtering and sorting)
87 onClick={() =>
88 handleExportRows(table.getPrePaginationRowModel().rows)
89 }
90 startIcon={<FileDownloadIcon />}
91 variant="contained"
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 variant="contained"
101 >
102 Export Page Rows
103 </Button>
104 <Button
105 disabled={
106 !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
107 }
108 //only export selected rows
109 onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
110 startIcon={<FileDownloadIcon />}
111 variant="contained"
112 >
113 Export Selected Rows
114 </Button>
115 </Box>
116 )}
117 />
118 );
119};
120
121export default Example;
122

View Extra Storybook Examples