Filtering

gp-grid provides powerful column filtering.

Basic Filtering

Click the filter icon in a column header to open the filter popup:

<script setup lang="ts">
const columns: ColumnDefinition[] = [
  {
    field: "name",
    cellDataType: "text",
    width: 150,
    filterable: true,
  },
  {
    field: "salary",
    cellDataType: "number",
    width: 120,
    filterable: true,
  },
];
</script>

Filter Operators

Text Filters

Number Filters

Values Mode

Text filter popups also offer a checkbox list of the column's distinct values. Entries are grouped by display label: with a valueFormatter, several raw values can share one label, and ticking it selects all of them. The applied filter always stores the raw values (selectedValues: Set<CellValue>), so a formatter never changes what a server data source receives.

When the column contains blank cells — null, empty strings, or empty arrays such as a tags column with no tags — the list shows a (Blanks) entry. Untick it to exclude blank rows from the result.

Disable Filtering

<script setup lang="ts">
const columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 80, filterable: false },
  { field: "name", cellDataType: "text", width: 150 },  // filterable by default
];
</script>