Fixed theme index in fullscreen mode (#1048)

Co-authored-by: Hendrik Lücke-Tieke <[email protected]>

Author: helt

packages/material-react-table/src/components/table/MRT_TablePaper.tsx

@@ -1,4 +1,5 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
+import { useTheme } from '@mui/material'
 import { MRT_TableContainer } from './MRT_TableContainer';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -33,6 +34,8 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const theme = useTheme();
+
   return (
     <Paper
       elevation={2}
@@ -58,7 +61,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
               right: 0,
               top: 0,
               width: '100dvw',
-              zIndex: 999,
+              zIndex: theme.zIndex.modal + 1,
             }
           : {}),
         ...paperProps?.style,

packages/material-react-table/stories/fixed-bugs/fullscreen-with-appbar.stories.tsx

@@ -0,0 +1,122 @@
+import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material';
+import { type Meta } from '@storybook/react';
+import { MaterialReactTable, useMaterialReactTable, type MRT_ColumnDef } from '../../src';
+
+const meta: Meta = {
+    title: 'Fixed Bugs/AppBar overlaps with Fullscreen Modal',
+};
+
+export default meta;
+
+
+
+//example data type
+type Person = {
+    name: {
+        firstName: string;
+        lastName: string;
+    };
+    address: string;
+    city: string;
+    state: string;
+};
+
+//nested data is ok, see accessorKeys in ColumnDef below
+const data: Person[] = [
+    {
+        name: {
+            firstName: 'John',
+            lastName: 'Doe',
+        },
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+    },
+    {
+        name: {
+            firstName: 'Jane',
+            lastName: 'Doe',
+        },
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+    },
+    {
+        name: {
+            firstName: 'Joe',
+            lastName: 'Doe',
+        },
+        address: '566 Brakus Inlet',
+        city: 'South Linda',
+        state: 'West Virginia',
+    },
+    {
+        name: {
+            firstName: 'Kevin',
+            lastName: 'Vandy',
+        },
+        address: '722 Emie Stream',
+        city: 'Lincoln',
+        state: 'Nebraska',
+    },
+    {
+        name: {
+            firstName: 'Joshua',
+            lastName: 'Rolluffs',
+        },
+        address: '32188 Larkin Turnpike',
+        city: 'Omaha',
+        state: 'Nebraska',
+    },
+];
+
+const columns: MRT_ColumnDef<Person>[] = [
+    {
+        accessorKey: 'name.firstName', //access nested data with dot notation
+        header: 'First Name',
+        size: 150,
+    },
+    {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+        size: 150,
+    },
+    {
+        accessorKey: 'address', //normal accessorKey
+        header: 'Address',
+        size: 200,
+    },
+    {
+        accessorKey: 'city',
+        header: 'City',
+        size: 150,
+    },
+    {
+        accessorKey: 'state',
+        header: 'State',
+        size: 150,
+    },
+];
+
+
+export const FullscreenIsAboveAppbar = () => {
+
+
+    const table = useMaterialReactTable({
+        columns,
+        data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+    });
+
+    return <>
+        <CssBaseline />
+        <AppBar position="sticky">
+            <Toolbar>
+                <p>App</p>
+            </Toolbar>
+        </AppBar>
+        <Box padding={2}>
+            <MaterialReactTable table={table} />
+        </Box>
+    </>;
+};
+