Filter

Module Extensions

FilterCaptions (Extended from @revolist/revogrid)

interface FilterCaptions {
  /**
       * The title of the selection filter
       */
      selectionTitle: string;
  /**
       * The title of the slider filter
       */
      sliderTitle: string;
  /**
       * The title of the date filter
       */
      dateTitle: string
}

---

ColumnFilterConfig (Extended from @revolist/revogrid)

interface ColumnFilterConfig {
  /**
       * The configuration for the selection filter
       */
      selection?: SelectionConfig;
  /**
       * The configuration for the slider filter
       */
      slider?: Pick<RangeSliderProps, 'showTooltips' | 'showRangeDisplay' | 'formatValue'>
}

Plugin API

AdvanceFilterPlugin

Plugins The AdvanceFilterPlugin extends the filtering capabilities of a RevoGrid component by introducing advanced, customizable filter options, such as selection and range-based filters. This plugin enhances the grid’s filter functionality, allowing users to interact with and manipulate data effectively.

Key Features:

• Custom Filters: Introduces custom filter types including selection and slider for more flexible data filtering. These filters allow users to select specific values or define a range for filtering data.
• Event Integration: Listens for BEFORE_HEADER_RENDER_EVENT to determine the applicability of filters for a given column, ensuring that only relevant filters are displayed.
• Dynamic Content Rendering: Uses a HyperFunc to dynamically render filter UI components in the grid’s header, including a RangeSlider component and selection list rendering.
• Enhanced Filter Management: Provides methods to manage excluded values from filters and to generate selection lists based on current data, facilitating complex filter interactions.

Usage:

• Integrate AdvanceFilterPlugin into a RevoGrid instance to enable advanced filtering features. Add the plugin to the grid’s plugins array during initialization.

Example

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

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

This plugin is essential for applications that require sophisticated filtering mechanisms, enabling users to perform more nuanced data queries and enhancing the overall data exploration experience.

class AdvanceFilterPlugin {
  beforeshow(data: ShowData): void;

  getExcludedValues(columnProp: ColumnProp);

  getSelectionList(columnProp: ColumnProp, exlude = new Set<string>());
}

---

FIlTER_SELECTION

Selection filter type

FIlTER_SELECTION: "none" | "empty" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";

---

FIlTER_SLIDER

Slider filter type

FIlTER_SLIDER: "none" | "empty" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";

---

getStartOfToday

export function getStartOfToday(): Date;

---

getStartOfYesterday

export function getStartOfYesterday(): Date;

---

getStartOfThisMonth

export function getStartOfThisMonth(): Date;

---

getStartOfLastMonth

export function getStartOfLastMonth(): Date;

---

getStartOfThisQuarter

export function getStartOfThisQuarter(): Date;

---

getStartOfThisYear

export function getStartOfThisYear(): Date;

---

getExtraByOperator

export function getExtraByOperator(operator: DateFilterOperator): ExtraField | undefined;

---

filterOperators

filterOperators: DateFilterOperator[];

---

DateFilterOperatorWithDatePickerExtra

export type DateFilterOperatorWithDatePickerExtra =
  | 'equals'
  | 'before'
  | 'after'
  | 'onOrBefore'
  | 'onOrAfter'
  | 'notEqual';

---

DateFilterOperatorWithDateRangeExtra

export type DateFilterOperatorWithDateRangeExtra =  'between';

---

DateFilterOperator

export type DateFilterOperator =
  | 'notEqual'
  | 'isEmpty'
  | 'isNotEmpty'
  | 'today'
  | 'yesterday'
  | 'last7Days'
  | 'thisMonth'
  | 'lastMonth'
  | 'thisQuarter'
  | 'nextQuarter'
  | 'previousQuarter'
  | 'thisYear'
  | 'nextYear'
  | 'previousYear'
  | DateFilterOperatorWithDatePickerExtra
  | DateFilterOperatorWithDateRangeExtra;

---

DateRangeValue

interface DateRangeValue {
  operator: DateFilterOperator;
  fromDate?: string;
  toDate?: string
}

---

DATE_FILTERS

DATE_FILTERS: Record<DateFilterOperator, CustomFilter<any, LogicFunctionExtraParam>>;

---

SliderRange

This module defines types for the RangeSlider component utilized within RevoGrid, specifically SliderRange and RangeSliderProps. These types are crucial for managing and interacting with numeric ranges in a grid context.

The RangeSlider component supports the following * Features:

• Basic range selection with min/max bounds
• Optional tooltips that appear on hover
• Optional range value display
• Custom value formatting

/**
 * This module defines types for the `RangeSlider` component utilized within RevoGrid, specifically
 * `SliderRange` and `RangeSliderProps`. These types are crucial for managing and interacting with
 * numeric ranges in a grid context.
 *
 * The RangeSlider component supports the following  * **Features**:
 * - Basic range selection with min/max bounds
 * - Optional tooltips that appear on hover
 * - Optional range value display
 * - Custom value formatting
 */

export type SliderRange =  { fromValue: number; toValue: number };

---

RangeSliderProps

Props for the RangeSlider component

interface RangeSliderProps {
  /** Minimum value for the range */
    min: number;
  /** Maximum value for the range */
    max: number;
  /** Current value for the start of the range */
    fromValue: number;
  /** Current value for the end of the range */
    toValue: number;
  /** Whether to show tooltips on hover */
    showTooltips?: boolean;
  /** Whether to show the current range values above the slider */
    showRangeDisplay?: boolean;
  /** Callback fired when the range values change */
    onRangeChange: (range: SliderRange) => void;
  /** Optional function to format the displayed values */
    formatValue?: (value: number) => string
}

---

between

between: LogicFunction<any, SliderRange | undefined>;

---

notContains

notContains: LogicFunction<any, Set<any> | undefined>;

---

renderList

export function renderList(
  miniFilter: HTMLElement,
  columnProp: ColumnProp,
  dataProvider: RowDataSources,
  exlude = new Set<string>(),
  filter: (excluded: Set<any>) => void,
  sortDirection?: 'asc' | 'desc' | 'none'
);

---

RangeSlider

RangeSlider: FunctionalComponent<RangeSliderProps>;