MUI data grid boolean cell type conditional formatting

Question

Is there a way to conditionally format MUI datagrid cell that has a 'boolean' type.

Here is a sandbox from documentation with a checkbox column that has a boolean type: https://codesandbox.io/s/1ckfjp?file=/demo.tsx:1771-1855

const columns: GridColumns = [
    ...
    {
      field: 'isPaid',
      headerName: 'Is paid?',
      type: 'boolean',
      width: 140,
      editable: true,
    },
    ...

Is using cellRender (in cols definition (https://mui.com/x/react-data-grid/column-definition/#rendering-cells)) the only way to render my own green or red icons depending if value is true or false? Or is there a better way?

Answer 1

So far this seems the easiest way:

const columns: GridColumns = [
    ...
    {
      field: 'isPaid',
      headerName: 'Is paid?',
      type: 'boolean',
      width: 140,
      editable: true,
      renderCell: (params) => {
        return params.value ? (
          <CheckIcon
            style={{
              color: theme.palette.success.light,
            }}
          />
        ) : (
          <CloseIcon
            style={{
              color: grey[500],
            }}
          />
        );
      },
    },
    ...