Filter Selection

The Advanced Filtering Plugin for RevoGrid extends the grid’s capabilities by introducing powerful filtering options, making data management more efficient and flexible. This plugin includes new filter types, such as slider and selection, which provide intuitive ways for users to interact with and refine data views.

Source code

TypeScript

src/components/filter-selection/FilterAdvanced.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { AdvanceFilterPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
defineCustomElements();

import { currentTheme, useRandomData } from '../composables/useRandomData';

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();
export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');

  grid.source = createRandomData(100);
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
      filter: ['string', 'selection']
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];
  // Define plugin
  grid.plugins = [AdvanceFilterPlugin, ColumnStretchPlugin];

  grid.additionalData = {
    stretch: 'all'
  };
  grid.filter = {};
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue

src/components/filter-selection/FilterAdvanced.vue

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

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

const { isDark } = currentThemeVue();
const { createRandomData } = useRandomData();

const columns = ref([
  { name: '🆔 ID', prop: 'id' },
  { name: '🍎 Fruit', prop: 'name', filter: ['string', 'selection'] },
  { name: '💰 Price', prop: 'price' },
]);

const plugins = ref([AdvanceFilterPlugin, ColumnStretchPlugin]);

const rows = ref(createRandomData(100));

const additionalData = ref({
  stretch: 'all',
});
</script>

React

src/components/filter-selection/FilterAdvanced.tsx

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

function FilterAdvanced() {
  const { isDark } = currentTheme();
  const { createRandomData } = useRandomData();
  const gridRef = useRef<HTMLRevoGridElement>(null);
  const [source] = useState<DataType[]>(createRandomData(100));

  const columns = useMemo(
    () => [
      {
        name: '🆔 ID',
        prop: 'id',
      },
      {
        name: '🍎 Fruit',
        prop: 'name',
        filter: ['string', 'selection'],
      },
      {
        name: '💰 Price',
        prop: 'price',
      },
    ],
    []
  );

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

  return (
    <RevoGrid
      ref={gridRef}
      columns={columns}
      source={source}
      additionalData={additionalData}
      hide-attribution
      filter
      theme={isDark() ? 'darkCompact' : 'compact'}
      plugins={[AdvanceFilterPlugin, ColumnStretchPlugin]}
    />
  );
}

export default FilterAdvanced;

Angular

src/components/filter-selection/FilterAdvancedAngular.ts

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

@Component({
  selector: 'filter-selection-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 FilterSelectionGridComponent {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  source = useRandomData().createRandomData(100);

  columns = [
    {
      name: '🆔 ID',
      prop: 'id',
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
      filter: ['string', 'selection'],
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];

  additionalData = {
    stretch: 'all',
  };

  filter = {};
  plugins = [AdvanceFilterPlugin, ColumnStretchPlugin];
}

Why it matters

• Custom Filter Types: Enables the use of slider and selection filters, allowing users to quickly narrow down data based on specific criteria.
• Flexible and Extensible: This plugin demonstrates the potential for creating custom plugins, encouraging developers to expand the grid’s functionality further.
• Automatic Theme Support: The plugin adapts to light or dark themes based on user settings.

Key Features

• Custom Filter Types: Enables the use of slider and selection filters, allowing users to quickly narrow down data based on specific criteria.
• Flexible and Extensible: This plugin demonstrates the potential for creating custom plugins, encouraging developers to expand the grid’s functionality further.
• Automatic Theme Support: The plugin adapts to light or dark themes based on user settings.

Filter Selection Options

• sortDirection: The default sort direction, can be ‘asc’ or ‘desc’ or ‘none’
• getItems: A custom source for selection values. It accepts either one loader function for every selection-filter column or a record keyed by column prop.
• cascadeOptions.enabled: Enables context-aware selection options that apply active filters from other columns and ignore the current column filter.
• selectionTitle: The title of the selection filter
• sliderTitle: The title of the slider filter

grid.filter = {
    localization: {
        captions: {
            selectionTitle: 'Selection',
            sliderTitle: 'Slider',
        },
    },
    selection: {
        sortDirection: 'asc', // default sort direction, can be 'asc' or 'desc' or 'none'
        getItems: async (prop) => {
            if (prop !== 'name') {
                return [];
            }

            return [
                { value: 'apple', label: 'Apple' },
                { value: 'banana', label: 'Banana' },
                { value: 'orange', label: 'Orange' },
            ];
        },
    },
};

Usage Example

import { AdvanceFilterPlugin } from '@revolist/revogrid-pro';
    // ...
grid.columns = [
    {
        // ...
        filter: ['string', 'selection']
    }
];
grid.plugins = [AdvanceFilterPlugin];
grid.filter = {
    localization: {
        captions: {
            selectionTitle: 'Selection',
        },
    },
    selection: {
        sortDirection: 'asc', // default sort direction, can be 'asc' or 'desc' or 'none'
    },
};

Context-aware cascading options

Enable context-aware selection options with selection.cascadeOptions.enabled.

• For column X, options are built from rows matching all active filters except filters for X.
• This keeps current-column values reversible while still narrowing related column options.
• The feature is opt-in, and default behavior is unchanged when omitted.

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

Custom List Source

By default, the selection filter builds its checkbox list from the current grid data. Use filter.selection.getItems when the list should come from somewhere else, for example:

• server-side or infinite-scroll datasets
• a curated allow-list of accepted values
• normalized values that differ from the rendered cell text

The loader receives the current column prop and may return data synchronously or asynchronously.

grid.filter = {
    selection: {
        getItems: async (prop) => {
            if (prop !== 'name') {
                return [];
            }

            const response = await fetch('/api/filter-options/names');
            const items = await response.json();

            return items.map((item: { id: string; title: string }) => ({
                value: item.id.toLowerCase(),
                label: item.title,
            }));
        },
    },
};

If only some columns need custom values, pass a record keyed by column prop:

grid.filter = {
    selection: {
        getItems: {
            name: async () => [
                { value: 'apple', label: 'Apple' },
                { value: 'banana', label: 'Banana' },
            ],
            category: () => [
                { value: 'fresh', label: 'Fresh' },
                { value: 'frozen', label: 'Frozen' },
            ],
        },
    },
};

Keep value aligned with the value used during filter comparison. The built-in selection filter compares lower-cased string values, so custom lists should usually provide lower-cased value fields.

Customization and Extensibility

This plugin highlights the extensibility of RevoGrid’s plugin system, showcasing how developers can build and integrate advanced features tailored to specific needs. The flexibility of RevoGrid plugins enables comprehensive data manipulation and display control, making it an ideal choice for complex data-driven applications. For a deeper dive into plugin development, refer to the RevoGrid Plugin Documentation.