Mantine React Table

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;