Column filtering

Column filtering lets end users narrow visible rows by applying filter operators to individual columns.

Each column filter operates independently. When multiple columns have active filters, only rows that satisfy all filter rules are shown (logical AND across columns).

With the default local data model, filtering is applied client-side on the loaded data. In Grid Pro, you can use providerType: 'remote' when filter state should be handled by the server instead. Read more in Server-side data handling.

Enabling filtering

Filtering is configured per column using the filtering option. By default, filtering is disabled.

You can enable filtering on individual columns:

columns: [{
    id: 'price',
    filtering: {
        enabled: true
    }
}]

Or enable it for all columns using columnDefaults:

columnDefaults: {
    filtering: {
        enabled: true
    }
}

Filtering can still be disabled for specific columns even when enabled globally.

Filter UI modes

The Grid provides two user interface modes for column filtering.

By default, a filter icon appears in the column header. Clicking the icon opens a popup where users can select an operator and enter a value.

This mode keeps the table compact and is suitable when filtering is used occasionally.

columnDefaults: {
    filtering: {
        enabled: true
    }
}

Inline mode

When inline is set to true, filter controls are rendered in a dedicated row below the column headers. Filters are always visible and immediately accessible.

columnDefaults: {
    filtering: {
        enabled: true,
        inline: true
    }
}

Inline mode works well for data-heavy tables where filtering is a primary interaction.

Hiding the operator select

When hideOperatorSelect is true, the operator <select> is not rendered in inline or popup filtering. Filtering uses a fixed operator:

  • the first operator for the column dataType, or
  • the first entry in filtering.operators when that list is set, or
  • filtering.rule.operator when it is valid for the column.

End users cannot change the operator in the UI. Update filtering.rule.operator programmatically (for example via grid.update()) to switch operators.

When filtering.operators contains a single entry, hideOperatorSelect defaults to true. Set it to false explicitly to show the select anyway.

For boolean columns the operator select is the only inline control, so hiding it removes all interactive filtering in the cell; use filtering.rule or grid.update() instead.

columnDefaults: {
    filtering: {
        enabled: true,
        inline: true,
        hideOperatorSelect: true
    }
},
columns: [{
    id: 'product',
    // Uses default string filtering operator: contains
}, {
    id: 'stock',
    filtering: {
        operators: ['greaterThan', 'lessThan']
        // Uses greaterThan (first in operators)
    }
}, {
    id: 'price',
    filtering: {
        operators: ['greaterThan']
    }
}]

See also: Inline filtering with hidden operator select.

Filter operators by data type

Available filter operators depend on the column’s dataType. If not specified, the data type is inferred automatically.

Active filters should always be configured with filtering.rule.operator and filtering.rule.value.

String columns

  • contains
  • doesNotContain
  • equals
  • doesNotEqual
  • beginsWith
  • endsWith
  • empty
  • notEmpty
columns: [{
    id: "product",
    dataType: "string", // in most cases not needed
    filtering: {
        rule: {
            operator: "contains",
            value: "Apple"
        }
    }
}]

Number columns

  • equals
  • doesNotEqual
  • greaterThan
  • greaterThanOrEqualTo
  • lessThan
  • lessThanOrEqualTo
  • empty
  • notEmpty
columns: [{
    id: "price",
    dataType: "number", // in most cases not needed
    filtering: {
        rule: {
            operator: "greaterThan",
            value: 2.0
        }
    }
}]

DateTime columns

  • equals
  • doesNotEqual
  • greaterThan
  • greaterThanOrEqualTo
  • lessThan
  • lessThanOrEqualTo
  • empty
  • notEmpty

DateTime columns use the same operator keys as number columns. The filter UI shows date-specific labels by default. Customize them with lang.columnFilteringDateTimeOperators (see Internationalization).

Operator (in config and API)Default UI label
equalsOn
doesNotEqualNot on
greaterThanAfter
greaterThanOrEqualToOn or after
lessThanBefore
lessThanOrEqualToOn or before

The empty and notEmpty operators use labels from lang.columnFilteringOperators, not from columnFilteringDateTimeOperators.

columns: [{
    id: "date",
    dataType: "datetime", // in most cases not needed
    filtering: {
        rule: {
            operator: "greaterThan",
            value: "2023-01-01"
        }
    }
}]

Filter values can be an ISO date string (YYYY-MM-DD) or a numeric timestamp.

The operators before and after are deprecated. Use lessThan and greaterThan instead.

Boolean columns

  • all
  • true
  • false
  • empty
columns: [{
    id: "inStock",
    dataType: "boolean",
    filtering: {
        enabled: true,
        rule: {
            operator: "true"
        }
    }
}]

Restricting available operators

You can limit which operators appear in the filter UI for a column using filtering.operators:

columns: [{
    id: 'weight',
    filtering: {
        enabled: true,
        operators: ['greaterThan', 'lessThan'],
        rule: {
            operator: 'greaterThan',
            value: 100
        }
    }
}]

Initial filters

You can define initial filter rules in the grid configuration. These filters are applied immediately when the grid is rendered.

columns: [{
    id: 'product',
    filtering: {
        enabled: true,
        rule: {
            operator: 'contains',
            value: 'Apple'
        }
    }
}, {
    id: 'price',
    filtering: {
        enabled: true,
        rule: {
            operator: 'greaterThanOrEqualTo',
            value: 2
        }
    }
}, {
    id: 'date',
    filtering: {
        enabled: true,
        rule: {
            operator: 'greaterThan',
            value: '2023-01-01'
        }
    }
}]

This example shows:

  • A text filter on the product column
  • A numeric filter on the price column
  • A date filter on the date column using greaterThan (not the deprecated after operator)
  • All filters applied together (AND logic)

Mixing filter UI modes

You can mix inline and popup filtering across columns:

columns: [{
    id: 'product',
    filtering: {
        enabled: true,
        inline: true
    }
}, {
    id: 'price',
    filtering: {
        enabled: true
        // popup mode
    }
}]

This allows you to prioritize frequently used filters while keeping others compact.

Disabling filtering per column

Filtering can be disabled for specific columns even when enabled globally:

columnDefaults: {
    filtering: {
        enabled: true
    }
},
columns: [{
    id: 'id',
    filtering: {
        enabled: false
    }
}]

The filtering UI will not be rendered for disabled columns.

Programmatic filtering

Filters can also be controlled programmatically through the API.

const grid = Grid.grid('container', options);
const productColumn = grid.viewport.getColumn('product');
const dateColumn = grid.viewport.getColumn('date');
// Apply a filter: set(value, operator)
productColumn.filtering.set('Apple', 'contains');
// DateTime columns use greaterThan / lessThan, not after / before
dateColumn.filtering.set('2023-01-01', 'greaterThan');
// Clear the filter
productColumn.filtering.set();

This makes it easy to integrate column filtering with external UI controls, such as search fields or custom buttons.

Deprecated filtering options

The following options are deprecated. Use the replacements in the table below. Deprecated options may be removed in a future release. If both old and new options are defined, the new options take precedence.

DeprecatedUse instead
filtering.conditionfiltering.rule.operator
filtering.valuefiltering.rule.value
filtering.conditionsfiltering.operators
before (datetime operator)lessThan
after (datetime operator)greaterThan
lang.columnFilteringConditionslang.columnFilteringOperators
// Deprecated:
filtering: {
    conditions: ['greaterThan', 'lessThan'],
    condition: 'greaterThan',
    value: 100
}
// Preferred:
filtering: {
    operators: ['greaterThan', 'lessThan'],
    rule: {
        operator: 'greaterThan',
        value: 100
    }
}

Events Pro

Filtering triggers two lifecycle events:

  • beforeFilter – fired before filtering is applied
  • afterFilter – fired after the grid has updated
columnDefaults: {
    filtering: {
        enabled: true
    },
    events: {
        beforeFilter() {
            console.log('Filtering column:', this.id);
        },
        afterFilter() {
            console.log('Filter applied:', this.id);
        }
    }
}

These events can be used for e.g. logging, analytics, and UI feedback.

Summary

  • Filtering is configured per column using filtering
  • Active filters use filtering.rule.operator and filtering.rule.value
  • Allowed UI operators can be restricted with filtering.operators
  • DateTime columns share operator keys with number columns; customize date UI labels with lang.columnFilteringDateTimeOperators
  • Multiple active filters are combined using AND logic
  • UI can be inline or popup, and mixed per column
  • Filter behavior depends on column data type
  • Filters can be set initially or controlled programmatically

Demo

This example creates a grid with filtering enabled for all columns through columnDefaults. The grid displays various fruit data with different data types including strings, numbers, booleans, and dates. The weight column has an initial filter set to show only items weighing more than 1000 units, demonstrating how to pre-configure filtering rules. The grouped header structure shows how filtering works with complex column layouts.

Edit this page