Examples
Filtering
Column filtering examples
Filtering
gp-grid provides powerful column filtering with various operators.
Basic Filtering
Click the filter icon in a column header to open the filter popup:
const columns: ColumnDefinition[] = [
{
field: "name",
cellDataType: "text",
width: 150,
filterable: true // Default is true
},
{
field: "salary",
cellDataType: "number",
width: 120,
filterable: true
},
];Filter Operators
Text Filters
| Operator | Description |
|---|---|
contains | Value contains text |
notContains | Value does not contain text |
equals | Exact match |
notEquals | Not an exact match |
startsWith | Value starts with text |
endsWith | Value ends with text |
blank | Value is empty |
notBlank | Value is not empty |
Number Filters
| Operator | Description |
|---|---|
= | Equal to |
!= | Not equal to |
> | Greater than |
< | Less than |
>= | Greater than or equal |
<= | Less than or equal |
between | Within range |
blank | No value |
notBlank | Has value |
Date Filters
| Operator | Description |
|---|---|
= | Same date |
!= | Different date |
> | After date |
< | Before date |
between | Within date range |
Disable Filtering
Per Column
const columns: ColumnDefinition[] = [
{ field: "id", cellDataType: "number", width: 80, filterable: false },
{ field: "name", cellDataType: "text", width: 150, filterable: true },
];Filter Combinations
Combine multiple conditions with AND/OR logic in the filter popup.