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
Relevant Table Options
Hide or Disable Toolbars
enableBottomToolbartable options that you can use to show or hide the toolbars.
Alternatively, you could just use a different MRT component that does not have the toolbars built-in. For example, use the
<MRT_Table />components instead of the
No Toolbars Example
|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|
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
renderToolbarInternalActionstable 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'.
Add Custom Toolbar Buttons/Components
renderBottomToolbarCustomActionstable 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
tableinstance that you can use to perform actions or extract data from the table.
Custom Toolbar Actions Example
1-5 of 5
Position Toolbar Areas
positionToolbarDropZonetable 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.
Customize Toolbar Props and Styles
mantineToolbarAlertBannerBadgePropstable 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
styleprops. Some have found this useful for forcing
position: absoluteon alerts, etc.
Customize Linear Progress Bars
The progress bars that display in both the top and bottom toolbars become visible when either the
showProgressBarsstate options are set to
true. You can customize the progress bars by passing in props to the
mantineProgressPropstable option. By default, the progress bars have a full animated progress bar, but you can set the
valueprop 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.
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
showAlertBannerstate option to
true. You can then customize the messages and other stylings using the
mantineToolbarAlertBannerPropsto create your custom message. You probably saw this in the Remote Data or React Query examples.
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
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.
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
1-10 of 11