Material React Table

boolean

true

PaperProps | ({ table }} => PaperProps

OnChangeFn<boolean>

boolean

false

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

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