Toolbar Customization Guide
This guide shows you how to hide, customize, or override the top and bottom toolbars in Material React Table.
Note: This guide has become much more simple since the introduction of the
useMaterialReactTable
hook in v2.
No moretableInstanceRef
oruseReducer
rerender hacks required!
Relevant Table Options
# | Prop Name | Type | Default Value | More Info Links | |
---|---|---|---|---|---|
1 |
|
| MRT Customize Toolbars Docs | ||
2 |
|
| |||
3 |
|
| |||
4 |
| Material UI Box Props | |||
5 |
| Material UI LinearProgress Props | |||
6 |
| Material UI Chip Props | |||
7 |
| Material UI Alert Props | |||
8 |
| Material UI Box Props | |||
9 |
| ||||
10 |
| ||||
11 |
| ||||
12 |
| ||||
13 |
| ||||
14 |
| ||||
15 |
| ||||
16 |
| ||||
17 |
| ||||
Relevant State
Hide or Disable Toolbars
There are enableTopToolbar
and enableBottomToolbar
table options that you can use to show or hide the toolbars.
const table = useMaterialReactTable({data,columns,enableTopToolbar: false,enableBottomToolbar: false,});return <MaterialReactTable 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 <MaterialReactTable />
component.
const table = useMaterialReactTable({data,columns,});//This MRT sub-component does not contain the code for the toolbars. MRT_TablePaper and MaterialReactTable do.return <MRT_TableContainer table={table} />;
No Toolbars Example
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 |
1import { useMemo } from 'react';2import {3 MRT_Table, //import alternative sub-component if we do not want toolbars4 type MRT_ColumnDef,5 useMaterialReactTable,6} from 'material-react-table';7import { data, type Person } from './makeData';89export const Example = () => {10 const columns = useMemo<MRT_ColumnDef<Person>[]>(11 //column definitions...36 );3738 const table = useMaterialReactTable({39 columns,40 data,41 enableColumnActions: false,42 enableColumnFilters: false,43 enablePagination: false,44 enableSorting: false,45 mrtTheme: (theme) => ({46 baseBackgroundColor: theme.palette.background.default, //change default background color47 }),48 muiTableBodyRowProps: { hover: false },49 muiTableProps: {50 sx: {51 border: '1px solid rgba(81, 81, 81, .5)',52 },53 },54 muiTableHeadCellProps: {55 sx: {56 border: '1px solid rgba(81, 81, 81, .5)',57 fontStyle: 'italic',58 fontWeight: 'normal',59 },60 },61 muiTableBodyCellProps: {62 sx: {63 border: '1px solid rgba(81, 81, 81, .5)',64 },65 },66 });6768 //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features69 return <MRT_Table table={table} />;70};7172export default Example;73
Customize Toolbar buttons
Everything in the toolbars are customizable. You can add your own buttons or change the order of the built-in buttons.
Customize Built-In Internal Toolbar Button Area
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 'material-react-table'.
import {MaterialReactTable,MRT_ShowHideColumnsButton,MRT_ToggleFullScreenButton,} from 'material-react-table';const table = useMaterialReactTable({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 <MaterialReactTable table={table} />;
Add Custom Toolbar Buttons/Components
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 = useMaterialReactTable({data,columns,enableRowSelection: true,//Simply adding a table title to the top-left of the top toolbarrenderTopToolbarCustomActions: () => (<Typography variant="h3">Customer's Table</Typography>),//Adding a custom button to the bottom toolbarrenderBottomToolbarCustomActions: ({ table }) => (<Buttonvariant="contained"color="lightblue"//extract all selected rows from the table instance and do something with themonClick={() => handleDownloadRows(table.getSelectedRowModel().rows)}>Download Selected Rows</Button>),});return <MaterialReactTable table={table} />;
Custom Toolbar Actions Example
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 { useMemo } from 'react';2import {3 MaterialReactTable,4 type MRT_ColumnDef,5 MRT_ToggleDensePaddingButton,6 MRT_ToggleFullScreenButton,7 useMaterialReactTable,8} from 'material-react-table';9import { Box, Button, IconButton } from '@mui/material';10import PrintIcon from '@mui/icons-material/Print';11import { data, type Person } from './makeData';1213const Example = () => {14 const columns = useMemo<MRT_ColumnDef<Person>[]>(15 //column definitions...36 );3738 const table = useMaterialReactTable({39 columns,40 data,41 enableRowSelection: true,42 positionToolbarAlertBanner: 'bottom', //show selected rows count on bottom toolbar43 //add custom action buttons to top-left of top toolbar44 renderTopToolbarCustomActions: ({ table }) => (45 <Box sx={{ display: 'flex', gap: '1rem', p: '4px' }}>46 <Button47 color="secondary"48 onClick={() => {49 alert('Create New Account');50 }}51 variant="contained"52 >53 Create Account54 </Button>55 <Button56 color="error"57 disabled={!table.getIsSomeRowsSelected()}58 onClick={() => {59 alert('Delete Selected Accounts');60 }}61 variant="contained"62 >63 Delete Selected Accounts64 </Button>65 </Box>66 ),67 //customize built-in buttons in the top-right of top toolbar68 renderToolbarInternalActions: ({ table }) => (69 <Box>70 {/* add custom button to print table */}71 <IconButton72 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_ToggleFullScreenButton table={table} />81 </Box>82 ),83 });8485 return <MaterialReactTable table={table} />;86};8788export default Example;89
Position Toolbar Areas
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 = useMaterialReactTable({data,columns//if rendering top toolbar buttons, sometimes you want alerts to be at the bottompositionToolbarAlertBanner: 'bottom',positionGlobalFilter: 'left', //move the search box to the left of the top toolbarpositionPagination: 'top',renderTopToolbarCustomActions: () => <Box>...</Box>,});return <MaterialReactTable table={table} />;
Customize Toolbar Props and Styles
The muiTopToolbarProps
, muiBottomToolbarProps
, muiToolbarAlertBannerProps
, and muiToolbarAlertBannerChipProps
table options allow you to customize the props and styles of the underlying Material 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
table option. By default, the progress bars have a full animated progress bar, but you can set the value
table option 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 Progress docs to learn more.
const table = useMaterialReactTable({data,columns,muiLinearProgressProps: ({ isTopToolbar }) => ({color: 'warning',sx: { display: isTopToolbar ? 'block' : 'none' }, //only show top toolbar progress barvalue: fetchProgress, //show precise real progress value if you so desire}),state: {isLoading,showProgressBars,},});return <MaterialReactTable table={table} />;
Customize Toolbar Alert Banner
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.
const table = useMaterialReactTable({data,columns,//show a custom error message if there was an error fetching data in the top toolbarmuiToolbarAlertBannerProps: isError? {color: 'error',children: 'Network Error. Could not fetch data.',}: undefined,state: {showAlertBanner: isError,showProgressBars: isFetching,},});return <MaterialReactTable table={table} />;
Override with Custom Toolbar Components
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, //import MRT sub components!MRT_TablePagination,MaterialReactTable,useMaterialReactTable,} from 'material-react-table';const table = useMaterialReactTable({data,columns,renderTopToolbar: ({ table }) => (<Boxsx={{display: 'flex',justifyContent: 'space-between',alignItems: 'center',}}><MRT_GlobalFilterTextInput table={table} /><MRT_TablePagination table={table} /></Box>),renderBottomToolbar: ({ table }) => (<Box><Button>Download</Button></Box>),});return <MaterialReactTable table={table} />;
Build Your Own Toolbar
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 |
1import {2 MRT_GlobalFilterTextField,3 MRT_ShowHideColumnsButton,4 MRT_TablePagination,5 MRT_ToggleDensePaddingButton,6 MRT_ToggleFiltersButton,7 MRT_ToolbarAlertBanner,8 useMaterialReactTable,9 type MRT_ColumnDef,10 MRT_TableContainer,11} from 'material-react-table';12import { IconButton, Box, Button, Typography, Tooltip } from '@mui/material';13import PrintIcon from '@mui/icons-material/Print';14import { data, type Person } from './makeData';1516const 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];3435const Example = () => {36 const table = useMaterialReactTable({37 columns,38 data,39 enableRowSelection: true,40 initialState: { showGlobalFilter: true },41 });4243 return (44 <Box sx={{ border: 'gray 2px dashed', padding: '16px' }}>45 {/* Our Custom External Top Toolbar */}46 <Box47 sx={(theme) => ({48 display: 'flex',49 backgroundColor: 'inherit',50 borderRadius: '4px',51 flexDirection: 'row',52 gap: '16px',53 justifyContent: 'space-between',54 padding: '24px 16px',55 '@media max-width: 768px': {56 flexDirection: 'column',57 },58 })}59 >60 <Box>61 <Button62 color="primary"63 onClick={() => {64 alert('Add User');65 }}66 variant="contained"67 >68 Crete New Account69 </Button>70 </Box>71 <MRT_GlobalFilterTextField table={table} />72 <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>73 <MRT_ToggleFiltersButton table={table} />74 <MRT_ShowHideColumnsButton table={table} />75 <MRT_ToggleDensePaddingButton table={table} />76 <Tooltip title="Print">77 <IconButton onClick={() => window.print()}>78 <PrintIcon />79 </IconButton>80 </Tooltip>81 </Box>82 </Box>83 {/* Some Page Content */}84 <Typography p="16px 4px">85 {86 "Hey I'm some page content. I'm just one of your normal components between your custom toolbar and the MRT Table below"87 }88 </Typography>89 {/* The MRT Table with no toolbars built-in */}90 <MRT_TableContainer table={table} />91 {/* Our Custom Bottom Toolbar */}92 <Box>93 <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>94 <MRT_TablePagination table={table} />95 </Box>96 <Box sx={{ display: 'grid', width: '100%' }}>97 <MRT_ToolbarAlertBanner stackAlertBanner table={table} />98 </Box>99 </Box>100 </Box>101 );102};103104export default Example;105