Examples
Filtering
Add column filtering to the React grid using built-in operators, custom filter components, and live updates as users refine their search criteria today.
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,
},
{
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.
Sorting
Enable single and multi-column sorting in the React grid, including custom comparators, programmatic sort state controls, and persistent sort indicators.
Selection
Implement cell, row, and range selection in the React grid with keyboard shortcuts, multi-select gestures, and clipboard-friendly copy operations today.