Numeric column by range

[klevison]

Hi, is there a way to filter a numeric column by range?

For example:

Tasks with duration between 30 and 60.

[ghiscoding]

I think you could do that with the slider filter, there's a minValue and a maxValue, there's also a sliderStartValue but I don't think you would need this one.

So you could try with

{
  id: 'duration',
  name: 'Duration (days)',
  field: 'duration',
  filterable: true,
  type: FieldType.number,
  filter: { 
    model: Filters.slider, 
    minValue: 30,
    maxValue: 60,
    params: { sliderStartValue: 45 }, // this property is specific to the slider filter, so it must be defined in params
  },
}

if that is not what you want, there's also the possibility of creating your own custom filter

[klevison]

Sliders will set only one value a need an interval. Imagine that I'll need a interval of dates? Or interval of numeric numbers. I need to set two args dynamically.

[ghiscoding]

if that is not what you want, there's also the possibility of creating your own custom filter

[ghiscoding]

Last possibility, if you don`t want to create your own filter, would be to duplicate the column in the grid with 2 different filters (1 for the min value and another for the max value). It's not exactly the best but it's certainly the easiest way to implement.

Imagine that I'll need a interval of dates?

For that you can use Flatpickr option for date range. You can pass any of the Flatpickr option(s) to the filter filterOptions of your filter. Actually that won't work, the FilterService expect only 1 value, that would require some changes to the Service for this to work

... so with all of that, I still think the easiest, and doable now, would be to duplicate the column

[ghiscoding]

I had a quick play at it, I think it's doable but I would have to update every Filter Conditions to support this. I basically use the ".." to represent a range (e.g. "5..10") and I modified the numberFilterCondition to handle this check, if it finds the ".." it does 2 conditions instead of a 1 which are (condition1 is >=5 and condition2 is <=10) and that seems to work out nicely. The result is shown in the print screen below. I also added 2 new operator, the default is RangeInclusive (>=5 and <=10) and also RangeNotInclusive (>5 and <10).

I'd be interested in feedback if that works out for you. I'm not sure that I could do that for every filters though, for example Flatpickr shows a date range as "2019-01-01 to 2019-01-31", I might have to do extra work to parse that out. Anyhow, on an input filter, that would be easy to implement as I've done a quick one with input of numbers as shown below

[ghiscoding]

closed by PR #252

[ghiscoding]

Range Filters are now released under the new version 2.10.1 and a new Example 25 was created to showcase this new feature

If you like the lib and you haven't already up vote, please do so.. ⭐️ 😸
Thank you