How can I write a controlled filter for a boolean field?

[ayhid]

The problem in depth

Hello It's not really a problem but more a need for an example to write a custom filter that uses a boolean field.

Your environment

`npx @mui/envinfo`

System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.11.0 - ~/.volta/tools/image/node/20.11.0/bin/node
    npm: 10.5.0 - ~/projects/assess-manager-dash/frontend/node_modules/.bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.92
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.4 
    @emotion/styled: ^11.10.5 => 11.11.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.14 
    @mui/icons-material: ^5.14.15 => 5.15.14 
    @mui/lab: ^5.0.0-alpha.137 => 5.0.0-alpha.169 
    @mui/material: ^5.14.12 => 5.15.14 
    @mui/material-nextjs: ^5.15.3 => 5.15.11 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system: ^5.14.7 => 5.15.14 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-data-grid: ^7.0.0 => 7.1.0 
    @mui/x-data-grid-pro: ^7.1.0 => 7.1.0 
    @mui/x-date-pickers:  7.2.0 
    @mui/x-date-pickers-pro: ^7.2.0 => 7.2.0 
    @mui/x-license:  7.0.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @types/react: ^18.2.73 => 18.2.73 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components:  5.3.3 
    typescript: ^5.3.3 => 5.4.3 

Search keywords: boolean filter
Order ID: 85622

[MBilalShafi]

You can write custom filters in general by using the colDef.filterOperators property.

const columns = [
  {
    ...otherProperties,
    filterOperators: customOperators;
  }
];

You can check this documentation section where this concept is explained with a few examples: https://mui.com/x/react-data-grid/filtering/customization/#create-a-custom-operator

The same would be the case for a boolean field, in this example, I tried to override the default filterOperators for boolean field and added another one (is not): https://stackblitz.com/edit/react-craaty?file=Demo.tsx

Let me know if you have further questions.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.