Material-UI v5 DataGridPro Highlight First Row Upon Load

Question

I am loading a really basic grid using DataGridPro and I need the top row to be selected and highlighted upon loading. I did not see a great example when I tried researching.

This is what my DataGridPro component looks like:

Here is what I have so far:

                         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}
                        >

I'm not sure what to do since I can't find any examples in their demos or API documentation.

user_7495930 · Answer

The example that gets you closest to what you want is the Controlled selection example. That example demonstrates how to hold the selection in state and pass it as a prop to the data grid. The example does not include how to change the selection from outside the data grid.

The main thing you need to know is that the selectionModel prop is an array of the selected row ids, so to have the first row start as selected, you need to pass in an array with that row id.

Below is a modified version of the example from the documentation that demonstrates selecting the first row.

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 (
    
       {
          setSelectionModel(newSelectionModel);
        }}
        selectionModel={selectionModel}
        {...data}
      />
    
  );
}

There is some extra complexity in the above code due to useDemoData loading the data asynchronously. Depending on how your data is passed to the data grid, you may be able to avoid the useEffect calls and simplify this to something like the following:

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 (
    
       {
          setSelectionModel(newSelectionModel);
        }}
        selectionModel={selectionModel}
        {...data}
      />
    
  );
}

Material-UI v5 DataGridPro Highlight First Row Upon Load

1 Answers