i am using React-Virtuoso library with material-ui table. i am stuck in a issue from yesterday,my table head is sticky and have transparent background same for table rows also. i dont want any another color.
when i scroll the table rows i can see them behind the table head. z-index cant fix the issue because of background color. please guys help me to fix this issue.
what i want is when i scroll the table rows shouldnt visible behind table head.
senior developers help needed.
codesandbox link : https://codesandbox.io/p/sandbox/epic-shtern-3jhn7q?workspaceId=b878446b-0701-41fb-b944-d231bbae84f1
here’s complete code:
import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { TableVirtuoso } from "react-virtuoso";
const sample = [
["Frozen yoghurt", 159, 6.0, 24, 4.0],
["Ice cream sandwich", 237, 9.0, 37, 4.3],
["Eclair", 262, 16.0, 24, 6.0],
["Cupcake", 305, 3.7, 67, 4.3],
["Gingerbread", 356, 16.0, 49, 3.9],
];
function createData(id, dessert, calories, fat, carbs, protein) {
return { id, dessert, calories, fat, carbs, protein };
}
const columns = [
{
width: 200,
label: "Dessert",
dataKey: "dessert",
},
{
width: 120,
label: "Caloriesu00A0(g)",
dataKey: "calories",
numeric: true,
},
{
width: 120,
label: "Fatu00A0(g)",
dataKey: "fat",
numeric: true,
},
{
width: 120,
label: "Carbsu00A0(g)",
dataKey: "carbs",
numeric: true,
},
{
width: 120,
label: "Proteinu00A0(g)",
dataKey: "protein",
numeric: true,
},
];
const rows = Array.from({ length: 200 }, (_, index) => {
const randomSelection = sample[Math.floor(Math.random() * sample.length)];
return createData(index, ...randomSelection);
});
const VirtuosoTableComponents = {
Scroller: React.forwardRef((props, ref) => (
<TableContainer {...props} ref={ref} />
)),
Table: (props) => (
<Table
{...props}
sx={{
borderCollapse: "separate",
borderSpacing: "0px 8px",
}}
/>
),
TableHead: React.forwardRef((props, ref) => (
<TableHead
{...props}
ref={ref}
style={{
background: "rgba(255, 255, 255, 0.1)",
position: "sticky",
zIndex: 2,
top: "8px",
}}
/>
)),
TableRow: React.forwardRef((props, ref) => (
<TableRow
{...props}
ref={ref}
sx={{
background: "rgba(255, 255, 255, 0.1)",
}}
/>
)),
TableBody: React.forwardRef((props, ref) => (
<TableBody {...props} ref={ref} />
)),
};
function fixedHeaderContent() {
return (
<TableRow>
{columns.map((column) => (
<TableCell
key={column.dataKey}
variant="head"
align={column.numeric || false ? "right" : "left"}
sx={{
borderTop: "1px solid rgba( 255, 255, 255, 0.18 )",
borderBottom: "1px solid rgba( 255, 255, 255, 0.18 )",
"&:first-of-type": {
borderLeft: "1px solid rgba( 255, 255, 255, 0.18 )",
borderTopLeftRadius: "10px",
borderBottomLeftRadius: "10px",
},
"&:last-of-type": {
borderRight: "1px solid rgba( 255, 255, 255, 0.18 )",
borderTopRightRadius: "10px",
borderBottomRightRadius: "10px",
},
}}
>
{column.label}
</TableCell>
))}
</TableRow>
);
}
function rowContent(_index, row) {
return (
<React.Fragment>
{columns.map((column) => (
<TableCell
key={column.dataKey}
align={column.numeric || false ? "right" : "left"}
style={{
borderTop: "1px solid rgba( 255, 255, 255, 0.18 )",
borderBottom: "1px solid rgba( 255, 255, 255, 0.18 )",
"&:first-of-type": {
borderLeft: "1px solid rgba( 255, 255, 255, 0.18 )",
borderTopLeftRadius: "10px",
borderBottomLeftRadius: "10px",
},
"&:last-of-type": {
borderRight: "1px solid rgba( 255, 255, 255, 0.18 )",
borderTopRightRadius: "10px",
borderBottomRightRadius: "10px",
},
}}
>
{row[column.dataKey]}
</TableCell>
))}
</React.Fragment>
);
}
export default function ReactVirtualizedTable() {
return (
<div
style={{
height: 400,
width: "100%",
background: "rgba(255, 255, 255, 0.1)",
}}
>
<TableVirtuoso
data={rows}
components={VirtuosoTableComponents}
fixedHeaderContent={fixedHeaderContent}
itemContent={rowContent}
/>
</div>
);
}
i dont want to see table row scrolled behind the table head.