Je sais que la façon d'ajouter une case à cocher ou un champ de texte est d'utiliser renderCell et cela fonctionne, je peux voir la case à cocher :
Cependant, je ne comprends pas comment contrôler la case à cocher/le champ de texte de chaque ligne individuellement. Par exemple, que se passe-t-il si je souhaite que la ligne 1 ait la variante « remplissage » du TextField et que la ligne 2 ait la variante « contour » ?
import * as React from "react"; import {DataGrid} from "@mui/x-data-grid"; import {Box, Checkbox, TextField} from "@mui/material"; const columns = [ {field: "id", headerName: "ID", width: 30}, {field: "col1", headerName: "Column 1", width: 150}, {field: "col2", headerName: "Column 2", width: 150}, {field: "col3", headerName: "Column 3", width: 150, renderCell: (params) => <Checkbox />}, ]; const rows = [ {id: 1, col1: "Example", col2: "Content", col3: ??????}, {id: 2, col1: "Example", col2: "Content", col3: ??????}, {id: 3, col1: "Example", col2: "Content", col3: ??????}, ]; export default function Table() { return ( <Box sx={{}}> <DataGrid rows={rows} columns={columns} /> </Box> ); }
J'ai essayé d'ajouter un nouveau accessoire <Checkbox />
,其中包含诸如 <Checkbox defaultChecked/>
like, mais bien sûr, cela n'a pas fonctionné.
Veuillez jeter un œil à l’exemple que je vous ai fourni. J'espère pouvoir répondre à votre question. https://codesandbox.io/s/optimistic-leaf-xm32lk ?file=/Demo.tsx