Filter Header

The Filter Header Plugin enhances RevoGrid by embedding interactive filter controls directly within the column headers.

Source code

TypeScript

src/components/filter-slider/FilterAdvanced.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { AdvanceFilterPlugin, ColumnStretchPlugin, FilterHeaderPlugin } 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',
      filter: ['number', 'slider']
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
  ];
  // Define plugin
  grid.plugins = [AdvanceFilterPlugin, ColumnStretchPlugin, FilterHeaderPlugin];

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

Vue

src/components/filter-header/FilterAdvanced.vue

<template>
  <VGrid
    :theme="isDark ? 'darkCompact' : 'compact'"
    :columns="columns"
    :source="rows"
    :plugins="plugins"
    :additionalData="additionalData"
    :filter="filter"
    style="min-height: 400px;"
    :autoSizeColumn="{
      mode: 'autoSizeAll',
      letterBlockSize: 8,
    }"
    hide-attribution
    resize
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { currentThemeVue } from '../composables/useRandomData';
import {
  type ColumnGrouping,
  type ColumnRegular,
  VGrid,
} from '@revolist/vue3-datagrid';
import {
  AdvanceFilterPlugin,
  FilterHeaderPlugin,
  ColumnStretchPlugin,
  SameValueMergePlugin,
  RowSelectPlugin
} from '@revolist/revogrid-pro';
import { makeData } from '../composables/makeData';

const { isDark } = currentThemeVue();

const columns = ref<(ColumnRegular | ColumnGrouping)[]>([
  {
    name: 'Superheroes',
    children: [
      {
        name: 'First Name',
        prop: 'firstName',
        filter: true,
        rowSelect: true,
      },
      {
        name: 'Last Name',
        prop: 'lastName',
        filter: ['selection'],
      },
    ],
  },
  {
    name: 'Params',
    children: [
      {
        name: 'Gender',
        prop: 'gender',
        filter: ['selection'],
      },
    ],
  },
]);

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

const rows = ref(makeData(100));

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

const filter = ref({});
</script>

React

src/components/filter-header/FilterAdvanced.tsx

import { useState, useMemo, useRef } from 'react';
import { RevoGrid, type DataType } from '@revolist/react-datagrid';
import {
  AdvanceFilterPlugin,
  ColumnStretchPlugin,
  FilterHeaderPlugin,
} 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',
        filter: ['number', 'slider'],
      },
      {
        name: '🍎 Fruit',
        prop: 'name',
      },
    ],
    []
  );

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

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

export default FilterAdvanced;

Angular

src/components/filter-header/FilterAdvancedAngular.ts

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

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

  columns = [
    {
      name: '🆔 ID',
      prop: 'id',
      filter: ['number', 'slider'],
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
  ];

  additionalData = {
    stretch: 'all',
  };

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

This means that users can apply text-based and selection-based filters right at the grid level, without needing separate filter panels.

This feature allows for complex multi-criteria filtering that is both intuitive and highly efficient.

What makes this so powerful - is its ability to wrap existing header content with dynamic filter inputs, ensuring that the grid remains clean and user-friendly while offering robust filtering capabilities. With optimized performance through input debouncing, the Filter Header Plugin significantly improves data exploration, making it an essential tool for managing and analyzing large datasets.

Usage

To enable this powerful filtering capability, you simply need to include the FilterHeaderPlugin in your grid’s plugins array.

import { AdvanceFilterPlugin, FilterHeaderPlugin } from '@revolist/revogrid-pro'
const plugins = ref([AdvanceFilterPlugin, FilterHeaderPlugin])

This plugin automatically integrates filter input elements into your column headers, so when you mark a column with a filter property, it dynamically adds a text input or selection control right below the header.