MRT logoMaterial React Table

    Customizing Toolbars Feature Guide

    This guide will show you how to hide or customize the Top and Bottom Toolbars in Material React Table.

    Relevant Props

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    boolean
    true

    No Description Provided... Yet...

    2
    boolean
    true

    No Description Provided... Yet...

    3
    boolean
    true

    No Description Provided... Yet...

    4

    No Description Provided... Yet...

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

    No Description Provided... Yet...

    6

    No Description Provided... Yet...

    7

    No Description Provided... Yet...

    8

    No Description Provided... Yet...

    9

    No Description Provided... Yet...

    10

    No Description Provided... Yet...

    11

    No Description Provided... Yet...

    12
    'bottom' | 'top' | 'both' | 'none'

    No Description Provided... Yet...

    13

    No Description Provided... Yet...

    14

    No Description Provided... Yet...

    15

    No Description Provided... Yet...

    16

    No Description Provided... Yet...

    17

    No Description Provided... Yet...

    Relevant State

    #
    State Option
    Type
    Default Value
    More Info Links
    1
    boolean
    false

    No Description Provided... Yet...

    2
    boolean
    false

    No Description Provided... Yet...

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

    Customize Toolbar buttons

    Everything in the Toolbars is customizable. You can add your own buttons or change the order of the buttons 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 put the icon buttons in a different order, and even slide in 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>
    )}
    />

    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.

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

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

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