如何为以下布局设置网格？

Question

概述

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

要求

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

当前

预期

当前实现

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

- devanil

Answer 1

在使用网格布局时，应该先将屏幕划分为列，然后再将每一列分成若干行。请注意保留HTML标签。

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;

- Hamed Siaban