Skip to content
RevoGrid [Pro]

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>()):;
}

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

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
}

FIlTER_SELECTION

Selection filter type

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

Quick search filter type

FIlTER_QUICK_SEARCH: "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";

between

between: LogicFunction<any, SliderRange | undefined>;

notContains

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

popUpContent

popUpContent: (data: ShowData, { multiFilterItems, dataStores, config, change, }: { multiFilterItems: MultiFilterItem; dataStores: RowDataSources; config?: ColumnFilterConfig | undefined; change(filterItems: MultiFilterItem): Promise<void>; }) => VNode;

List

List: ({ columnProp, dataProvider, exclude, search, filter, quickFilter, sortDirection, }: ListProps) => preact.JSX.Element;

defineList

defineList: (el: HTMLElement, props: ListProps) => void;

RangeSlider

This module exports a RangeSlider functional component for RevoGrid, facilitating interactive range selection within grid columns. It is designed to provide users with an intuitive interface for selecting and adjusting numeric ranges, which can be used for filtering or data visualization purposes.

Key Features:

  • Dynamic Range Adjustment: The RangeSlider allows users to adjust a numeric range through two interdependent sliders (fromSlider and toSlider). This enables precise control over data boundaries.
  • Visual Feedback: The component dynamically updates the slider background to visually represent the selected range, improving user experience by indicating active selection areas.
  • Event Handling: Includes robust event handling to synchronize slider values and invoke the onRangeChange callback with the updated range values, ensuring real-time updates to associated data processes.
  • Styling Support: Utilizes CSS custom properties for slider and range colors, allowing for easy customization of the component’s appearance to match application themes.
  • Integration with RevoGrid: Can be used as a cell template in RevoGrid to enhance grid interactivity, leveraging the ColumnTemplateFunc structure for rendering custom content in grid cells.

Usage:

  • This component is typically integrated as a cell template or part of a custom plugin in RevoGrid, allowing for advanced range-based interactions within grid columns.

Example

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


const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'num',
    name: 'Linear',
    minValue: 0,
    maxValue: 40,
    cellTemplate: RangeSlider,
  },
];

The RangeSlider component is essential for applications requiring enhanced user interaction with numeric ranges, enabling more effective data manipulation and exploration within RevoGrid environments.

RangeSlider: FunctionalComponent<RangeSliderProps>;