Rating or Progress Threshold Filter

Use this filter for star ratings, completion percentages, health scores, and other bounded numeric values. Users choose greater-than-or-equal, equal, or less-than-or-equal and then set one threshold.

Source code

grid.plugins = [AdvanceFilterPlugin];
grid.columns = [
  { prop: 'review', name: 'Review' },
  {
    prop: 'rating',
    name: 'Rating',
    filter: ['number', FILTER_RATING_PROGRESS_THRESHOLD],
  },
];
grid.filter = true;

return [
  { review: 'Needs work', rating: 1 },
  { review: 'Fair', rating: 2 },
  { review: 'Good', rating: 3 },
  { review: 'Great', rating: 4 },
  { review: 'Excellent', rating: 5 },
];

Quick start

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
import {
3
  AdvanceFilterPlugin,
4
  FILTER_RATING_PROGRESS_THRESHOLD,
5
} from '@revolist/revogrid-pro';
6
import '@revolist/revogrid-pro/dist/revogrid-pro.css';
7

8
defineCustomElements();
9

10
const grid = document.createElement('revo-grid');
11
grid.plugins = [AdvanceFilterPlugin];
12
grid.columns = [
13
  { prop: 'task', name: 'Task' },
14
  {
15
    prop: 'rating',
16
    name: 'Rating',
17
    filter: ['number', FILTER_RATING_PROGRESS_THRESHOLD],
18
  },
19
];
20
grid.filter = true;
21
document.querySelector('#app')!.append(grid);
22
grid.source = [
23
  { task: 'Design', rating: 4.5 },
24
  { task: 'Build', rating: 3 },
25
  { task: 'Review', rating: 5 },
26
];

Operators and state

Operator	Stable ID	Meaning
At least	`RATING_PROGRESS_GTE`	Value is greater than or equal to the threshold
Exactly	`RATING_PROGRESS_EQ`	Value equals the threshold
At most	`RATING_PROGRESS_LTE`	Value is less than or equal to the threshold

The condition value is one finite number. The type ID is FILTER_RATING_PROGRESS_THRESHOLD ('ratingProgressThreshold'). Values are clamped to 0…max and aligned to the configured step.

Restore a threshold programmatically

1
import {
2
  RATING_PROGRESS_GTE,
3
  defineAdvancedFilterConfig,
4
} from '@revolist/revogrid-pro';
5

6
grid.filter = defineAdvancedFilterConfig({
7
  multiFilterItems: {
8
    rating: [
9
      {
10
        id: 1,
11
        type: RATING_PROGRESS_GTE,
12
        value: 4,
13
        relation: 'and',
14
      },
15
    ],
16
  },
17
});

Configuration

The default presentation is stars with max: 5 and step: 1. Percent and score presentations default to a maximum of 100.

1
import {
2
  createRatingProgressThresholdStructuredFilterType,
3
  defineAdvancedFilterConfig,
4
} from '@revolist/revogrid-pro';
5

6
const progress = createRatingProgressThresholdStructuredFilterType({
7
  unit: 'percent', // 'stars', 'percent', or 'score'
8
  max: 100,
9
  step: 5,
10
  formatValue: (value) => `${value}%`,
11
});
12

13
grid.filter = defineAdvancedFilterConfig({
14
  structuredFilterTypes: [progress],
15
});

max and step must be positive. A step larger than the maximum is normalized to the maximum. formatValue changes the displayed value text; it does not transform source values.

Common mistakes

Using FILTER_RATING_PROGRESS_THRESHOLD as the condition operator; saved conditions use one of the three RATING_PROGRESS_* operator IDs.
Supplying a string threshold such as '80'; restore a finite number.
Using formatValue to convert a 0…1 source into a percentage. Use cellParser for conversion, then configure the visual domain.
Choosing RATING_PROGRESS_EQ with fractional data while using a step that cannot select those fractions.
Omitting the configured registration when replacing the complete grid.filter object later.