FI01 Basic Filtering

Enable text filter inputs below column headers

Live Demo

Type in any filter input to filter rows. Try typing "eng" in the Department filter.

Code
Basic Filtering 
 
 
Description
 
How It Works
 
Setting isFilterable = true adds a row of text inputs below the column headers.
 
  • Case-insensitive substring matching
    •  
  • Values are converted to strings before comparison
    •  
  • Multiple column filters combine with AND logic
    •  
  • Empty filter inputs match all rows
 
Data Pipeline
 
Items flow through: items → filter → sort → paginate
 
FI02 Per-Column Control
 
Enable or disable filtering on individual columns
 
Live Demo
 
 
ID and Salary columns have filtering disabled. Only Name, Email, and Department can be filtered.
 
Code
 
Per-Column isFilterable 
 
 
 
Description
 
Column-Level Control
 
Use isFilterable: false on a column to hide its filter input while keeping other columns filterable.
 
This is useful for:
 
  • ID columns where filtering doesn't make sense
    •  
  • Numeric columns where substring matching isn't helpful
    •  
  • Action or display-only columns
 
Styling Filter Inputs
 
Filter inputs can be customized with CSS variables:
 
CSS Variables 
 
 
 
API Reference
 
PropertyLevelTypeDefaultDescription
isFilterableGridbooleanfalseShow filter text inputs below column headers
isFilterableColumnbooleaninheritsOverride grid-level filtering for a specific column. Set to false to hide the filter input.
 
Notes
 
  • Filtering is client-side only — all items must be loaded in the grid
    •  
  • Filters use case-insensitive substring matching on the string representation of each value
    •  
  • Multiple column filters are combined with AND logic (all must match)
    •  
  • Filtering integrates with sorting and pagination — filtered results are sorted, then paginated