MUI Datagrid, how to do conditional cellrender based on checkboxSelection

Question

I am trying to make a conditional cellRender in a datagrid, if the row checkbox has been checked.

In my picture below, I want to remove the number counter component on that row when the checkbox is clicked.

Is there a way to do this with params? How else could I achieve this

const columns: GridColDef[] = [
    { field: 'id', headerName: 'LIO', flex: 1, minWidth: 80, maxWidth: 100 },
    { field: 'article', headerName: 'Artikel', flex: 1, minWidth: 100, maxWidth: 380 },
    { field: 'currentStock', headerName: 'Saldo', type: 'number', flex: 0.5, minWidth: 70 },
    {
      field: "inventedStock",
      headerName: "Inventerat Antal",
      flex: 0.5,
      minWidth: 130,
      type: 'number',

      renderCell: params => {
        if( params.row.checkboxSelection) {
          return (
            <ChooseNumber updateArticle={updateField} scannedArticle={{
              article: {
                compartments: undefined, units: [], price: 0, supplier: '', supplierArticleNr: '', name: '', alternativeNames: [], lioNr: '', alternativeProducts: [], Z41: false
              },
              unit: '', quantity: 2,
              nr: 3,
    
            }} ></ChooseNumber>
          );
        } else {
          return(2);
        }
  
        }
    },

I have tried to find a property in the datagrid params interface, but I can't figure it out. Any help much appreciated!

Answer 1

To my knowledge it is not possible to do it only using the params since they don't contain any information about the status of the checkbox.

However the selection of the DataGrid component can be controlled. This can help us track the checked ids which we can use to conditionally render our columns.

To track the checked rows we need to add an new state like so

const [selectedIds, setSelectedIds] = useState([]);

In the renderCell method we check if the id is in the selectedIds if so render the custom input, else render the other thing.

{
  field: "inventedStock",
  headerName: "Inventerat Antal",
  flex: 0.5,
  minWidth: 130,
  type: "number",
  renderCell: (params) => {
    console.log(params);
    if (selectedIds.includes(params.id) === false) {
      return (
        <ChooseNumber
          updateArticle={updateField}
          scannedArticle={{
            article: {
              compartments: undefined, units: [], price: 0, supplier: "", supplierArticleNr: "", name: "", alternativeNames: [], lioNr: "", alternativeProducts: [], Z41: false,
            },
            unit: "",
            quantity: 2,
            nr: 3,
          }}
        ></ChooseNumber>
      );
    }
    return "2";
  },
}

The DataGrid component with your rows, columns and added selectionModel functionality

<DataGrid
  rows={rows}
  columns={columns}
  ...
  selectionModel={selectedIds}
  onSelectionModelChange={(newModel) => {
    setSelectedIds(newModel);
  }}
/>

I hope this helps with your project!