admin管理员组文章数量:1406924
While creating table using Grid it two columns are overlapping when resize the window, I am not much familiar with react so, this is my code below which I tried, but it results me in below image. Could you please help me in this? Also, will it be possible if we resize the window, then column which is overlapping comes below other column like a stack.
<Grid container spacing={4} sx={{ width: '100%' }}>
{columns.map((column, colIndex) => (
<Grid item xs={12} sm={6} md={4} key={colIndex}>
<Box sx={{
display: 'flex', flexDirection: 'column', width: 'auto', position: 'relative',
}}>
<Table>
<TableBody>
{column.map((row: FormattedValue, rowIndex: number) => (
<TableRow
key={rowIndex}
sx={{
'&:nth-of-type(odd)': {
backgroundColor: 'zebra.odd',
},
flexDirection: 'column',
width: '100%',
}}
>
{row.label && (
<TableCell
component='th'
scope='row'
sx={{
p: 1,
pl: 2,
height: 32,
whiteSpace: 'pre',
flexDirection: 'column',
}}
>
{row.label as string}:
</TableCell>
)}
<TableCell
align={row.label ? 'right' : 'left'}
sx={{
p: 1,
pr: 2,
height: 32,
minWidth: 100,
}}
>
<Typography
sx={{
color: 'primary.main',
fontSize: 14,
}}
>
{render(row)}
</Typography>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Grid>
))}
</Grid>
While creating table using Grid it two columns are overlapping when resize the window, I am not much familiar with react so, this is my code below which I tried, but it results me in below image. Could you please help me in this? Also, will it be possible if we resize the window, then column which is overlapping comes below other column like a stack.
<Grid container spacing={4} sx={{ width: '100%' }}>
{columns.map((column, colIndex) => (
<Grid item xs={12} sm={6} md={4} key={colIndex}>
<Box sx={{
display: 'flex', flexDirection: 'column', width: 'auto', position: 'relative',
}}>
<Table>
<TableBody>
{column.map((row: FormattedValue, rowIndex: number) => (
<TableRow
key={rowIndex}
sx={{
'&:nth-of-type(odd)': {
backgroundColor: 'zebra.odd',
},
flexDirection: 'column',
width: '100%',
}}
>
{row.label && (
<TableCell
component='th'
scope='row'
sx={{
p: 1,
pl: 2,
height: 32,
whiteSpace: 'pre',
flexDirection: 'column',
}}
>
{row.label as string}:
</TableCell>
)}
<TableCell
align={row.label ? 'right' : 'left'}
sx={{
p: 1,
pr: 2,
height: 32,
minWidth: 100,
}}
>
<Typography
sx={{
color: 'primary.main',
fontSize: 14,
}}
>
{render(row)}
</Typography>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Grid>
))}
</Grid>
1 Answer
Reset to default 1Below is one approach to solving the issue.
- Remove the custom flex settings on the TableRow and TableCell so that the table renders normally.
- Wrap the
tablein aTableContainer(or aBoxwith overflow settings) to handle any overflow issues. - Use
Gridbreakpoints (xs, sm, md, etc.) so that on small screens (xs) each column takes 100% width (stacked), while on larger screens (sm, md) the columns are arranged side‐by‐side.
Below is a complete test code with sample data try it buy adding your data
import "./styles.css";
import React from 'react';
import {
Grid,
Box,
Table,
TableBody,
TableRow,
TableCell,
Typography,
TableContainer,
Paper,
} from '@mui/material';
export default function App() {
const sampleData = [
[
{ label: 'Name', value: 'John Doe' },
{ label: 'Age', value: '28' },
{ label: 'City', value: 'New York' },
],
[
{ label: 'Name', value: 'Jane Smith' },
{ label: 'Age', value: '32' },
{ label: 'City', value: 'Los Angeles' },
],
[
{ label: 'Name', value: 'Alice Johnson' },
{ label: 'Age', value: '24' },
{ label: 'City', value: 'Chicago' },
],
];
const renderCell = (row) => row.value;
return (
<Grid container spacing={2} sx={{ width: '100%' }}>
{sampleData.map((column, colIndex) => (
<Grid item xs={12} sm={6} md={4} key={colIndex}>
<Box sx={{ width: '100%', overflowX: 'auto' }}>
<TableContainer component={Paper}>
<Table>
<TableBody>
{column.map((row, rowIndex) => (
<TableRow key={rowIndex} sx={{ '&:nth-of-type(odd)': { backgroundColor: 'grey.100' } }}>
{row.label && (
<TableCell
component="th"
scope="row"
sx={{ p: 1, pl: 2, minWidth: 80 }}
>
{row.label}:
</TableCell>
)}
<TableCell align={row.label ? 'right' : 'left'} sx={{ p: 1, pr: 2 }}>
<Typography sx={{ color: 'primary.main', fontSize: 14 }}>
{renderCell(row)}
</Typography>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
</Grid>
))}
</Grid>
);
}
codesandbox code
Grid Breakpoints
Each Grid item is defined as xs={12} sm={6} md={4}. This means
xs (extra-small screens): 12 columns (full width) Blockquote
So they stack one on top of the other.
sm (small screens): 6 columns each (two in a row).
md (medium screens and up): 4 columns each (three in a row).
Table Container & Overflow
The Table is wrapped inside a TableContainer that automatically handles overflow. If the table becomes too wide, it will scroll horizontally rather than overlapping.
Removing Custom Flex
By not applying any extra flex settings to the table elements (flexDirection: 'column' on the TableRow), we let the standard table layout take over. This keeps cells aligned properly.
Responsive Stacking
With the breakpoint settings on the Grid, when the window is resized to extra-small sizes, each column (or card) will take up the full width and stack vertically.
Adjust the styling as needed.
本文标签： javascriptRows overlapping when resize windowStack Overflow
版权声明：本文标题：javascript - Rows overlapping when resize window - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744975095a2635467.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论