Блог

Я использую сетку данных пользовательского интерфейса Material(открытая версия). Все столбцы доступны для редактирования Есть один столбец, называемый столбцом «Розничная торговля», и этот столбец принимает данные из API. Мне нужно, чтобы при редактировании этого столбца он вел себя как поле автозаполнения.

На самом деле я использовал «valueOptions» и набрал: «Однократный выбор» в определении столбца.Это изменяет ячейку на SelectComponent, но мне нужно автозаполнение вместо Select component.

Мой вопрос заключается в том, как ввести компонент автозаполнения вместо компонента выбора

Найдите codesandbox здесь https://7hues.csb.app/

 import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
const rows = [
{
id: 1,
// Needs to be one of the values from valueOptions
country: "Spain"
},
{
id: 2,
// Needs to be one of the values from valueOptions
country: "France"
},
{
id: 3,
// Needs to be one of the values from valueOptions
country: "Brazil"
}
];
export default function ColumnTypesGrid() {
return (
<div style={{ height: 300, width: "100%" }}>
<DataGrid
columns={[
{
field: "country",
width: 150,
headerName: "Country",
editable: true,
// type and valueOptions properties are interdependent
type: "singleSelect",
valueOptions: [
"Bulgaria",
"Netherlands",
"France",
"United Kingdom",
"Spain",
"Brazil",
"India"
]
}
]}
rows={rows}
/>
</div>
);
}