Filter Header

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

interface ColumnRegular {
  /**
       * Hide filter input in the header
       */
      hideFilterHeader?: boolean;
  /**
       * Hide filter input count in the header
       */
      hideFilterHeaderCount?: boolean;
  /**
       * Filter placeholder
       */
      filterPlaceholder?: string
}

Plugin API

FilterHeaderPlugin

The FilterHeaderPlugin enhances RevoGrid by adding interactive filter input elements to column headers, allowing users to filter grid data directly from the header. It dynamically integrates with existing column templates, providing a seamless UI for text-based filters and selection-based filters.

Key Features:

• Adds input fields below each column header for applying text-based filters.
• Integrates with the AdvanceFilterPlugin to handle complex filtering operations, supporting multiple filter types like selection and slider filters.
• Automatically wraps existing header templates to include filter inputs, maintaining existing header content alongside new filter functionality.
• Utilizes debouncing to optimize input handling, minimizing performance impact from frequent user interactions.

Usage:

• Include this plugin in RevoGrid’s plugin array to activate header filtering capabilities.
• Customize column definitions to specify filter types using the filter property.

Events:

• Listens for BEFORE_HEADER_RENDER_EVENT to modify header templates and append filter UI components.

Usage Example:

import { AdvanceFilterPlugin, FilterHeaderPlugin } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.plugins = [AdvanceFilterPlugin, FilterHeaderPlugin];

grid.columns = [
  {
    prop: 'name',
    name: 'Name',
    filter: ['input'],
  },
];

By integrating this plugin, RevoGrid provides an enhanced user experience with improved data filtering capabilities directly accessible from the grid interface.

class FilterHeaderPlugin {}