Range Filters

Index

• Using an Inclusive Range
• Using 2 dots (..) notation
• Using a Slider Range
  • Filter Options (JQueryUiSliderOption interface)
• Using a Date Range
  • Filter Options (FlatpickrOption interface)
• Update Filters Dynamically

Demo

Demo Page | Demo Component

Introduction

Range filters allows you to search for a value between 2 min/max values, the 2 most common use case would be to filter between 2 numbers or dates, you can do that with the new Slider & Date Range Filters. The range can also be defined as inclusive (>= 0 and <= 10) or exclusive (> 0 and < 10), the default is exclusive but you can change that, see below for more info.

Using an Inclusive Range (default is Exclusive)

By default all the range filters are with exclusive range, which mean between value x and y but without including them. If you wish to include the x and y values, you can change that through the operator property.

For example

// your columns definition
const columnDefinitions = [
  {
    id: 'duration', field: 'duration', name: 'Duration',
    filterable: true, 
    filter: {
      model: Filters.input,
      operator: OperatorType.rangeInclusive // defaults to exclusive
   
      // or use the string (case sensitive)
      operator: 'RangeInclusive', // defaults to exclusive
    }
  },
];

Using 2 dots (..) notation

You can use a regular input filter with the 2 dots (..) notation to represent a range, for example 5..90 would search between the value 5 and 90 (exclusive search unless specified).

Component

import { Filters, Formatters, GridOption, OperatorType } from 'slickgrid-react';

export class GridBasicComponent  extends React.Component<Props, State> {
  defineGrid(): void {
    const columnDefinitions = [
      {
        id: 'duration', field: 'duration', name: 'Duration',
        type: FieldType.number, // you can optionally specify that the data are numbers
        filterable: true, 

        // input filter is the default, so you can skip this unless you want to specify the `operator`
        filter: {
          model: Filters.input,
          operator: OperatorType.rangeInclusive // defaults to exclusive
        }
      },
    ];

    const gridOptions = {/*...*/};
  }
}

Using a Slider Range Filter

The slider range filter is very useful if you can just want to use the mouse to drag/slide a cursor, you can also optionally show/hide the slider values on screen (hiding them would giving you more room without but without the precision).

Component

import { Filters, Formatters, GridOption, JQueryUiSliderOption, OperatorType } from 'slickgrid-react';

export class GridBasicComponent  extends React.Component<Props, State> {
  defineGrid(): void {
    const columnDefinitions = [
      {
        id: 'complete', name: '% Complete', field: 'percentComplete', headerKey: 'PERCENT_COMPLETE', minWidth: 120,
        sortable: true,
        formatter: Formatters.progressBar,
        type: FieldType.number,
        filterable: true,
        filter: {
          model: Filters.sliderRange,
          maxValue: 100, // or you can use the filterOptions as well
          operator: OperatorType.rangeInclusive, // optional, defaults to exclusive
          params: { hideSliderNumbers: false }, // you can hide/show the slider numbers on both side

          // you can also optionally pass any option of the jQuery UI Slider
          // however you can't override the `change` and `slide` events since they are used by the lib
          filterOptions: { min: 0, step: 5 } as JQueryUiSliderOption 
        }
      },
    ];

    const gridOptions = {/*...*/};
  }
}

Filter Options (JQueryUiSliderOption interface)

All the available options that can be provided as filterOptions to your column definitions can be found under this FlatpickrOption interface and you should cast your filterOptions to that interface to make sure that you use only valid options of the jQueryUI Slider library.

filter: {
  model: Filters.sliderRange,
  maxValue: 100, // or you can use the filterOptions as well
  operator: OperatorType.rangeInclusive, // defaults to inclusive
  filterOptions: {
    hideSliderNumbers: false, // you can hide/show the slider numbers on both side
    min: 0, step: 5
  } as SliderRangeOption
}

Using a Date Range Filter

The date range filter allows you to search data between 2 dates (it uses Flatpickr Range feature).

Component

import { Filters, FlatpickrOption, Formatters, GridOption, OperatorType } from 'slickgrid-react';

export class GridBasicComponent  extends React.Component<Props, State> {
  defineGrid(): void {
    const columnDefinitions = [
      {
        id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, sortable: true, minWidth: 75, width: 120, exportWithFormatter: true,
        type: FieldType.date,
        filterable: true,
        filter: {
          model: Filters.dateRange,

          // override any of the Flatpickr options through "filterOptions"
          filterOptions: { minDate: 'today' } as FlatpickrOption
        }
      },
    ];

    const gridOptions = {/*...*/};
  }
}

Filter Options (FlatpickrOption interface)

All the available options that can be provided as filterOptions to your column definitions can be found under this FlatpickrOption interface and you should cast your filterOptions to that interface to make sure that you use only valid options of the Flatpickr library.

filter: {
  model: Filters.dateRange,
  filterOptions: {
    minDate: 'today'
  } as FlatpickrOption
}