MRT logoMaterial React Table

Legacy V2 Docs
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.

    Note: This guide has become much more simple since the introduction of the useMaterialReactTable hook in v2.
    No more tableInstanceRef or useReducer rerender hacks required!

    Relevant Table Options

    1
    boolean
    true
    MRT Customize Toolbars Docs
    2
    boolean
    true
    3
    boolean
    true
    4
    BoxProps | ({ table }) => BoxProps
    Material UI Box 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
    BoxProps | ({ table }) => BoxProps
    Material UI Box Props
    9
    'left' | 'right'
    'right'
    10
    'bottom' | 'top' | 'both'
    'bottom'
    11
    'bottom' | 'top' | 'none'
    'top'
    12
    'bottom' | 'top' | 'both' | 'none'
    'top'
    13
    ReactNode | ({ table }) => ReactNode
    14
    ({ table }) => ReactNode
    15
    ({ table, groupedAlert, selectedAlert }) => ReactNode
    16
    ({ table}) => ReactNode
    17
    ReactNode | ({ table }) => ReactNode
    18
    ({ table }) => ReactNode

    Relevant State

    1
    boolean
    false
    2
    boolean
    false

    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

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    Here is a table rendered with the lighter weight MRT_Table sub-component, rendering 5 rows.
    DylanMurray261 Erdman FordEast DaphneKentucky
    RaquelKohler769 Dominic GroveColumbusOhio
    ErvinReinger566 Brakus InletSouth LindaWest Virginia
    BrittanyMcCullough722 Emie StreamLincolnNebraska
    BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

    Source Code

    1import { useMemo } from 'react';
    2import {
    3 MRT_Table, //import alternative sub-component if we do not want toolbars
    4 type MRT_ColumnDef,
    5 useMaterialReactTable,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8
    9export const Example = () => {
    10 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11 //column definitions...
    36 );
    37
    38 const table = useMaterialReactTable({
    39 columns,
    40 data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
    41 enableColumnActions: false,
    42 enableColumnFilters: false,
    43 enablePagination: false,
    44 enableSorting: false,
    45 mrtTheme: (theme) => ({
    46 baseBackgroundColor: theme.palette.background.default, //change default background color
    47 }),
    48 muiTableBodyRowProps: { hover: false },
    49 muiTableProps: {
    50 sx: {
    51 border: '1px solid rgba(81, 81, 81, .5)',
    52 caption: {
    53 captionSide: 'top',
    54 },
    55 },
    56 },
    57 muiTableHeadCellProps: {
    58 sx: {
    59 border: '1px solid rgba(81, 81, 81, .5)',
    60 fontStyle: 'italic',
    61 fontWeight: 'normal',
    62 },
    63 },
    64 muiTableBodyCellProps: {
    65 sx: {
    66 border: '1px solid rgba(81, 81, 81, .5)',
    67 },
    68 },
    69 renderCaption: ({ table }) =>
    70 `Here is a table rendered with the lighter weight MRT_Table sub-component, rendering ${table.getRowModel().rows.length} rows.`,
    71 });
    72
    73 //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
    74 return <MRT_Table table={table} />;
    75};
    76
    77export default Example;
    78

    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 toolbar
    renderTopToolbarCustomActions: () => (
    <Typography variant="h3">Customer's Table</Typography>
    ),
    //Adding a custom button to the bottom toolbar
    renderBottomToolbarCustomActions: ({ table }) => (
    <Button
    variant="contained"
    color="lightblue"
    //extract all selected rows from the table instance and do something with them
    onClick={() => handleDownloadRows(table.getSelectedRowModel().rows)}
    >
    Download Selected Rows
    </Button>
    ),
    });
    return <MaterialReactTable table={table} />;

    Custom Toolbar Actions Example

    Demo

    HomerSimpson3953000
    MargeSimpson3860000
    BartSimpson1046000
    LisaSimpson8120883
    MaggieSimpson122
    1-5 of 5

    Source Code

    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';
    12
    13const Example = () => {
    14 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    15 //column definitions...
    36 );
    37
    38 const table = useMaterialReactTable({
    39 columns,
    40 data,
    41 enableRowSelection: true,
    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_ToggleFullScreenButton table={table} />
    81 </Box>
    82 ),
    83 });
    84
    85 return <MaterialReactTable table={table} />;
    86};
    87
    88export 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 bottom
    positionToolbarAlertBanner: 'bottom',
    positionGlobalFilter: 'left', //move the search box to the left of the top toolbar
    positionPagination: '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 bar
    value: 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 toolbar
    muiToolbarAlertBannerProps: 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 }) => (
    <Box
    sx={{
    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.

    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
    NedFlanders60100000
    ApuNahasapeemapetilon4080000
    MontgomeryBurns10010000000
    WaylonSmithers4580000
    EdnaKrabappel5580000
    1-10 of 11

    Source Code

    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';
    15
    16const 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];
    34
    35const Example = () => {
    36 const table = useMaterialReactTable({
    37 columns,
    38 data,
    39 enableRowSelection: true,
    40 initialState: { showGlobalFilter: true },
    41 });
    42
    43 return (
    44 <Box sx={{ border: 'gray 2px dashed', padding: '16px' }}>
    45 {/* Our Custom External Top Toolbar */}
    46 <Box
    47 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 <Button
    62 color="primary"
    63 onClick={() => {
    64 alert('Add User');
    65 }}
    66 variant="contained"
    67 >
    68 Create New Account
    69 </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};
    103
    104export default Example;
    105