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

View Extra Storybook Examples