Material-UI v5 DataGridPro выделяет первую строку при загрузке

Я загружаю действительно простую сетку с помощью DataGridPro, и мне нужно, чтобы верхняя строка была выбрана и выделена при загрузке. Я не видел отличный пример, когда пытался исследовать.

Вот как выглядит мой компонент DataGridPro:

DataGridPro Component

Вот что у меня есть до сих пор:

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

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
0
15
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пример, который приближает вас к тому, что вы хотите, — это Пример контролируемого выбора. В этом примере показано, как удерживать выделение в состоянии и передавать его в качестве реквизита в сетку данных. В примере нет указано, как изменить выбор из-за пределов сетки данных.

Главное, что вам нужно знать, это то, что реквизит selectionModel представляет собой массив идентификаторов выбранных строк, поэтому, чтобы первая строка начиналась как выбранная, вам нужно передать массив с этим идентификатором строки.

Ниже приведена модифицированная версия примера из документации, демонстрирующего выбор первой строки.

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

Edit ControlledSelectionGrid Material Demo (forked)

В приведенном выше коде есть дополнительная сложность из-за 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>
  );
}

Edit ControlledSelectionGrid Material Demo (forked)

Проблема в том, что это работает только для выбора флажка, а не только для выделения строки, что я и ищу. Я посмотрю на основе того, что вы предоставили, смогу ли я заставить его работать без флажка.

gvanriper 17.05.2022 16:48

В этом нет ничего конкретного для checkboxSelection. Если вы просто удалите эту опору, выбор строки будет работать так же: codeandbox.io/s/….

Ryan Cogswell 17.05.2022 16:52

Хорошо, похоже, у меня это было на 90% правильно, тогда единственное, чего мне не хватало, это передачи всего объекта строки, а не только идентификатора. Подтверждено, что обновление только до идентификатора работает.

gvanriper 17.05.2022 17:03

Другие вопросы по теме