Material-UI v5 DataGridPro 在加载时突出显示第一行

Question

我正在使用 DataGridPro 加载一个非常基本的网格，我需要在加载时选择并突出显示顶行。我尝试研究时没有看到很好的例子。

这是我的 DataGridPro 组件的样子：

这是我目前的情况：

                        <DataGridPro
                           disableMultipleSelection={true}
                           columns={[
                              {
                                 field: "startDate",
                                 headerName: "Start Date",
                                 description: "start.",
                                 type: "date",
                                 valueFormatter: ({ value }) => dateFormatter(value),
                                 flex: 0.5,
                              },
                              {
                                 field: "endDate",
                                 headerName: "End Date",
                                 description: "end.",
                                 type: "date",
                                 valueFormatter: ({ value }) => (value !== null ? dateFormatter(value) : null),
                                 flex: 0.5,
                              },
                           ]}
                           rows={data ? data : null}
                        ></DataGridPro>

我不确定该怎么做，因为我在他们的演示或 API 文档中找不到任何示例。

Answer 1

最接近您想要的示例是 Controlled selection example。该示例演示了如何将选择保持在状态并将其作为道具传递给数据网格。该示例不包括如何从数据网格外部更改选择。

你需要知道的主要事情是 selectionModel prop 是所选行 id 的数组，所以要让第一行开始被选中，你需要传入一个包含该行的数组id.

下面是演示如何选择第一行的文档中示例的修改版本。

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";

export default function ControlledSelectionGrid() {
  const { data, loading } = useDemoData({
    dataSet: "Commodity",
    rowLength: 10,
    maxColumns: 6
  });
  const [selectionModel, setSelectionModel] = React.useState([]);
  const dataRef = React.useRef(data);
  React.useEffect(() => {
    // The ref allows me to leave `data` out of the dependency array
    // of the next effect, so that it is only triggered by changes
    // to the `loading` state.
    dataRef.current = data;
  });
  React.useEffect(() => {
    if (!loading) {
      const { rows } = dataRef.current;
      if (rows.length > 0) {
        setSelectionModel([rows[0].id]);
      }
    }
  }, [loading]);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        checkboxSelection
        onSelectionModelChange={(newSelectionModel) => {
          setSelectionModel(newSelectionModel);
        }}
        selectionModel={selectionModel}
        {...data}
      />
    </div>
  );
}

由于 useDemoData 异步加载数据，上述代码有些额外的复杂性。根据数据传递到数据网格的方式，您可以避免 useEffect 调用并将其简化为如下所示：

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";

export default function ControlledSelectionGrid({ data }) {
  const [selectionModel, setSelectionModel] = React.useState(() => {
    const { rows } = data;
    const initialSelectionModel = [];
    if (rows.length > 0) {
      initialSelectionModel.push(rows[0].id);
    }
    return initialSelectionModel;
  });
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        checkboxSelection
        onSelectionModelChange={(newSelectionModel) => {
          setSelectionModel(newSelectionModel);
        }}
        selectionModel={selectionModel}
        {...data}
      />
    </div>
  );
}

Material-UI v5 DataGridPro 在加载时突出显示第一行

Material-UI v5 DataGridPro Highlight First Row Upon Load

reactjs

material-ui