Skip to content
RevoGrid [Pro]

Tri-state Boolean Filter

Use the tri-state boolean filter when a boolean column needs one compact control for All, Yes, and No. It is especially useful when missing values may optionally belong to the No result.

Source code
TypeScriptts
grid.plugins = [AdvanceFilterPlugin];
grid.columns = [
  { prop: 'request', name: 'Request' },
  {
    prop: 'approved',
    name: 'Approved',
    filter: ['boolean', FILTER_TRI_STATE_BOOLEAN],
  },
];
grid.filter = true;

return [
  { request: 'Accepted', approved: true },
  { request: 'Rejected', approved: false },
  { request: 'Awaiting review', approved: null },
];

Quick start

Section titled “Quick start”
import {
  AdvanceFilterPlugin,
  FILTER_TRI_STATE_BOOLEAN,
} from '@revolist/revogrid-pro';
import '@revolist/revogrid-pro/dist/revogrid-pro.css';


grid.plugins = [AdvanceFilterPlugin];
grid.columns = [
  {
    prop: 'approved',
    name: 'Approved',
    filter: ['boolean', FILTER_TRI_STATE_BOOLEAN],
  },
];
grid.source = [{ approved: true }, { approved: false }, { approved: null }];
grid.filter = true;

The editor reports Yes, No, and blank counts from provider-backed valueCounts. Choosing All removes its condition.

Operator and saved state

Section titled “Operator and saved state”
  • Structured type: FILTER_TRI_STATE_BOOLEAN ('triStateBoolean')
  • Operator: TRI_STATE_BOOLEAN_OPERATOR ('triStateBoolean')
  • Value: { state: 'yes' | 'no', coerceBlank: boolean }

Yes matches strict true. No matches strict false; with coerceBlank: true, it also matches values classified as blank by the active Core blank policy.

grid.filter = {
  multiFilterItems: {
    approved: [
      {
        id: 1,
        type: 'triStateBoolean',
        value: { state: 'no', coerceBlank: true },
        relation: 'and',
      },
    ],
  },
};

Use the same condition for programmatic restore. There is no saved { state: 'all' } condition because All means no filtering.

Configure blank behavior

Section titled “Configure blank behavior”

The blank toggle delegates to the shared Core blank-semantics policy. Configure that policy at grid level and override individual columns only when necessary.

grid.filter = {
  blankSemantics: {
    null: true,
    undefined: true,
    emptyString: true,
    whitespaceOnlyString: false,
    missingProperty: true,
  },
};


grid.columns = [
  {
    prop: 'approved',
    filter: ['boolean', FILTER_TRI_STATE_BOOLEAN],
    blankSemantics: {
      emptyString: false,
    },
  },
];

The structured body is already built in and has no presentation factory options. Customize its operator label with localization.filterNames.triStateBoolean and body captions through the standard advanced-filter localization config.

Common mistakes

Section titled “Common mistakes”
  • Do not use strings such as 'true' and 'false'; Yes and No match boolean primitives strictly.
  • Do not persist All as an active condition; remove the column’s condition instead.
  • Do not assume coerceBlank means every falsy value. It uses configured blank semantics, not JavaScript truthiness.
  • Do not duplicate blank rules in application code; set grid- or column-level blankSemantics.
  • For remote data, provide complete valueCounts if the browser holds only a page of rows.
Section titled “Related guides”