diff --git a/packages/material-react-table/src/components/table/MRT_TablePaper.tsx b/packages/material-react-table/src/components/table/MRT_TablePaper.tsx index a67721938..532c67127 100644 --- a/packages/material-react-table/src/components/table/MRT_TablePaper.tsx +++ b/packages/material-react-table/src/components/table/MRT_TablePaper.tsx @@ -1,5 +1,5 @@ import Paper, { type PaperProps } from '@mui/material/Paper'; -import { useTheme } from '@mui/material' +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'; @@ -61,7 +61,7 @@ export const MRT_TablePaper = ({ right: 0, top: 0, width: '100dvw', - zIndex: theme.zIndex.modal + 1, + zIndex: theme.zIndex.modal, } : {}), ...paperProps?.style, diff --git a/packages/material-react-table/stories/fixed-bugs/fullscreen-with-appbar.stories.tsx b/packages/material-react-table/stories/fixed-bugs/fullscreen-with-appbar.stories.tsx index bd2df7401..131206224 100644 --- a/packages/material-react-table/stories/fixed-bugs/fullscreen-with-appbar.stories.tsx +++ b/packages/material-react-table/stories/fixed-bugs/fullscreen-with-appbar.stories.tsx @@ -1,122 +1,122 @@ import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material'; import { type Meta } from '@storybook/react'; -import { MaterialReactTable, useMaterialReactTable, type MRT_ColumnDef } from '../../src'; +import { + MaterialReactTable, + useMaterialReactTable, + type MRT_ColumnDef, +} from '../../src'; const meta: Meta = { - title: 'Fixed Bugs/AppBar overlaps with Fullscreen Modal', + 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; + 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: 'John', + lastName: 'Doe', }, - { - name: { - firstName: 'Jane', - lastName: 'Doe', - }, - address: '769 Dominic Grove', - city: 'Columbus', - state: 'Ohio', + address: '261 Erdman Ford', + city: 'East Daphne', + state: 'Kentucky', + }, + { + name: { + firstName: 'Jane', + lastName: 'Doe', }, - { - name: { - firstName: 'Joe', - lastName: 'Doe', - }, - address: '566 Brakus Inlet', - city: 'South Linda', - state: 'West Virginia', + address: '769 Dominic Grove', + city: 'Columbus', + state: 'Ohio', + }, + { + name: { + firstName: 'Joe', + lastName: 'Doe', }, - { - name: { - firstName: 'Kevin', - lastName: 'Vandy', - }, - address: '722 Emie Stream', - city: 'Lincoln', - state: 'Nebraska', + address: '566 Brakus Inlet', + city: 'South Linda', + state: 'West Virginia', + }, + { + name: { + firstName: 'Kevin', + lastName: 'Vandy', }, - { - name: { - firstName: 'Joshua', - lastName: 'Rolluffs', - }, - address: '32188 Larkin Turnpike', - city: 'Omaha', - state: 'Nebraska', + 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[] = [ - { - 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, - }, + { + 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.) + }); - - const table = useMaterialReactTable({ - columns, - data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.) - }); - - return <> - - - -

App

-
-
- - - - ; + return ( + <> + + + +

App

+
+
+ + + + + ); }; -