If I scroll either to the left or to the right, it lags so much. I can’t also filter or click on the row. How do I fix this and what is happening here?
Codesandbox: https://codesandbox.io/s/controlledfilters-material-demo-sample-qy2qf7?file=/demo.js:2242-3000
{
field: "cartItems",
headerName: "Cart Items",
type: "number",
width: 400,
align: "center",
renderCell: ({ value }) => {
const t = Object.entries(
value.reduce((prev, item) => {
if (!prev[item.id]) prev[item.id] = { ...item, nest: [] };
prev[item.id].nest.push(item);
return prev;
}, {})
).map(([id, obj], idx) => (
<List key={id + obj.color}>
<ListItemText primary={obj.name + " " + obj.size} />
<li>
{obj.nest.map((nest, idx) => (
<li key={idx}>
<ListItemText
secondary={nest.color + " (" + nest.quantity + " pcs)"}
/>
</li>
))}
</li>
</List>
));
console.log(t);
return t;
}
},