Почему не отображается последний столбец в MUI DataGrid?
Я использую MUI DataGrid, и это столбцы:
const columns = [
{
field: "taxon",
headerName: "Taxon",
flex: 1,
minWidth: 300,
renderCell: (params) => {
const index = inputLines.findIndex((line) => line.id === params.id);
return (
<div style={{ position: "relative" }} className="searchBar">
<input
className="searchInput"
placeholder="Nom du taxon"
value={params.row.taxon}
onClick={() => {
setSelectedIndex(index);
setProduits([]);
}}
</div>
);
},
},
{
field: "qty",
headerName: "Quantité",
width: 80,
disableColumnMenu: true,
disableColumnSort: true,
sortable: false,
renderCell: (params) => {
return (
<OutlinedInput
notched
classes={classes}
fullWidth
value={params.row.qty}
type="number"
/>
);
},
},
...
{
field: "",
headerName: "Actions",
width: 140,
renderCell: (params) => {
return (
<div className="d-flex align-items-center justify-content-between w-100">
<div className="tooltip">
<div className="icon blue-icon">
<FaCopy
color="#172B4D"
style={{ cursor: "pointer" }}
size={22}
/>
</div>
<span className="tooltiptext">Copier cette ligne</span>
</div>
</div>
);
},
},
];
он работал нормально, но когда я добавил minWidth: 300 в первый столбец, последний столбец (Действия) не отображается, вместо этого отображается пробел. Эта проблема возникает только в мобильном измерении, хотя dataGrid можно прокручивать (другие переполненные столбцы отображаются правильно).