How to add a controllable checkbox to each row: Implementation method in MUI Datagrid

Question

I know the way to add checkboxes or textfields is to use renderCell and it works, I can see the checkboxes: However, I don't understand how I should control the checkboxes/textfields for each row individually. For example, what if I want row 1 to have the "fill" variant of the TextField, and row 2 to have the "outline" variant? import*asReactfrom"react";import{DataGrid}from"@mui/x-data-grid&q

P粉402806175 · Answer

Please take a look at the example I provided for you. Hope I can answer your question. https://codesandbox.io/s/optimistic-leaf-xm32lk ?file=/Demo.tsx

import * as React from "react";
import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import Checkbox from "@mui/joy/Checkbox";

function RenderCheckBox(props: GridRenderCellParams) {
  const [checked, setChecked] = React.useState(props.value); // Initiated react binded value with param from `rows`

  // Handler for user clicks to set checkbox mark or unset it
  const handleChange = (event: React.ChangeEvent) => {
    setChecked(event.target.checked);
  };
  //The bind for dynamic mark/unmark: checked={checked}
  //The handler for user clicks: onChange={handleChange}
  return (
    
  );
}

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 30 },
  { field: "col1", headerName: "Column 1", width: 150 },
  { field: "col2", headerName: "Column 2", width: 150 },
  {
    field: "checked",
    headerName: "Column 3",
    width: 150,
    renderCell: RenderCheckBox
  }
];
// Here 'checked' field will pass the param to component.
const rows = [
  { id: 1, col1: "Example", col2: "Content", checked: true },
  { id: 2, col1: "Example", col2: "Content", checked: false },
  { id: 3, col1: "Example", col2: "Content", checked: false }
];

export default function RenderCellGrid() {
  return (
    
      
    
  );
}