Skip to content

Commit fea94c9

Browse files
KevinVandyKevinVandy
committed
remove +1 on modal calc
1 parent c60afb0 commit fea94c9

File tree

2 files changed

+97
-97
lines changed

2 files changed

+97
-97
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Paper, { type PaperProps } from '@mui/material/Paper';
2-
import { useTheme } from '@mui/material'
2+
import { useTheme } from '@mui/material';
33
import { MRT_TableContainer } from './MRT_TableContainer';
44
import { type MRT_RowData, type MRT_TableInstance } from '../../types';
55
import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -61,7 +61,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
6161
right: 0,
6262
top: 0,
6363
width: '100dvw',
64-
zIndex: theme.zIndex.modal + 1,
64+
zIndex: theme.zIndex.modal,
6565
}
6666
: {}),
6767
...paperProps?.style,

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

Lines changed: 95 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,122 @@
11
import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material';
22
import { type Meta } from '@storybook/react';
3-
import { MaterialReactTable, useMaterialReactTable, type MRT_ColumnDef } from '../../src';
3+
import {
4+
MaterialReactTable,
5+
useMaterialReactTable,
6+
type MRT_ColumnDef,
7+
} from '../../src';
48

59
const meta: Meta = {
6-
title: 'Fixed Bugs/AppBar overlaps with Fullscreen Modal',
10+
title: 'Fixed Bugs/AppBar overlaps with Fullscreen Modal',
711
};
812

913
export default meta;
1014

11-
12-
1315
//example data type
1416
type Person = {
15-
name: {
16-
firstName: string;
17-
lastName: string;
18-
};
19-
address: string;
20-
city: string;
21-
state: string;
17+
name: {
18+
firstName: string;
19+
lastName: string;
20+
};
21+
address: string;
22+
city: string;
23+
state: string;
2224
};
2325

2426
//nested data is ok, see accessorKeys in ColumnDef below
2527
const data: Person[] = [
26-
{
27-
name: {
28-
firstName: 'John',
29-
lastName: 'Doe',
30-
},
31-
address: '261 Erdman Ford',
32-
city: 'East Daphne',
33-
state: 'Kentucky',
28+
{
29+
name: {
30+
firstName: 'John',
31+
lastName: 'Doe',
3432
},
35-
{
36-
name: {
37-
firstName: 'Jane',
38-
lastName: 'Doe',
39-
},
40-
address: '769 Dominic Grove',
41-
city: 'Columbus',
42-
state: 'Ohio',
33+
address: '261 Erdman Ford',
34+
city: 'East Daphne',
35+
state: 'Kentucky',
36+
},
37+
{
38+
name: {
39+
firstName: 'Jane',
40+
lastName: 'Doe',
4341
},
44-
{
45-
name: {
46-
firstName: 'Joe',
47-
lastName: 'Doe',
48-
},
49-
address: '566 Brakus Inlet',
50-
city: 'South Linda',
51-
state: 'West Virginia',
42+
address: '769 Dominic Grove',
43+
city: 'Columbus',
44+
state: 'Ohio',
45+
},
46+
{
47+
name: {
48+
firstName: 'Joe',
49+
lastName: 'Doe',
5250
},
53-
{
54-
name: {
55-
firstName: 'Kevin',
56-
lastName: 'Vandy',
57-
},
58-
address: '722 Emie Stream',
59-
city: 'Lincoln',
60-
state: 'Nebraska',
51+
address: '566 Brakus Inlet',
52+
city: 'South Linda',
53+
state: 'West Virginia',
54+
},
55+
{
56+
name: {
57+
firstName: 'Kevin',
58+
lastName: 'Vandy',
6159
},
62-
{
63-
name: {
64-
firstName: 'Joshua',
65-
lastName: 'Rolluffs',
66-
},
67-
address: '32188 Larkin Turnpike',
68-
city: 'Omaha',
69-
state: 'Nebraska',
60+
address: '722 Emie Stream',
61+
city: 'Lincoln',
62+
state: 'Nebraska',
63+
},
64+
{
65+
name: {
66+
firstName: 'Joshua',
67+
lastName: 'Rolluffs',
7068
},
69+
address: '32188 Larkin Turnpike',
70+
city: 'Omaha',
71+
state: 'Nebraska',
72+
},
7173
];
7274

7375
const columns: MRT_ColumnDef<Person>[] = [
74-
{
75-
accessorKey: 'name.firstName', //access nested data with dot notation
76-
header: 'First Name',
77-
size: 150,
78-
},
79-
{
80-
accessorKey: 'name.lastName',
81-
header: 'Last Name',
82-
size: 150,
83-
},
84-
{
85-
accessorKey: 'address', //normal accessorKey
86-
header: 'Address',
87-
size: 200,
88-
},
89-
{
90-
accessorKey: 'city',
91-
header: 'City',
92-
size: 150,
93-
},
94-
{
95-
accessorKey: 'state',
96-
header: 'State',
97-
size: 150,
98-
},
76+
{
77+
accessorKey: 'name.firstName', //access nested data with dot notation
78+
header: 'First Name',
79+
size: 150,
80+
},
81+
{
82+
accessorKey: 'name.lastName',
83+
header: 'Last Name',
84+
size: 150,
85+
},
86+
{
87+
accessorKey: 'address', //normal accessorKey
88+
header: 'Address',
89+
size: 200,
90+
},
91+
{
92+
accessorKey: 'city',
93+
header: 'City',
94+
size: 150,
95+
},
96+
{
97+
accessorKey: 'state',
98+
header: 'State',
99+
size: 150,
100+
},
99101
];
100102

101-
102103
export const FullscreenIsAboveAppbar = () => {
104+
const table = useMaterialReactTable({
105+
columns,
106+
data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
107+
});
103108

104-
105-
const table = useMaterialReactTable({
106-
columns,
107-
data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
108-
});
109-
110-
return <>
111-
<CssBaseline />
112-
<AppBar position="sticky">
113-
<Toolbar>
114-
<p>App</p>
115-
</Toolbar>
116-
</AppBar>
117-
<Box padding={2}>
118-
<MaterialReactTable table={table} />
119-
</Box>
120-
</>;
109+
return (
110+
<>
111+
<CssBaseline />
112+
<AppBar position="sticky">
113+
<Toolbar>
114+
<p>App</p>
115+
</Toolbar>
116+
</AppBar>
117+
<Box padding={2}>
118+
<MaterialReactTable table={table} />
119+
</Box>
120+
</>
121+
);
121122
};
122-

0 commit comments

Comments
 (0)