Toolbar Customization Guide - Material React Table V1 Docs

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

Relevant Props

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

2	boolean	true

3	boolean	true

4	ToolbarProps \| ({ table }) => ToolbarProps		Material UI Toolbar Props

5	LinearProgressProps \| ({ isTopToolbar, table }) => LinearProgressProps		Material UI LinearProgress Props

6	ChipProps\| ({ table }} => ChipProps		Material UI Chip Props

7	AlertProps \| ({ table }) => AlertProps		Material UI Alert Props

8	ToolbarProps \| ({ table }) => ToolbarProps		Material UI Toolbar Props

9	'left' \| 'right'

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

11	'bottom' \| 'top' \| '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 props that you can use to show or hide the toolbars.

<MaterialReactTable
  data={data}
  columns={columns}
  enableTopToolbar={false} //hide top toolbar
  enableBottomToolbar={false} //hide bottom toolbar
/>

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

First Name	Last Name	Address	City	State
Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Source Code

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { data, type Person } from './makeData';
4
5export const Example = () => {
6  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7    //column definitions...
8    () => [
9      {
10        accessorKey: 'firstName',
11        header: 'First Name',
12      },
13      {
14        accessorKey: 'lastName',
15        header: 'Last Name',
16      },
17      {
18        accessorKey: 'address',
19        header: 'Address',
20      },
21      {
22        accessorKey: 'city',
23        header: 'City',
24      },
25      {
26        accessorKey: 'state',
27        header: 'State',
28      },
29    ],
30    [],
31    
32  );
33
34  return (
35    <MaterialReactTable
36      columns={columns}
37      data={data}
38      enableColumnActions={false}
39      enableColumnFilters={false}
40      enablePagination={false}
41      enableSorting={false}
42      enableBottomToolbar={false}
43      enableTopToolbar={false}
44      muiTableBodyRowProps={{ hover: false }}
45      muiTableProps={{
46        sx: {
47          border: '1px solid rgba(81, 81, 81, 1)',
48        },
49      }}
50      muiTableHeadCellProps={{
51        sx: {
52          border: '1px solid rgba(81, 81, 81, 1)',
53        },
54      }}
55      muiTableBodyCellProps={{
56        sx: {
57          border: '1px solid rgba(81, 81, 81, 1)',
58        },
59      }}
60    />
61  );
62};
63
64export default Example;
65

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

The renderToolbarInternalActions prop 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 'material-react-table'.

import {
  MaterialReactTable,
  MRT_ShowHideColumnsButton,
  MRT_FullScreenToggleButton,
} from 'material-react-table';
//...
return (
  <MaterialReactTable
    data={data}
    columns={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_FullScreenToggleButton table={table} />
      </>
    )}
  />
);

The renderTopToolbarCustomActions and renderBottomToolbarCustomActions props 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... props, you get access to the underlying table instance that you can use to perform actions or extract data from the table.

<MaterialReactTable
  data={data}
  columns={columns}
  enableRowSelection
  //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="primary"
      //extract all selected rows from the table instance and do something with them
      onClick={() => handleDownloadRows(table.getSelectedRowModel().rows)}
    >
      Download Selected Rows
    </Button>
  )}
/>

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

First Name	Last Name	Age	Salary
Homer	Simpson	39	53000
Marge	Simpson	38	60000
Bart	Simpson	10	46000
Lisa	Simpson	8	120883
Maggie	Simpson	1	22

1import React, { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  type MRT_ColumnDef,
5  MRT_ToggleDensePaddingButton,
6  MRT_FullScreenToggleButton,
7} from 'material-react-table';
8import { Box, Button, IconButton } from '@mui/material';
9import PrintIcon from '@mui/icons-material/Print';
10import { data, type Person } from './makeData';
11
12const Example = () => {
13  const columns = useMemo<MRT_ColumnDef<Person>[]>(
14    //column definitions...
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
37  return (
38    <MaterialReactTable
39      columns={columns}
40      data={data}
41      enableRowSelection
42      positionToolbarAlertBanner="bottom" //show selected rows count on bottom toolbar
43      //add custom action buttons to top-left of top toolbar
44      renderTopToolbarCustomActions={({ table }) => (
45        <Box sx={{ display: 'flex', gap: '1rem', p: '4px' }}>
46          <Button
47            color="secondary"
48            onClick={() => {
49              alert('Create New Account');
50            }}
51            variant="contained"
52          >
53            Create Account
54          </Button>
55          <Button
56            color="error"
57            disabled={!table.getIsSomeRowsSelected()}
58            onClick={() => {
59              alert('Delete Selected Accounts');
60            }}
61            variant="contained"
62          >
63            Delete Selected Accounts
64          </Button>
65        </Box>
66      )}
67      //customize built-in buttons in the top-right of top toolbar
68      renderToolbarInternalActions={({ table }) => (
69        <Box>
70          {/* add custom button to print table  */}
71          <IconButton
72            onClick={() => {
73              window.print();
74            }}
75          >
76            <PrintIcon />
77          </IconButton>
78          {/* along-side built-in buttons in whatever order you want them */}
79          <MRT_ToggleDensePaddingButton table={table} />
80          <MRT_FullScreenToggleButton table={table} />
81        </Box>
82      )}
83    />
84  );
85};
86
87export default Example;
88

The positionToolbarAlertBanner, positionGlobalFilter, positionPagination, and positionToolbarDropZone props 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.

The props positionToolbarAlertBanner and positionToolbarDropZone can be set to none if you need completely hide them.

<MaterialReactTable
  data={data}
  columns={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>}
/>

The muiTopToolbarProps, muiBottomToolbarProps, muiToolbarAlertBannerProps, and muiToolbarAlertBannerChipProps props allow you to customize the props and styles of the underlying Material UI 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 muiLinearProgressProps prop. By default, the progress bars have an indeterminate state, 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 Material UI Linear Progress docs to learn more.

<MaterialReactTable
  data={data}
  columns={columns}
  muiLinearProgressProps={({ isTopToolbar }) => ({
    color: 'secondary',
    sx: { display: isTopToolbar ? 'block' : 'none' }, //only show top toolbar progress bar
    value: fetchProgress, //show precise real progress value if you so desire
    variant: 'determinate',
  })}
  state={{
    isLoading,
    showProgressBars,
  }}
/>

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 row(s) selected 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. By setting the showAlertBanner to false, you can hide the alert banner completely, which can be useful in overriding the default state when there are row(s) selected or grouped. You can then customize the messages and other stylings using the muiToolbarAlertBannerProps to create your custom message. You probably saw this in the Remote Data or React Query examples.

<MaterialReactTable
  columns={columns}
  data={data}
  //show a custom error message if there was an error fetching data in the top toolbar
  muiToolbarAlertBannerProps={
    isError
      ? {
          color: 'error',
          children: 'Network Error. Could not fetch data.',
        }
      : undefined
  }
  state={{
    showAlertBanner: isError,
    showProgressBars: isFetching,
  }}
/>

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.

<MaterialReactTable
  columns={columns}
  data={data}
  renderTopToolbar={({ table }) => <Box></Box>}
  renderBottomToolbar={({ table }) => <Box></Box>}
/>

Import MRT Components for Custom Toolbars

If you are using a custom toolbar, you can still import some of the built-in MRT components to use in your custom toolbar. For example, you can import all of the built-in internal toolbar icon buttons components and use them in your custom toolbar.

import {
  MaterialReactTable,
  MRT_ShowHideColumnsButton, // import the built-in show/hide columns button
  MRT_FullScreenToggleButton, // import the built-in full screen toggle button
} from 'material-react-table';
//...
return (
  <MaterialReactTable
    columns={columns}
    data={data}
    renderTopToolbar={({ table }) => (
      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
        <Typography>Custom Toolbar</Typography>
        <Box>
          <MRT_ShowHideColumnsButton table={table} />
          <MRT_FullScreenToggleButton table={table} />
        </Box>
      </Box>
    )}
  />
);

You may want to separate out your own toolbar functionality away from the main table component. MRT lets you do this and still connect your custom components to the table instance using the tableInstanceRef prop.

You can import import the MRT Internal Toolbar button components and use them in your custom toolbar, just like you can when customizing the built-in toolbar, BUT there are some extra re-render hacks that you have to do to make the icon buttons work properly. See the example below:

Passing the tableInstanceRef as a prop for the table prop that MRT_* components need also requires some weird re-render hacks to make the icon buttons work properly, because refs do not trigger re-renders in React.

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

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

1import React, { useReducer, useRef, useState } from 'react';
2import {
3  MaterialReactTable,
4  MRT_FullScreenToggleButton,
5  MRT_GlobalFilterTextField,
6  MRT_ShowHideColumnsButton,
7  MRT_TableInstance,
8  MRT_TablePagination,
9  MRT_ToggleDensePaddingButton,
10  MRT_ToggleFiltersButton,
11  MRT_ToolbarAlertBanner,
12  type MRT_ColumnDef,
13  type MRT_DensityState,
14  type MRT_PaginationState,
15  type MRT_RowSelectionState,
16  type MRT_VisibilityState,
17} from 'material-react-table';
18import {
19  alpha,
20  Box,
21  Button,
22  IconButton,
23  Toolbar,
24  Tooltip,
25  Typography,
26} from '@mui/material';
27import PrintIcon from '@mui/icons-material/Print';
28import { data, type Person } from './makeData';
29
30//column definitions...
31const columns: MRT_ColumnDef<Person>[] = [
32  {
33    accessorKey: 'firstName',
34    header: 'First Name',
35  },
36  {
37    accessorKey: 'lastName',
38    header: 'Last Name',
39  },
40  {
41    accessorKey: 'age',
42    header: 'Age',
43  },
44  {
45    accessorKey: 'salary',
46    header: 'Salary',
47  },
48];
49
50
51const Example = () => {
52  //we need a table instance ref to pass as a prop to the MRT Toolbar buttons
53  const tableInstanceRef = useRef<MRT_TableInstance<Person>>(null);
54
55  //we will also need some weird re-render hacks to force the MRT_ components to re-render since ref changes do not trigger a re-render
56  const rerender = useReducer(() => ({}), {})[1];
57
58  //we need to manage the state that should trigger the MRT_ components in our custom toolbar to re-render
59  const [columnVisibility, setColumnVisibility] = useState<MRT_VisibilityState>(
60    {},
61  );
62  const [density, setDensity] = useState<MRT_DensityState>('comfortable');
63  const [pagination, setPagination] = useState<MRT_PaginationState>({
64    pageIndex: 0,
65    pageSize: 5,
66  });
67  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
68  const [showColumnFilters, setShowColumnFilters] = useState(false);
69
70  return (
71    <Box sx={{ border: 'gray 2px dashed', p: '1rem' }}>
72      {/* Our Custom External Top Toolbar */}
73      {tableInstanceRef.current && (
74        <Toolbar
75          sx={(theme) => ({
76            backgroundColor: alpha(theme.palette.secondary.light, 0.2),
77            borderRadius: '4px',
78            display: 'flex',
79            flexDirection: {
80              xs: 'column',
81              lg: 'row',
82            },
83            gap: '1rem',
84            justifyContent: 'space-between',
85            p: '1.5rem 0',
86          })}
87        >
88          <Box>
89            <Button
90              color="primary"
91              onClick={() => {
92                alert('Add User');
93              }}
94              variant="contained"
95            >
96              Crete New Account
97            </Button>
98          </Box>
99          <MRT_GlobalFilterTextField table={tableInstanceRef.current} />
100          <Box>
101            <MRT_ToggleFiltersButton table={tableInstanceRef.current} />
102            <MRT_ShowHideColumnsButton table={tableInstanceRef.current} />
103            <MRT_ToggleDensePaddingButton table={tableInstanceRef.current} />
104            <Tooltip arrow title="Print">
105              <IconButton onClick={() => window.print()}>
106                <PrintIcon />
107              </IconButton>
108            </Tooltip>
109            <MRT_FullScreenToggleButton table={tableInstanceRef.current} />
110          </Box>
111        </Toolbar>
112      )}
113      <Typography padding="1rem 4px">
114        {
115          "Hey I'm some page content. I'm just one of your normal components between your custom toolbar and the MRT Table below"
116        }
117      </Typography>
118      {/* The MRT Table */}
119      <MaterialReactTable
120        columns={columns}
121        data={data}
122        enableBottomToolbar={false}
123        enableRowSelection
124        enableTopToolbar={false}
125        initialState={{ showGlobalFilter: true }}
126        // See the Table State Management docs for why we need to use the updater function like this
127        onColumnVisibilityChange={(updater) => {
128          setColumnVisibility((prev) =>
129            updater instanceof Function ? updater(prev) : updater,
130          );
131          queueMicrotask(rerender); //hack to rerender after state update
132        }}
133        onDensityChange={(updater) => {
134          setDensity((prev) =>
135            updater instanceof Function ? updater(prev) : updater,
136          );
137          queueMicrotask(rerender); //hack to rerender after state update
138        }}
139        onRowSelectionChange={(updater) => {
140          setRowSelection((prev) =>
141            updater instanceof Function ? updater(prev) : updater,
142          );
143          queueMicrotask(rerender); //hack to rerender after state update
144        }}
145        onPaginationChange={(updater) => {
146          setPagination((prev) =>
147            updater instanceof Function ? updater(prev) : updater,
148          );
149          queueMicrotask(rerender); //hack to rerender after state update
150        }}
151        onShowColumnFiltersChange={(updater) => {
152          setShowColumnFilters((prev) =>
153            updater instanceof Function ? updater(prev) : updater,
154          );
155          queueMicrotask(rerender); //hack to rerender after state update
156        }}
157        state={{
158          columnVisibility,
159          density,
160          rowSelection,
161          pagination,
162          showColumnFilters,
163        }}
164        tableInstanceRef={tableInstanceRef} //get access to the underlying table instance ref
165      />
166      {/* Our Custom Bottom Toolbar */}
167      {tableInstanceRef.current && (
168        <Toolbar
169          sx={{
170            display: 'flex',
171            justifyContent: 'center',
172            flexDirection: 'column',
173          }}
174        >
175          <MRT_TablePagination table={tableInstanceRef.current} />
176          <Box sx={{ display: 'grid', width: '100%' }}>
177            <MRT_ToolbarAlertBanner
178              stackAlertBanner
179              table={tableInstanceRef.current}
180            />
181          </Box>
182        </Toolbar>
183      )}
184    </Box>
185  );
186};
187
188export default Example;
189

Relevant Props

Relevant State

Hide or Disable Toolbars

No Toolbars Example

Demo

Source Code

Customize Toolbar buttons

Customize Built-In Internal Toolbar Button Area

Add Custom Toolbar Buttons/Components

Full Custom Top Toolbar Example

Demo

Source Code

Position Toolbar Areas

Customize Toolbar Props and Styles

Customize Linear Progress Bars

Customize Toolbar Alert Banner

Override with Custom Toolbar Components

Import MRT Components for Custom Toolbars

Create Your Own External Toolbar Component

Demo

Source Code