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"
    :grouping="{
      props: ['name'],
      expandedAll: true,
    }"
    :filter="
      {
        localization: {
          captions: {
            selectionTitle: 'Selection',
          },
        },
        selection: {
          sortDirection: 'asc',
        },
      } as FilterConfig
    "
    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,
  editorCheckbox,
  type FilterConfig,
} from '@revolist/revogrid-pro';

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

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

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
      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-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',
    },
    {
      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’
• 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'
    },
};

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'
    },
};

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.