Toolbar Customization Guide

This guide shows you how to hide, customize, or override the top and bottom toolbars in Mantine React Table.

Note: This guide has become much more simple since the introduction of the useMantineReactTable hook.
No more tableInstanceRef hacks required!

Relevant Table Options

#	Type	Default Value	More Info Links
1	boolean	true	MRT Customize Toolbars Docs

2	boolean	true

3	boolean	true

4	BoxProps \| ({ table }) => BoxProps		Mantine Toolbar Docs

5	ProgressProps \| ({ isTopToolbar, table }) => ProgressProps		Mantine Progress Docs

6	BadgeProps\| ({ table }} => BadgeProps		Mantine Chip Docs

7	AlertProps \| ({ table }) => AlertProps		Mantine Alert Docs

8	BoxProps \| ({ table }) => BoxProps		Mantine Toolbar Docs

9	'left' \| 'right'

10	'bottom' \| 'top' \| 'both'

11	'bottom' \| 'top' \| 'head-overlay' \| 'none'

12	'bottom' \| 'top' \| 'both' \| 'none'

13	ReactNode \| ({ table }) => ReactNode

14	({ table }) => ReactNode

15	({ table }) => ReactNode

16	ReactNode \| ({ table }) => ReactNode

17	({ table }) => ReactNode

Relevant State

#	Type	Default Value
1	boolean	false

2	boolean	false

Hide or Disable Toolbars

There are enableTopToolbar and enableBottomToolbar table options that you can use to show or hide the toolbars.

const table = useMantineReactTable({
  data,
  columns,
  enableTopToolbar: false,
  enableBottomToolbar: false,
});

return <MantineReactTable table={table} />;

Alternatively, you could just use a different MRT component that does not have the toolbars built-in. For example, use the <MRT_TableContainer /> or <MRT_Table /> components instead of the <MantineReactTable /> component.

const table = useMantineReactTable({
  data,
  columns,
});

//This MRT sub-component does not contain the code for the toolbars. MRT_TablePaper and MantineReactTable do.
return <MRT_TableContainer table={table} />;

No Toolbars Example

Demo

First Name	Last Name	Address	City	State
Wava	Hoppe	4456 Towne Estates	Edmond	New Jersey
Kamren	Kemmer	237 Reinger View	Kesslermouth	New Jersey
Dillon	Hackett	79266 Cronin Rest	Conroyland	Colorado
Wilber	Von	4162 Della Roads	Champaign	Idaho
Ronny	Lowe	4057 Burley Extensions	Siennastead	Alaska
Lavinia	Kreiger	24310 Aufderhar Union	Ceceliachester	Kentucky
Tracy	Wilkinson	7204 Claudine Summit	Fort Melanychester	Tennessee

1
import { useMemo } from 'react';
2
import {
3
  MRT_Table, //import alternative sub-component if we do not want toolbars
4
  type MRT_ColumnDef,
5
  useMantineReactTable,
6
} from 'mantine-react-table';
7
import { useMantineTheme } from '@mantine/core';
8
import { data, type Person } from './makeData';
9

10
export const Example = () => {
11
  const { colorScheme } = useMantineTheme();
12

13
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
14
    () => [
15
      {
16
        accessorKey: 'firstName',
17
        header: 'First Name',
18
      },
19
      {
20
        accessorKey: 'lastName',
21
        header: 'Last Name',
22
      },
23
      {
24
        accessorKey: 'address',
25
        header: 'Address',
26
      },
27
      {
28
        accessorKey: 'city',
29
        header: 'City',
30
      },
31
      {
32
        accessorKey: 'state',
33
        header: 'State',
34
      },
35
    ],
36
    [],
37
  );
38

39
  const table = useMantineReactTable({
40
    columns,
41
    data,
42
    enableColumnActions: false,
43
    enableColumnFilters: false,
44
    enablePagination: false,
45
    enableSorting: false,
46
    mantineTableProps: {
47
      highlightOnHover: false,
48
      withColumnBorders: true,
49
      withBorder: colorScheme === 'light',
50
      sx: {
51
        'thead > tr': {
52
          backgroundColor: 'inherit',
53
        },
54
        'thead > tr > th': {
55
          backgroundColor: 'inherit',
56
        },
57
        'tbody > tr > td': {
58
          backgroundColor: 'inherit',
59
        },
60
      },
61
    },
62
  });
63

64
  //using MRT_Table instead of MantineReactTable if we do not want any of the toolbar features
65
  return <MRT_Table table={table} />;
66
};
67

68
export default Example;

1
import { useMemo } from 'react';
2
import {
3
  MRT_Table, //import alternative sub-component if we do not want toolbars
4
  useMantineReactTable,
5
} from 'mantine-react-table';
6
import { useMantineTheme } from '@mantine/core';
7
import { data } from './makeData';
8

9
export const Example = () => {
10
  const { colorScheme } = useMantineTheme();
11

12
  const columns = useMemo(
13
    () => [
14
      {
15
        accessorKey: 'firstName',
16
        header: 'First Name',
17
      },
18
      {
19
        accessorKey: 'lastName',
20
        header: 'Last Name',
21
      },
22
      {
23
        accessorKey: 'address',
24
        header: 'Address',
25
      },
26
      {
27
        accessorKey: 'city',
28
        header: 'City',
29
      },
30
      {
31
        accessorKey: 'state',
32
        header: 'State',
33
      },
34
    ],
35
    [],
36
  );
37

38
  const table = useMantineReactTable({
39
    columns,
40
    data,
41
    enableColumnActions: false,
42
    enableColumnFilters: false,
43
    enablePagination: false,
44
    enableSorting: false,
45
    mantineTableProps: {
46
      highlightOnHover: false,
47
      withColumnBorders: true,
48
      withBorder: colorScheme === 'light',
49
      sx: {
50
        'thead > tr': {
51
          backgroundColor: 'inherit',
52
        },
53
        'thead > tr > th': {
54
          backgroundColor: 'inherit',
55
        },
56
        'tbody > tr > td': {
57
          backgroundColor: 'inherit',
58
        },
59
      },
60
    },
61
  });
62

63
  //using MRT_Table instead of MantineReactTable if we do not want any of the toolbar features
64
  return <MRT_Table table={table} />;
65
};
66

67
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { useMantineTheme } from '@mantine/core';
4
import { data, type Person } from './makeData';
5

6
export const Example = () => {
7
  const { colorScheme } = useMantineTheme();
8

9
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
10
    () => [
11
      {
12
        accessorKey: 'firstName',
13
        header: 'First Name',
14
      },
15
      {
16
        accessorKey: 'lastName',
17
        header: 'Last Name',
18
      },
19
      {
20
        accessorKey: 'address',
21
        header: 'Address',
22
      },
23
      {
24
        accessorKey: 'city',
25
        header: 'City',
26
      },
27
      {
28
        accessorKey: 'state',
29
        header: 'State',
30
      },
31
    ],
32
    [],
33
  );
34

35
  return (
36
    <MantineReactTable
37
      columns={columns}
38
      data={data}
39
      enableColumnActions={false}
40
      enableColumnFilters={false}
41
      enablePagination={false}
42
      enableSorting={false}
43
      enableBottomToolbar={false}
44
      enableTopToolbar={false}
45
      mantineTableProps={{
46
        highlightOnHover: false,
47
        withColumnBorders: true,
48
        withBorder: colorScheme === 'light',
49
        sx: {
50
          'thead > tr': {
51
            backgroundColor: 'inherit',
52
          },
53
          'thead > tr > th': {
54
            backgroundColor: 'inherit',
55
          },
56
          'tbody > tr > td': {
57
            backgroundColor: 'inherit',
58
          },
59
        },
60
      }}
61
    />
62
  );
63
};
64

65
export default Example;

Everything in the toolbars are customizable. You can add your own buttons or change the order of the built-in buttons.

The renderToolbarInternalActions table option allows you to redefine the built-in buttons that usually reside in the top right of the top toolbar. You can reorder the icon buttons or even insert your own custom buttons. All of the built-in buttons are available to be imported from 'mantine-react-table'.

import {
  MantineReactTable,
  MRT_ShowHideColumnsButton,
  MRT_ToggleFullScreenButton,
} from 'mantine-react-table';

const table = useMantineReactTable({
  data,
  columns,
  renderToolbarInternalActions: ({ table }) => (
    <>
      {/* add your own custom print button or something */}
      <IconButton onClick={() => showPrintPreview(true)}>
        <PrintIcon />
      </IconButton>
      {/* built-in buttons (must pass in table prop for them to work!) */}
      <MRT_ShowHideColumnsButton table={table} />
      <MRT_ToggleFullScreenButton table={table} />
    </>
  ),
});

return <MantineReactTable table={table} />;

The renderTopToolbarCustomActions and renderBottomToolbarCustomActions table options allow you to add your own custom buttons or components to the top and bottom toolbar areas. These props are functions that return a ReactNode. You can add your own buttons or whatever components you want.

In all of these render... table options, you get access to the table instance that you can use to perform actions or extract data from the table.

const table = useMantineReactTable({
  data,
  columns,
  enableRowSelection: true,
  //Simply adding a table title to the top-left of the top toolbar
  renderTopToolbarCustomActions: () => (
    <Typography variant="h3">Customer's Table</Typography>
  ),
  //Adding a custom button to the bottom toolbar
  renderBottomToolbarCustomActions: ({ table }) => (
    <Button
      variant="contained"
      color="lightblue"
      //extract all selected rows from the table instance and do something with them
      onClick={() => handleDownloadRows(table.getSelectedRowModel().rows)}
    >
      Download Selected Rows
    </Button>
  ),
});

return <MantineReactTable table={table} />;

1
import { useMemo } from 'react';
2
import {
3
  MRT_ToggleDensePaddingButton,
4
  MRT_ToggleFullScreenButton,
5
  MantineReactTable,
6
  type MRT_ColumnDef,
7
  useMantineReactTable,
8
} from 'mantine-react-table';
9
import { Box, Button, ActionIcon, Flex } from '@mantine/core';
10
import { IconPrinter } from '@tabler/icons-react';
11
import { data, type Person } from './makeData';
12

13
const Example = () => {
14
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
15
    () => [
16
      {
17
        accessorKey: 'firstName',
18
        header: 'First Name',
19
      },
20
      {
21
        accessorKey: 'lastName',
22
        header: 'Last Name',
23
      },
24
      {
25
        accessorKey: 'age',
26
        header: 'Age',
27
      },
28
      {
29
        accessorKey: 'salary',
30
        header: 'Salary',
31
      },
32
    ],
33
    [],
34
  );
35

36
  const table = useMantineReactTable({
37
    columns,
38
    data,
39
    enableRowSelection: true,
40
    positionToolbarAlertBanner: 'bottom',
41
    //add custom action buttons to top-left of top toolbar
42
    renderTopToolbarCustomActions: ({ table }) => (
43
      <Box sx={{ display: 'flex', gap: '16px', padding: '4px' }}>
44
        <Button
45
          color="teal"
46
          onClick={() => {
47
            alert('Create New Account');
48
          }}
49
          variant="filled"
50
        >
51
          Create Account
52
        </Button>
53
        <Button
54
          color="red"
55
          disabled={!table.getIsSomeRowsSelected()}
56
          onClick={() => {
57
            alert('Delete Selected Accounts');
58
          }}
59
          variant="filled"
60
        >
61
          Delete Selected Accounts
62
        </Button>
63
      </Box>
64
    ),
65
    //customize built-in buttons in the top-right of top toolbar
66
    renderToolbarInternalActions: ({ table }) => (
67
      <Flex gap="xs" align="center">
68
        {/* add custom button to print table  */}
69
        <ActionIcon
70
          onClick={() => {
71
            window.print();
72
          }}
73
        >
74
          <IconPrinter />
75
        </ActionIcon>
76
        {/* along-side built-in buttons in whatever order you want them */}
77
        <MRT_ToggleDensePaddingButton table={table} />
78
        <MRT_ToggleFullScreenButton table={table} />
79
      </Flex>
80
    ),
81
  });
82

83
  return <MantineReactTable table={table} />;
84
};
85

86
export default Example;

1
import { useMemo } from 'react';
2
import {
3
  MRT_ToggleDensePaddingButton,
4
  MRT_ToggleFullScreenButton,
5
  MantineReactTable,
6
  useMantineReactTable,
7
} from 'mantine-react-table';
8
import { Box, Button, ActionIcon, Flex } from '@mantine/core';
9
import { IconPrinter } from '@tabler/icons-react';
10
import { data } from './makeData';
11

12
const Example = () => {
13
  const columns = useMemo(
14
    () => [
15
      {
16
        accessorKey: 'firstName',
17
        header: 'First Name',
18
      },
19
      {
20
        accessorKey: 'lastName',
21
        header: 'Last Name',
22
      },
23
      {
24
        accessorKey: 'age',
25
        header: 'Age',
26
      },
27
      {
28
        accessorKey: 'salary',
29
        header: 'Salary',
30
      },
31
    ],
32
    [],
33
  );
34

35
  const table = useMantineReactTable({
36
    columns,
37
    data,
38
    enableRowSelection: true,
39
    positionToolbarAlertBanner: 'bottom',
40
    //add custom action buttons to top-left of top toolbar
41
    renderTopToolbarCustomActions: ({ table }) => (
42
      <Box sx={{ display: 'flex', gap: '16px', padding: '4px' }}>
43
        <Button
44
          color="teal"
45
          onClick={() => {
46
            alert('Create New Account');
47
          }}
48
          variant="filled"
49
        >
50
          Create Account
51
        </Button>
52
        <Button
53
          color="red"
54
          disabled={!table.getIsSomeRowsSelected()}
55
          onClick={() => {
56
            alert('Delete Selected Accounts');
57
          }}
58
          variant="filled"
59
        >
60
          Delete Selected Accounts
61
        </Button>
62
      </Box>
63
    ),
64
    //customize built-in buttons in the top-right of top toolbar
65
    renderToolbarInternalActions: ({ table }) => (
66
      <Flex gap="xs" align="center">
67
        {/* add custom button to print table  */}
68
        <ActionIcon
69
          onClick={() => {
70
            window.print();
71
          }}
72
        >
73
          <IconPrinter />
74
        </ActionIcon>
75
        {/* along-side built-in buttons in whatever order you want them */}
76
        <MRT_ToggleDensePaddingButton table={table} />
77
        <MRT_ToggleFullScreenButton table={table} />
78
      </Flex>
79
    ),
80
  });
81

82
  return <MantineReactTable table={table} />;
83
};
84

85
export default Example;

The positionToolbarAlertBanner, positionGlobalFilter, positionPagination, and positionToolbarDropZone table options allow you to swap the default position of certain areas of the toolbars. Experiment moving them around until you find a layout that works for you.

const table = useMantineReactTable({
  data,
  columns
  //if rendering top toolbar buttons, sometimes you want alerts to be at the bottom
  positionToolbarAlertBanner: 'bottom',
  positionGlobalFilter: 'left', //move the search box to the left of the top toolbar
  positionPagination: 'top',
  renderTopToolbarCustomActions: () => <Box>...</Box>,
});

return <MantineReactTable table={table} />;

The mantineTopToolbarProps, mantineBottomToolbarProps, mantineToolbarAlertBannerProps, and mantineToolbarAlertBannerBadgeProps table options allow you to customize the props and styles of the underlying Mantine components that make up the toolbar components. Remember that you can pass CSS overrides to their sx or style props. Some have found this useful for forcing position: absolute on alerts, etc.

Customize Linear Progress Bars

The progress bars that display in both the top and bottom toolbars become visible when either the isLoading or showProgressBars state options are set to true. You can customize the progress bars by passing in props to the mantineProgressProps table option. By default, the progress bars have a full animated progress bar, but you can set the value prop to a number between 0 and 100 to show real progress values if your table is doing some complicated long running tasks that you want to show progress for. Visit the Mantine Progress docs to learn more.

const table = useMantineReactTable({
  data,
  columns,
  mantineProgressProps: ({ isTopToolbar }) => ({
    color: 'orange',
    sx: { display: isTopToolbar ? 'block' : 'none' }, //only show top toolbar progress bar
    value: fetchProgress, //show precise real progress value if you so desire
  }),
  state: {
    isLoading,
    showProgressBars,
  },
});

return <MantineReactTable table={table} />;

The toolbar alert banner is an internal component used to display alerts to the user. By default, it will automatically show messages around the number of selected rows or grouping state.

However, you can repurpose this alert banner to show your own custom messages too. You can force the alert banner to show by setting the showAlertBanner state option to true. You can then customize the messages and other stylings using the mantineToolbarAlertBannerProps to create your custom message. You probably saw this in the Remote Data or React Query examples.

const table = useMantineReactTable({
  data,
  columns,
  //show a custom error message if there was an error fetching data in the top toolbar
  mantineToolbarAlertBannerProps: isError
    ? {
        color: 'red',
        children: 'Network Error. Could not fetch data.',
      }
    : undefined,
  state: {
    showAlertBanner: isError,
    showProgressBars: isFetching,
  },
});

return <MantineReactTable table={table} />;

If you want to completely override the default toolbar components, you can do so by passing in your own custom components to the renderTopToolbar and renderBottomToolbar props.

The drawback to this approach is that you will not get all the automatic features of the default toolbar components, such as the automatic alert banner, progress bars, etc. You will have to implement all of that yourself if you still want those features. Though you can also just import those MRT components and use them in your custom toolbar.

import {
  MRT_GlobalFilterTextInput,
  MRT_TablePagination,
  MantineReactTable,
  useMantineReactTable,
} from '@mantine/mantine-react-table';

const table = useMantineReactTable({
  data,
  columns,
  renderTopToolbar: ({ table }) => (
    <Flex align="center" justify="space-between">
      <MRT_GlobalFilterTextInput table={table} />
      <MRT_TablePagination table={table} />
    </Flex>
  ),
  renderBottomToolbar: ({ table }) => (
    <Box>
      <Button>Download</Button>
    </Box>
  ),
});

return <MantineReactTable table={table} />;

Instead of overriding the toolbar components up above, you may want 100% control over the layout and styling of your table controls and where they are on the page. You can do this by just using a MRT sub component such as <MRT_TableContainer /> for the table component, which does not have the internal toolbar components built-in. Optionally, build your own custom toolbar components using the other MRT sub components.

Hey I'm some page content. I'm just one of your normal components between your custom toolbar and the MRT Table below

First Name	Last Name	Age	Salary
Homer	Simpson	39	53000
Marge	Simpson	38	6000
Bart	Simpson	10	460
Lisa	Simpson	8	120883
Maggie	Simpson	1	22
Ned	Flanders	60	100000
Apu	Nahasapeemapetilon	40	80000
Montgomery	Burns	100	10000000
Waylon	Smithers	45	80000
Edna	Krabappel	55	80000

Rows per page

1-10 of 11

1
import {
2
  MRT_GlobalFilterTextInput,
3
  MRT_ShowHideColumnsButton,
4
  MRT_TablePagination,
5
  MRT_ToggleDensePaddingButton,
6
  MRT_ToggleFiltersButton,
7
  MRT_ToolbarAlertBanner,
8
  useMantineReactTable,
9
  type MRT_ColumnDef,
10
  MRT_TableContainer,
11
} from 'mantine-react-table';
12
import { ActionIcon, Box, Button, Flex, Text, Tooltip } from '@mantine/core';
13
import { IconPrinter } from '@tabler/icons-react';
14
import { data, type Person } from './makeData';
15

16
const columns: MRT_ColumnDef<Person>[] = [
17
  {
18
    accessorKey: 'firstName',
19
    header: 'First Name',
20
  },
21
  {
22
    accessorKey: 'lastName',
23
    header: 'Last Name',
24
  },
25
  {
26
    accessorKey: 'age',
27
    header: 'Age',
28
  },
29
  {
30
    accessorKey: 'salary',
31
    header: 'Salary',
32
  },
33
];
34

35
const Example = () => {
36
  const table = useMantineReactTable({
37
    columns,
38
    data,
39
    enableRowSelection: true,
40
    initialState: { showGlobalFilter: true },
41
  });
42

43
  return (
44
    <Box sx={{ border: 'gray 2px dashed', padding: '16px' }}>
45
      {/* Our Custom External Top Toolbar */}
46
      <Flex
47
        sx={(theme) => ({
48
          backgroundColor: theme.fn.rgba(theme.colors.blue[3], 0.2),
49
          borderRadius: '4px',
50
          flexDirection: 'row',
51
          gap: '16px',
52
          justifyContent: 'space-between',
53
          padding: '24px 16px',
54
          '@media max-width: 768px': {
55
            flexDirection: 'column',
56
          },
57
        })}
58
      >
59
        <Box>
60
          <Button
61
            color="lightblue"
62
            onClick={() => {
63
              alert('Add User');
64
            }}
65
            variant="filled"
66
          >
67
            Crete New Account
68
          </Button>
69
        </Box>
70
        <MRT_GlobalFilterTextInput table={table} />
71
        <Flex gap="xs" align="center">
72
          <MRT_ToggleFiltersButton table={table} />
73
          <MRT_ShowHideColumnsButton table={table} />
74
          <MRT_ToggleDensePaddingButton table={table} />
75
          <Tooltip label="Print">
76
            <ActionIcon onClick={() => window.print()}>
77
              <IconPrinter />
78
            </ActionIcon>
79
          </Tooltip>
80
        </Flex>
81
      </Flex>
82
      {/* Some Page Content */}
83
      <Text p="16px 4px">
84
        {
85
          "Hey I'm some page content. I'm just one of your normal components between your custom toolbar and the MRT Table below"
86
        }
87
      </Text>
88
      {/* The MRT Table with no toolbars built-in */}
89
      <MRT_TableContainer table={table} />
90
      {/* Our Custom Bottom Toolbar */}
91
      <Box>
92
        <Flex justify="flex-end">
93
          <MRT_TablePagination table={table} />
94
        </Flex>
95
        <Box sx={{ display: 'grid', width: '100%' }}>
96
          <MRT_ToolbarAlertBanner stackAlertBanner table={table} />
97
        </Box>
98
      </Box>
99
    </Box>
100
  );
101
};
102

103
export default Example;

1
import {
2
  MRT_GlobalFilterTextInput,
3
  MRT_ShowHideColumnsButton,
4
  MRT_TableContainer,
5
  MRT_TablePagination,
6
  MRT_ToggleDensePaddingButton,
7
  MRT_ToggleFiltersButton,
8
  MRT_ToolbarAlertBanner,
9
  useMantineReactTable,
10
} from 'mantine-react-table';
11
import { ActionIcon, Box, Button, Flex, Text, Tooltip } from '@mantine/core';
12
import { IconPrinter } from '@tabler/icons-react';
13
import { data } from './makeData';
14

15
const columns = [
16
  {
17
    accessorKey: 'firstName',
18
    header: 'First Name',
19
  },
20
  {
21
    accessorKey: 'lastName',
22
    header: 'Last Name',
23
  },
24
  {
25
    accessorKey: 'age',
26
    header: 'Age',
27
  },
28
  {
29
    accessorKey: 'salary',
30
    header: 'Salary',
31
  },
32
];
33

34
const Example = () => {
35
  const table = useMantineReactTable({
36
    columns,
37
    data,
38
    enableRowSelection: true,
39
    initialState: { showGlobalFilter: true },
40
  });
41

42
  return (
43
    <Box sx={{ border: 'gray 2px dashed', padding: '16px' }}>
44
      {/* Our Custom External Top Toolbar */}
45
      <Flex
46
        sx={(theme) => ({
47
          backgroundColor: theme.fn.rgba(theme.colors.blue[3], 0.2),
48
          borderRadius: '4px',
49
          flexDirection: 'row',
50
          gap: '16px',
51
          justifyContent: 'space-between',
52
          padding: '24px 16px',
53
          '@media max-width: 768px': {
54
            flexDirection: 'column',
55
          },
56
        })}
57
      >
58
        <Box>
59
          <Button
60
            color="lightblue"
61
            onClick={() => {
62
              alert('Add User');
63
            }}
64
            variant="filled"
65
          >
66
            Crete New Account
67
          </Button>
68
        </Box>
69
        <MRT_GlobalFilterTextInput table={table} />
70
        <Flex gap="xs" align="center">
71
          <MRT_ToggleFiltersButton table={table} />
72
          <MRT_ShowHideColumnsButton table={table} />
73
          <MRT_ToggleDensePaddingButton table={table} />
74
          <Tooltip label="Print">
75
            <ActionIcon onClick={() => window.print()}>
76
              <IconPrinter />
77
            </ActionIcon>
78
          </Tooltip>
79
        </Flex>
80
      </Flex>
81
      {/* Some Page Content */}
82
      <Text p="16px 4px">
83
        {
84
          "Hey I'm some page content. I'm just one of your normal components between your custom toolbar and the MRT Table below"
85
        }
86
      </Text>
87
      {/* The MRT Table with no toolbars built-in */}
88
      <MRT_TableContainer table={table} />
89
      {/* Our Custom Bottom Toolbar */}
90
      <Box>
91
        <Flex justify="flex-end">
92
          <MRT_TablePagination table={table} />
93
        </Flex>
94
        <Box sx={{ display: 'grid', width: '100%' }}>
95
          <MRT_ToolbarAlertBanner stackAlertBanner table={table} />
96
        </Box>
97
      </Box>
98
    </Box>
99
  );
100
};
101

102
export default Example;

Relevant Table Options

Relevant State

Hide or Disable Toolbars

No Toolbars Example

Demo

Customize Toolbar buttons

Customize Built-In Internal Toolbar Button Area

Add Custom Toolbar Buttons/Components

Custom Toolbar Actions Example

Demo

Position Toolbar Areas

Customize Toolbar Props and Styles

Customize Linear Progress Bars

Customize Toolbar Alert Banner

Override with Custom Toolbar Components

Build Your Own Toolbar

Demo