Chip and Badge Toggle Filter

Use Chip and Badge Toggles when a column has a small, recognizable status set that is faster to scan as colored pills than as a long checklist.

Source code

grid.plugins = [AdvanceFilterPlugin];
grid.columns = [
  {
    prop: 'status',
    name: 'Status',
    filter: ['string', FILTER_CHIP_BADGE_TOGGLES],
  },
];
grid.filter = true;

return [
  { status: 'Open' },
  { status: 'Pending' },
  { status: 'Closed' },
  { status: 'Open' },
  { status: 'Pending' },
  { status: 'Closed' },
];

Quick start

1
import {
2
  AdvanceFilterPlugin,
3
  FILTER_CHIP_BADGE_TOGGLES,
4
} from '@revolist/revogrid-pro';
5
import '@revolist/revogrid-pro/dist/revogrid-pro.css';
6

7
grid.plugins = [AdvanceFilterPlugin];
8
grid.columns = [
9
  {
10
    prop: 'status',
11
    name: 'Status',
12
    filter: ['string', FILTER_CHIP_BADGE_TOGGLES],
13
  },
14
];
15
grid.filter = true;

The built-in derives its choices from parsed unique values. It supports finite numbers, booleans, and strings while keeping their types distinct. When the column uses ColumnDropdown object options, badge labels automatically reuse the matching option label while saved filter values remain the original typed IDs. A configured badge result takes precedence over the dropdown label.

Operator and state

Body ID	Saved operator	Value shape
`chipBadgeToggles`	`chipBadgeSelection`	`{ values: (string \| number \| boolean)[], includeBlanks: boolean }`

includeBlanks uses the grid’s configured blank semantics. Selecting every available value and including blanks removes the no-op condition.

Restore selected badges

1
grid.filter = {
2
  multiFilterItems: {
3
    status: [
4
      {
5
        id: 1,
6
        type: 'chipBadgeSelection',
7
        value: {
8
          values: ['Open', 'Blocked'],
9
          includeBlanks: false,
10
        },
11
        relation: 'and',
12
      },
13
    ],
14
  },
15
};

Configure labels, colors, and order

Replace the built-in registration with a configured version. The stable type and operator IDs do not change:

1
import {
2
  FILTER_CHIP_BADGE_TOGGLES,
3
  createChipBadgeStructuredFilterType,
4
  defineAdvancedFilterConfig,
5
} from '@revolist/revogrid-pro';
6

7
const statusBadges = createChipBadgeStructuredFilterType({
8
  order: ['Blocked', 'Open', 'Done'],
9
  maxVisibleBadges: 20,
10
  badge: ({ value }) => ({
11
    label: String(value),
12
    color: value === 'Blocked' ? '#ef4444' : '#22c55e',
13
  }),
14
});
15

16
grid.filter = defineAdvancedFilterConfig({
17
  structuredFilterTypes: [statusBadges],
18
});
19
grid.columns = [
20
  { prop: 'status', filter: ['string', FILTER_CHIP_BADGE_TOGGLES] },
21
];

badge may return a plain label or safe { label, className, color } metadata. Labels render as text, not HTML. The default visible limit is 200 pills; the complete value set still controls matching when the mounted UI is limited.

Common mistakes

Do not use presentation labels as saved values. Filtering uses the original typed scalar value.
Do not pass null, undefined, or '' in values; represent blanks with includeBlanks.
Do not create hundreds of status chips without setting a useful maxVisibleBadges; use the Faceted List filter for high-cardinality values.
Do not replace the registration with a different ID. Keep FILTER_CHIP_BADGE_TOGGLES so column configuration and saved state remain compatible.