如何排列网格以实现以下布局？

Question

概述

• 我正在尝试在MUI Grid上排列项目。
• 有多个行和列是动态的
• 每行可以有固定的第一列和任意数量的列（动态）
• 列的动态部分对于每行都是可滚动的

要求

• 由于每行的第一列是固定的，并且所有行的其他列都是可滚动的_我想将这些可滚动列分组到单个组并实现单个滚动条

当前的

预期的

目前的实施

    {<Grid container>
      {rowArray.map(x => (
        <>
          <Grid item>"Fixed Item"</Grid>
          {columnArray.map(x => (
            <Grid item>Dynamic items</Grid>
          ))}
        </>
      ))}
    </Grid>}

Answer 1

使用网格分割空间时，请始终先将屏幕分割为列，然后将每列分割为一些行。

import { Box, Grid } from "@mui/material";

const fixedItems = [
  "row 1's fixed item",
  "row 2's fixed item",
  "row 3's fixed item",
];
const dynamicItems = [
  ["row 1 dynamic item 1"],
  [
    "row 2 dynamic item 1",
    "row 2 dynamic item 2",
    "row 2 dynamic item 3",
    "row 2 dynamic item 4",
    "row 2 dynamic item 5",
  ],
  ["row 3 dynamic item 1", "dynamic item 2"],
];

const Item = (props) => {
  return (
    <Box
      sx={{
        display: "inline-block",
        backgroundColor: "cyan",
        borderRadius: 2,
        textAlign: "center",
        width: "300px",
        mx: 1,
      }}
    >
      {props.name}
    </Box>
  );
};

function Test() {
  return (
    <Box
      sx={{
        width: "90%",
        direction: "ltr",
        mx: "auto",
      }}
    >
      <Grid container spacing={1} sx={{ border: "1px solid red" }}>
        <Grid
          item
          xs={3}
          container
          spacing={1}
          sx={{
            textAlign: "center",
            border: "1px solid yellow",
          }}
        >
          {fixedItems.map((item, index) => (
            <Grid item xs={12} key={index}>
              <Item name={item} />
            </Grid>
          ))}
        </Grid>
        <Grid
          item
          xs={9}
          container
          spacing={1}
          sx={{
            overflowX: "scroll",
            whiteSpace: "nowrap",
            border: "1px solid green",
          }}
        >
          {dynamicItems.map((item, index) => (
            <Grid item xs={12} key={index}>
              {item.map((innerItem, innerIndex) => (
                <Item name={innerItem} key={innerIndex} />
              ))}
            </Grid>
          ))}
        </Grid>
      </Grid>
    </Box>
  );
}
export default Test;