MRT logoMantine React Table

CSV Export Example

Mantine React Table does not have a data exporting feature built-in. However, you can easily integrate your own exporting features.
In the example below, export-to-csv is connected to some export buttons in the top toolbar to export table rows to a CSV file that can be downloaded.
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
1
import {
2
MantineReactTable,
3
useMantineReactTable,
4
type MRT_ColumnDef,
5
type MRT_Row,
6
} from 'mantine-react-table';
7
import { Box, Button } from '@mantine/core';
8
import { IconDownload } from '@tabler/icons-react';
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 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
44
const csvConfig = mkConfig({
45
fieldSeparator: ',',
46
decimalSeparator: '.',
47
useKeysAsHeaders: true,
48
});
49
50
const 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 = useMantineReactTable({
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
color="lightblue"
80
//export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
81
onClick={handleExportData}
82
leftIcon={<IconDownload />}
83
variant="filled"
84
>
85
Export All Data
86
</Button>
87
<Button
88
disabled={table.getPrePaginationRowModel().rows.length === 0}
89
//export all rows, including from the next page, (still respects filtering and sorting)
90
onClick={() =>
91
handleExportRows(table.getPrePaginationRowModel().rows)
92
}
93
leftIcon={<IconDownload />}
94
variant="filled"
95
>
96
Export All Rows
97
</Button>
98
<Button
99
disabled={table.getRowModel().rows.length === 0}
100
//export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
101
onClick={() => handleExportRows(table.getRowModel().rows)}
102
leftIcon={<IconDownload />}
103
variant="filled"
104
>
105
Export Page Rows
106
</Button>
107
<Button
108
disabled={
109
!table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
110
}
111
//only export selected rows
112
onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
113
leftIcon={<IconDownload />}
114
variant="filled"
115
>
116
Export Selected Rows
117
</Button>
118
</Box>
119
),
120
});
121
122
return <MantineReactTable table={table} />;
123
};
124
125
export default Example;
1
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
2
import { Box, Button } from '@mantine/core';
3
import { IconDownload } from '@tabler/icons-react';
4
import { mkConfig, generateCsv, download } from 'export-to-csv'; //or use your library of choice here
5
import { data } from './makeData';
6
7
//defining columns outside of the component is fine, is stable
8
const columns = [
9
{
10
accessorKey: 'id',
11
header: 'ID',
12
size: 40,
13
},
14
{
15
accessorKey: 'firstName',
16
header: 'First Name',
17
size: 120,
18
},
19
{
20
accessorKey: 'lastName',
21
header: 'Last Name',
22
size: 120,
23
},
24
{
25
accessorKey: 'company',
26
header: 'Company',
27
size: 300,
28
},
29
{
30
accessorKey: 'city',
31
header: 'City',
32
},
33
{
34
accessorKey: '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) => {
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 = useMantineReactTable({
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
color="lightblue"
76
//export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
77
onClick={handleExportData}
78
leftIcon={<IconDownload />}
79
variant="filled"
80
>
81
Export All Data
82
</Button>
83
<Button
84
disabled={table.getPrePaginationRowModel().rows.length === 0}
85
//export all rows, including from the next page, (still respects filtering and sorting)
86
onClick={() =>
87
handleExportRows(table.getPrePaginationRowModel().rows)
88
}
89
leftIcon={<IconDownload />}
90
variant="filled"
91
>
92
Export All Rows
93
</Button>
94
<Button
95
disabled={table.getRowModel().rows.length === 0}
96
//export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
97
onClick={() => handleExportRows(table.getRowModel().rows)}
98
leftIcon={<IconDownload />}
99
variant="filled"
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
leftIcon={<IconDownload />}
110
variant="filled"
111
>
112
Export Selected Rows
113
</Button>
114
</Box>
115
),
116
});
117
118
return <MantineReactTable table={table} />;
119
};
120
121
export default Example;
1
import {
2
MantineReactTable,
3
type MRT_ColumnDef,
4
type MRT_Row,
5
} from 'mantine-react-table';
6
import { Box, Button } from '@mantine/core';
7
import { IconDownload } from '@tabler/icons-react';
8
import { mkConfig, generateCsv, download } from 'export-to-csv'; //or use your library of choice here
9
import { data, type Person } from './makeData';
10
11
//defining columns outside of the component is fine, is stable
12
const 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
44
const csvConfig = mkConfig({
45
fieldSeparator: ',',
46
decimalSeparator: '.',
47
useKeysAsHeaders: true,
48
});
49
50
const 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
return (
63
<MantineReactTable
64
columns={columns}
65
data={data}
66
enableRowSelection
67
columnFilterDisplayMode="popover"
68
paginationDisplayMode="pages"
69
positionToolbarAlertBanner="bottom"
70
renderTopToolbarCustomActions={({ table }) => (
71
<Box
72
sx={{
73
display: 'flex',
74
gap: '16px',
75
padding: '8px',
76
flexWrap: 'wrap',
77
}}
78
>
79
<Button
80
color="lightblue"
81
//export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
82
onClick={handleExportData}
83
leftIcon={<IconDownload />}
84
variant="filled"
85
>
86
Export All Data
87
</Button>
88
<Button
89
disabled={table.getPrePaginationRowModel().rows.length === 0}
90
//export all rows, including from the next page, (still respects filtering and sorting)
91
onClick={() =>
92
handleExportRows(table.getPrePaginationRowModel().rows)
93
}
94
leftIcon={<IconDownload />}
95
variant="filled"
96
>
97
Export All Rows
98
</Button>
99
<Button
100
disabled={table.getRowModel().rows.length === 0}
101
//export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
102
onClick={() => handleExportRows(table.getRowModel().rows)}
103
leftIcon={<IconDownload />}
104
variant="filled"
105
>
106
Export Page Rows
107
</Button>
108
<Button
109
disabled={
110
!table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
111
}
112
//only export selected rows
113
onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
114
leftIcon={<IconDownload />}
115
variant="filled"
116
>
117
Export Selected Rows
118
</Button>
119
</Box>
120
)}
121
/>
122
);
123
};
124
125
export default Example;
View Extra Storybook Examples
You can help make these docs better! PRs are Welcome
Using Material-UI instead of Mantine?
Check out Material React Table