MRT logoMaterial React Table

On This Page

    Full Screen Toggle Feature Guide

    Relevant Table Options

    1
    boolean
    true
    MRT Full Screen Toggle Docs
    2
    PaperProps | ({ table }} => PaperProps
    Material UI Paper API Docs
    3
    OnChangeFn<boolean>
    MRT Full Screen Toggle Docs

    Relevant State

    1
    boolean
    false

    Disable Full Screen Toggle

    The full screen toggle button is enabled by default. You can hide it by setting the enableFullScreenToggle prop to false.

    const table = useMaterialReactTable({
    columns,
    data,
    enableFullScreenToggle: false,
    });
    return <MaterialReactTable table={table} />;

    Change Z-Index of Full Screen Table

    Under the hood in Material React Table V2, when the table is full screen, these styles are applied to the root mui paper component:

    {
    bottom: 0,
    height: '100vh',
    left: 0,
    margin: 0,
    maxHeight: '100vh',
    maxWidth: '100vw',
    padding: 0,
    position: 'fixed',
    right: 0,
    top: 0,
    width: '100vw',
    zIndex: 999,
    }

    If you need to change the zIndex of the full screen table, you can do so by passing in a muiTablePaperProps prop with a style object that has a zIndex property.

    muiTablePaperProps: ({ table }) => ({
    //not sx
    style: {
    zIndex: table.getState().isFullScreen ? 1000 : undefined,
    },
    });

    Note: The sx prop will not work here because the style prop was used internally instead of the sx prop for higher specificity.