Data Exporting Mantine React Table Example

ID	First Name	Last Name	Company	City	Country
1	Elenora	Wilkinson	Feest - Reilly	Hertaland	Qatar
2	Berneice	Feil	Deckow, Leuschke and Jaskolski	Millcreek	Nepal
3	Frieda	Baumbach	Heidenreich, Grady and Durgan	Volkmanside	Croatia
4	Zachery	Brown	Cormier - Skiles	Faychester	Saint Pierre and Miquelon
5	Kendra	Bins	Wehner - Wilderman	New Valentin	Senegal
6	Lysanne	Fisher	Schmidt LLC	Malachitown	Costa Rica
7	Garrick	Ryan	Ryan - Buckridge	East Pearl	Cocos (Keeling) Islands
8	Hollis	Medhurst	Quitzon Group	West Sienna	Papua New Guinea
9	Arlo	Buckridge	Konopelski - Spinka	Chino	Congo
10	Rickie	Auer	Lehner - Walsh	Nyahfield	Sudan

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 { jsPDF } from 'jspdf'; //or use your library of choice here
10
import autoTable from 'jspdf-autotable';
11
import { data, type Person } from './makeData';
12

13
const columns: MRT_ColumnDef<Person>[] = [
14
  {
15
    accessorKey: 'id',
16
    header: 'ID',
17
    size: 40,
18
  },
19
  {
20
    accessorKey: 'firstName',
21
    header: 'First Name',
22
    size: 120,
23
  },
24
  {
25
    accessorKey: 'lastName',
26
    header: 'Last Name',
27
    size: 120,
28
  },
29
  {
30
    accessorKey: 'company',
31
    header: 'Company',
32
    size: 300,
33
  },
34
  {
35
    accessorKey: 'city',
36
    header: 'City',
37
  },
38
  {
39
    accessorKey: 'country',
40
    header: 'Country',
41
    size: 220,
42
  },
43
];
44

45
const Example = () => {
46
  const handleExportRows = (rows: MRT_Row<Person>[]) => {
47
    const doc = new jsPDF();
48
    const tableData = rows.map((row) => Object.values(row.original));
49
    const tableHeaders = columns.map((c) => c.header);
50

51
    autoTable(doc, {
52
      head: [tableHeaders],
53
      body: tableData,
54
    });
55

56
    doc.save('mrt-pdf-example.pdf');
57
  };
58

59
  const table = useMantineReactTable({
60
    columns,
61
    data,
62
    enableRowSelection: true,
63
    columnFilterDisplayMode: 'popover',
64
    paginationDisplayMode: 'pages',
65
    positionToolbarAlertBanner: 'bottom',
66
    renderTopToolbarCustomActions: ({ table }) => (
67
      <Box
68
        sx={{
69
          display: 'flex',
70
          gap: '16px',
71
          padding: '8px',
72
          flexWrap: 'wrap',
73
        }}
74
      >
75
        <Button
76
          disabled={table.getPrePaginationRowModel().rows.length === 0}
77
          //export all rows, including from the next page, (still respects filtering and sorting)
78
          onClick={() =>
79
            handleExportRows(table.getPrePaginationRowModel().rows)
80
          }
81
          leftIcon={<IconDownload />}
82
          variant="filled"
83
        >
84
          Export All Rows
85
        </Button>
86
        <Button
87
          disabled={table.getRowModel().rows.length === 0}
88
          //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
89
          onClick={() => handleExportRows(table.getRowModel().rows)}
90
          leftIcon={<IconDownload />}
91
          variant="filled"
92
        >
93
          Export Page Rows
94
        </Button>
95
        <Button
96
          disabled={
97
            !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
98
          }
99
          //only export selected rows
100
          onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
101
          leftIcon={<IconDownload />}
102
          variant="filled"
103
        >
104
          Export Selected Rows
105
        </Button>
106
      </Box>
107
    ),
108
  });
109

110
  return <MantineReactTable table={table} />;
111
};
112

113
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 { jsPDF } from 'jspdf'; //or use your library of choice here
5
import autoTable from 'jspdf-autotable';
6
import { data } from './makeData';
7

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 Example = () => {
41
  const handleExportRows = (rows) => {
42
    const doc = new jsPDF();
43
    const tableData = rows.map((row) => Object.values(row.original));
44
    const tableHeaders = columns.map((c) => c.header);
45

46
    autoTable(doc, {
47
      head: [tableHeaders],
48
      body: tableData,
49
    });
50

51
    doc.save('mrt-pdf-example.pdf');
52
  };
53

54
  const table = useMantineReactTable({
55
    columns,
56
    data,
57
    enableRowSelection: true,
58
    columnFilterDisplayMode: 'popover',
59
    paginationDisplayMode: 'pages',
60
    positionToolbarAlertBanner: 'bottom',
61
    renderTopToolbarCustomActions: ({ table }) => (
62
      <Box
63
        sx={{
64
          display: 'flex',
65
          gap: '16px',
66
          padding: '8px',
67
          flexWrap: 'wrap',
68
        }}
69
      >
70
        <Button
71
          disabled={table.getPrePaginationRowModel().rows.length === 0}
72
          //export all rows, including from the next page, (still respects filtering and sorting)
73
          onClick={() =>
74
            handleExportRows(table.getPrePaginationRowModel().rows)
75
          }
76
          leftIcon={<IconDownload />}
77
          variant="filled"
78
        >
79
          Export All Rows
80
        </Button>
81
        <Button
82
          disabled={table.getRowModel().rows.length === 0}
83
          //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
84
          onClick={() => handleExportRows(table.getRowModel().rows)}
85
          leftIcon={<IconDownload />}
86
          variant="filled"
87
        >
88
          Export Page Rows
89
        </Button>
90
        <Button
91
          disabled={
92
            !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
93
          }
94
          //only export selected rows
95
          onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
96
          leftIcon={<IconDownload />}
97
          variant="filled"
98
        >
99
          Export Selected Rows
100
        </Button>
101
      </Box>
102
    ),
103
  });
104

105
  return <MantineReactTable table={table} />;
106
};
107

108
export default Example;

Mantine React Table

PDF Export Example

Demo