[data grid] Triple clicking to edit boolean column type in datagrid

[zdonner100]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/embed/4slft7?module=/src/Demo.tsx&fontsize=12
2. Set editable to true for 'isAdmin' column
   3.Expect boolean column type to be a checkbox accessible by single click but you have to double click in to edit it.

Current behavior

Have to triple click in order to change boolean value checkbox.

Expected behavior

A single click should change a boolean column from true to false and vice versa.

Context

Editing boolean column types effectively.

Your environment

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.20.3 - C:\Program Files\nodejs\node.EXE
npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (131.0.2903.70)
npmPackages:
@emotion/react: ^11.13.0 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/base: 5.0.0-beta.60
@mui/core-downloads-tracker: 5.16.7
@mui/icons-material: ^5.16.5 => 5.16.7
@mui/material: ^5.16.5 => 5.16.7
@mui/material-nextjs: ^5.15.11 => 5.16.6
@mui/private-theming: 5.16.6
@mui/styled-engine: 5.16.6
@mui/system: 5.16.7
@mui/types: 7.2.18
@mui/utils: 5.16.6
@mui/x-data-grid: 7.22.0
@mui/x-data-grid-premium: ^7.7.1 => 7.22.0
@mui/x-data-grid-pro: 7.22.0
@mui/x-date-pickers: ^6.16.3 => 6.20.2
@mui/x-internals: 7.21.0
@mui/x-license: ^7.7.1 => 7.21.0
@types/react: 18.3.3 => 18.3.3
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.0 => 18.3.1
typescript: ^5.4.5 => 5.6.3

Search keywords: boolean column type editing

Search keywords:

[michelengelen]

Hey @zdonner100 ... this is by design. You can change that behavior though if you apply a custom cell renderer:

{
  field: 'isAdmin',
  type: 'boolean',
  width: 120,
  editable: true,
  renderCell: ({ row, api, value }) => (
    <Switch
      onClick={(event) => {
        // stop propagation to prevent row selection
        event.stopPropagation();
        // change value here
        api.updateRows([{ ...row, isAdmin: !value }]);
        console.log('click');
      }}
      checked={value}
    />
  ),
},

Would that solve your use case?

[zdonner100]

Hi @michelengelen,

Yes, this does solve my use case but I am hesitant to standardize our boolean column around a custom renderCell.
2 questions...

1. Are there enhancements to the boolean column type on the horizon? Triple clicking to edit a checkbox field is an ux problem that our business users put in a bug for, it would be much better if this was just a simple checkbox by default (similar to the built in checkbox column)
2. If not, is there a way to make this change globally so that all of our boolean type columns are rendered the same by default without having to repeat renderCell in each use?

Thanks,

[michelengelen]

Hi @michelengelen,

Yes, this does solve my use case but I am hesitant to standardize our boolean column around a custom renderCell. 2 questions...

1. Are there enhancements to the boolean column type on the horizon? Triple clicking to edit a checkbox field is an ux problem that our business users put in a bug for, it would be much better if this was just a simple checkbox by default (similar to the built in checkbox column)

Not that I am aware of. I will treat this issue as a feature request and add it to the board. Maybe we can introduce something like new slots, or props to provide a global override for the standard cell renderer.

2. If not, is there a way to make this change globally so that all of our boolean type columns are rendered the same by default without having to repeat renderCell in each use?

One thing that you can do is to build a custom colDef with all the basic settings you typically have on a boolean col and then spread it wherever needed.

It could look something like this:

import { GRID_BOOLEAN_COL_DEF } from '@mui/x-data-grid';

// ...

const CUSTOM_BOOLEAN_COL_DEF = {
  ...GRID_BOOLEAN_COL_DEF
  type: 'boolean',
  display: 'flex',
  align: 'center',
  headerAlign: 'center',
  renderCell: renderCustomBooleanCell,
}

// in your column definition you can then use it as always

const columns = [
  {
    // other columns
  },
  {
    ...CUSTOM_BOOLEAN_COL_DEF,
    // any other overrides here
  },
]:

Would this be sufficient for now?