Skip to content

Module Extensions

FilterCaptions (Extended from @revolist/revogrid)

ts
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)

ts
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

typescript
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.

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

  getExcludedValues(columnProp: ColumnProp);

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

getStartOfToday

ts
export function getStartOfToday(): Date;

getStartOfYesterday

ts
export function getStartOfYesterday(): Date;

getStartOfThisMonth

ts
export function getStartOfThisMonth(): Date;

getStartOfLastMonth

ts
export function getStartOfLastMonth(): Date;

getStartOfThisQuarter

ts
export function getStartOfThisQuarter(): Date;

getStartOfThisYear

ts
export function getStartOfThisYear(): Date;

getExtraByOperator

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

filterOperators

ts
filterOperators: DateFilterOperator[];

DateFilterOperatorWithDatePickerExtra

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

DateFilterOperatorWithDateRangeExtra

ts
export type DateFilterOperatorWithDateRangeExtra =  'between';

DateFilterOperator

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

DateRangeValue

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

DATE_FILTERS

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

SliderRange

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

RangeSliderProps

Props for the RangeSlider component

ts
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

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

Quick search filter type

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

FIlTER_SLIDER

Slider filter type

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

between

ts
between: LogicFunction<any, SliderRange | undefined>;

notContains

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

popUpContent

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

List

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

defineList

ts
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

typescript
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.

ts
RangeSlider: FunctionalComponent<RangeSliderProps>;