Toolbar Customization Guide - Material React Table 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

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, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { data, Person } from './makeData';
4
5export const Example: FC = () => {
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    />
46  );
47};
48
49export default Example;
50

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

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

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.

<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 MUI 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 MUI 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 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 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

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

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