Filter Selection Cascade

Use filter.selection.cascadeOptions.enabled to make selection options context-aware.

In cascade mode, RevoGrid builds each column’s selection list from rows matching all active filters except filters for the current column. This keeps the current column reversible while still narrowing options in related columns.

Source code

TypeScript

import { defineCustomElements } from '@revolist/revogrid/loader';
import { AdvanceFilterPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

defineCustomElements();

const rows = [
  { country: 'Germany', city: 'Berlin', department: 'Sales' },
  { country: 'Germany', city: 'Munich', department: 'Engineering' },
  { country: 'France', city: 'Paris', department: 'Sales' },
  { country: 'France', city: 'Lyon', department: 'Support' },
  { country: 'Poland', city: 'Warsaw', department: 'Engineering' },
  { country: 'Poland', city: 'Krakow', department: 'Support' },
];

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');

  grid.columns = [
    { name: 'Country', prop: 'country', filter: ['selection'] },
    { name: 'City', prop: 'city', filter: ['selection'] },
    { name: 'Department', prop: 'department', filter: ['selection'] },
  ];

  grid.additionalData = { stretch: 'all' };
  grid.plugins = [AdvanceFilterPlugin, ColumnStretchPlugin];
  grid.filter = {
    selection: {
      cascadeOptions: {
        enabled: true,
      },
    },
  };
  grid.theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;

  document.querySelector(parentSelector)?.appendChild(grid);
  grid.source = rows;

  return () => grid.remove();
}

Vue

<template>
  <RevoGrid
    :theme="isDark ? 'darkCompact' : 'compact'"
    :columns="columns"
    :source="rows"
    :plugins="plugins"
    :additionalData="additionalData"
    :filter="filter"
    hide-attribution
  />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import RevoGrid from '@revolist/vue3-datagrid';
import { AdvanceFilterPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentThemeVue } from '../composables/useRandomData';

const { isDark } = currentThemeVue();

const columns = ref([
  { name: 'Country', prop: 'country', filter: ['selection'] },
  { name: 'City', prop: 'city', filter: ['selection'] },
  { name: 'Department', prop: 'department', filter: ['selection'] },
]);

const rows = ref([
  { country: 'Germany', city: 'Berlin', department: 'Sales' },
  { country: 'Germany', city: 'Munich', department: 'Engineering' },
  { country: 'France', city: 'Paris', department: 'Sales' },
  { country: 'France', city: 'Lyon', department: 'Support' },
  { country: 'Poland', city: 'Warsaw', department: 'Engineering' },
  { country: 'Poland', city: 'Krakow', department: 'Support' },
]);

const plugins = [AdvanceFilterPlugin, ColumnStretchPlugin];

const additionalData = computed(() => ({
  stretch: 'all',
}));

const filter = computed(() => ({
  selection: {
    cascadeOptions: {
      enabled: true,
    },
  },
}));
</script>

React

import { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { AdvanceFilterPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

const rows = [
  { country: 'Germany', city: 'Berlin', department: 'Sales' },
  { country: 'Germany', city: 'Munich', department: 'Engineering' },
  { country: 'France', city: 'Paris', department: 'Sales' },
  { country: 'France', city: 'Lyon', department: 'Support' },
  { country: 'Poland', city: 'Warsaw', department: 'Engineering' },
  { country: 'Poland', city: 'Krakow', department: 'Support' },
];

export default function FilterSelectionCascade() {
  const { isDark } = currentTheme();

  const columns = useMemo(
    () => [
      { name: 'Country', prop: 'country', filter: ['selection'] },
      { name: 'City', prop: 'city', filter: ['selection'] },
      { name: 'Department', prop: 'department', filter: ['selection'] },
    ],
    [],
  );

  const plugins = useMemo(() => [AdvanceFilterPlugin, ColumnStretchPlugin], []);

  const additionalData = useMemo(() => ({ stretch: 'all' }), []);

  const filter = useMemo(
    () => ({
      selection: {
        cascadeOptions: {
          enabled: true,
        },
      },
    }),
    [],
  );

  return (
    <RevoGrid
      columns={columns}
      source={rows}
      plugins={plugins}
      additionalData={additionalData}
      filter={filter}
      hide-attribution
      theme={isDark() ? 'darkCompact' : 'compact'}
    />
  );
}

Angular

import { Component, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { AdvanceFilterPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

@Component({
  selector: 'filter-selection-cascade-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [columns]="columns"
      [source]="source"
      [additionalData]="additionalData"
      [filter]="filter"
      [hideAttribution]="true"
      [theme]="theme"
      [plugins]="plugins"
      style="height: 400px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class FilterSelectionCascadeGridComponent {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';

  source = [
    { country: 'Germany', city: 'Berlin', department: 'Sales' },
    { country: 'Germany', city: 'Munich', department: 'Engineering' },
    { country: 'France', city: 'Paris', department: 'Sales' },
    { country: 'France', city: 'Lyon', department: 'Support' },
    { country: 'Poland', city: 'Warsaw', department: 'Engineering' },
    { country: 'Poland', city: 'Krakow', department: 'Support' },
  ];

  columns = [
    { name: 'Country', prop: 'country', filter: ['selection'] },
    { name: 'City', prop: 'city', filter: ['selection'] },
    { name: 'Department', prop: 'department', filter: ['selection'] },
  ];

  additionalData = { stretch: 'all' };

  filter = {
    selection: {
      cascadeOptions: {
        enabled: true,
      },
    },
  };

  plugins = [AdvanceFilterPlugin, ColumnStretchPlugin];
}

How this works

• If country = Germany is active, opening the city filter shows Berlin and Munich.
• Opening the country filter still shows Germany, France, and Poland.
• The feature is opt-in and does not change default behavior.

Configuration

grid.filter = {
  selection: {
    cascadeOptions: {
      enabled: true,
    },
  },
};

Compatibility with custom getItems

If selection.getItems is provided, that custom source is used as-is. Cascade options are only applied to the built-in source loader.