Full Screen Toggle Guide - Material React Table V3 Docs

On This Page

Full Screen Toggle Feature Guide

Relevant Table Options

#	Type	Default Value	More Info Links
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

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

Disable Full Screen Toggle

The full screen toggle button is enabled by default. You can hide it by setting the enableFullScreenToggle table option 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 V3, 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 table option with a style object that has a zIndex property.

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

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