bc-grid
GitHub

Filtering

View source

Click the funnel icon on any header to filter that column. bc-grid ships text, number-range, date-range, set (multi-select), boolean, and custom filter shapes.

Order #
Customer
Sales rep
Status
Amount
Opened
Region
R-000001
Customer 00001
Avery Chen
active
$0.00
2024-01-01
North
R-000002
Customer 00002
Ben Singh
pending
$31.42
2024-08-14
North
R-000003
Customer 00003
Cara Diaz
closed
$62.83
2024-03-27
North
R-000004
Customer 00004
Drew Lin
active
$94.25
2024-10-13
North
R-000005
Customer 00005
Elena Park
pending
$125.66
2024-05-26
South
R-000006
Customer 00006
Felix Roy
closed
$157.08
2024-12-12
South
R-000007
Customer 00007
Gita Bose
active
$188.50
2024-07-25
South
R-000008
Customer 00008
Henry Kao
pending
$219.91
2024-02-11
South
R-000009
Customer 00009
Avery Chen
closed
$251.33
2024-09-24
East
R-000010
Customer 00010
Ben Singh
active
$282.74
2024-04-10
East
R-000011
Customer 00011
Cara Diaz
pending
$314.16
2024-11-23
East
R-000012
Customer 00012
Drew Lin
closed
$345.57
2024-06-09
East
R-000013
Customer 00013
Elena Park
active
$376.99
2024-01-22
West
R-000014
Customer 00014
Felix Roy
pending
$408.41
2024-08-08
West
R-000015
Customer 00015
Gita Bose
closed
$439.82
2024-03-21
West

Try this

Each filter type is wired by passing { type } on the column.

  • Customer — funnel opens a text input. Type "0001" to narrow.
  • Sales rep / Status / Region — set filter with checkbox list.
  • Amount — number range with min and max inputs.
  • Opened — date range with relative tokens (Last 7 days, This month, etc.).

Filter shapes that ship

  • text — contains / equals / starts-with / ends-with / regex / not-equals / does-not-contain.
  • number / number-range — equals / greater / less / between, single value or pair.
  • date / date-range — absolute dates plus ERP relative tokens: today, yesterday, last 7 days, this month, fiscal-quarter, fiscal-year.
  • set — multi-select checkbox list of distinct values. Auto-derived from the data; can also be explicit.
  • boolean — true / false / either toggles.
  • custom — register your own predicate via registerReactFilterDefinition. The custom filter contract is identical to the built-ins.

Filter persistence

Filters compose with the other persistence stories: feed filterState + onChange to URL or localStorage and the user's filters round-trip across reloads. Saved-view DTOs serialize the entire filter state too.