MRT logoMaterial React Table

CSV 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.

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 { mkConfig, generateCsv, download } from 'export-to-csv'; //or use your library of choice here
10import { data, type Person } from './makeData';
11
12const columnHelper = createMRTColumnHelper<Person>();
13
14const 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
40const csvConfig = mkConfig({
41 fieldSeparator: ',',
42 decimalSeparator: '.',
43 useKeysAsHeaders: true,
44});
45
46const Example = () => {
47 const handleExportRows = (rows: MRT_Row<Person>[]) => {
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
116export default Example;
117

View Extra Storybook Examples