Full Screen Toggle Guide

Relevant Table OptionsCopy Anchor Link

Relevant StateCopy Anchor Link

Disable Full Screen ToggleCopy Anchor Link

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

const table = useShadcnTable({
  columns,
  data,
  enableFullScreenToggle: false,
});

return <ShadcnTable table={table} />;

Change Z-Index of Full Screen TableCopy Anchor Link

Under the hood, when the table is full screen, these classes are applied to the root table container:

fixed inset-0 z-50 h-dvh max-h-dvh w-dvw max-w-dvw rounded-none border-0 m-0 p-0

If you need to change the zIndex of the full screen table, you can do so by passing in a stTableLayoutProps table option with a style object that has a zIndex property (or a z-* Tailwind class in className).

stTableLayoutProps: ({ table }) => ({
  style: {
    zIndex: table.state.isFullScreen ? 1000 : undefined,
  },
});