MRT logoMaterial React Table

On This Page

    Toolbar Customization Guide

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

    Relevant Props

    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

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

    No Toolbars Example


    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    DylanMurray261 Erdman FordEast DaphneKentucky
    RaquelKohler769 Dominic GroveColumbusOhio
    ErvinReinger566 Brakus InletSouth LindaWest Virginia
    BrittanyMcCullough722 Emie StreamLincolnNebraska
    BransonFrami32188 Larkin TurnpikeCharlestonSouth 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...
    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

    Customize Toolbar buttons

    Everything in the toolbars is 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 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} />
    </>
    )}
    />
    );

    Add Custom Toolbar Buttons/Components

    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>
    )}
    />

    Full Custom Top Toolbar Example


    Demo

    HomerSimpson3953000
    MargeSimpson3860000
    BartSimpson1046000
    LisaSimpson8120883
    MaggieSimpson122

    Rows per page

    1-5 of 5

    Source Code

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

    Position Toolbar Areas

    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>}
    />

    Customize Toolbar Props and Styles

    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,
    }}
    />

    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 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,
    }}
    />

    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.

    <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>
    )}
    />
    );

    Create Your Own External Toolbar Component

    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.


    Demo

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

    HomerSimpson3953000
    MargeSimpson386000
    BartSimpson10460
    LisaSimpson8120883
    MaggieSimpson122

    Source Code

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