Table Filter extension

Edit on GitHub

This document explains the Table Filter extension in the Components Library.


The Table Filters feature provides filtering functionality to the Core Table Component. The filters, however, are not included in the feature itself — instead, they are registered separately.

A Table Filter is an Angular Component that implements a specific interface (TableFilterComponent) and is registered to the Table Filters feature module via TableFiltersFeatureModule.withFilterComponents().

Furthermore, you need to create your own filter module and add it to the RootModule.

// Module augmentation
import { TableFilterBase } from '@spryker/table.feature.filters';

declare module '@spryker/table.feature.filters' {
    interface TableFiltersRegistry {
        custom: TableFilterCustom;

export interface TableFilterSelect extends TableFilterBase<TableFilterSelectValue> {
    type: 'custom';
    typeOptions: { ... };

// Component implementation
// Module
    declarations: [TableFilterCustomComponent],
    exports: [TableFilterCustomComponent],
export class TableFilterCustomModule {}

// Component
    selector: 'spy-table-filter-custom',
export class TableFilterCustomComponent implements TableFilterComponent<TableFilterSelect> {}

// Root module
    imports: [
            custom: TableFilterCustomComponent,
export class RootModule {}

You can configure any filter in the table config.

        filters: {
            items: [
                    type: FILTER_TYPE_NAME,
                    typeOptions: {
                      // Filter specific configuration...
            // Makes feature always visible regardless of data (`true` by default).
            forceAlwaysVisible: false,

Main Filter feature

Using the static method TableFiltersFeatureModule.withFilterComponents(), the table module allows registering any table filter by a key. Under the hood, this method assigns the object of filters to TABLE_FILTERS_TOKEN.

The main component injects all registered types from the TABLE_FILTERS_TOKEN and Injector.

TableFiltersFeatureComponent gets all registered filters from TABLE_FILTERS_TOKEN and maps them to tableConfig.filters.items upon initialization. Table Features feature then renders Table Filters as required by the Table Configuration.


Below you can find interfaces for the Table Filter extension configuration.

import { TableFeatureConfig } from '@spryker/table';

export interface TableFiltersConfig extends TableFeatureConfig {
    items: TableFilterBase[];
    forceAlwaysVisible?: boolean;

export interface TableFilterBase<V = unknown> {
    __capturedValue: V;
    id: string;
    title: string;
    type: string;
    typeOptions?: unknown;

export interface TableFilterComponent<C extends TableFilterBase> {
    config?: C;
    value?: C['__capturedValue'];
    valueChange: EventEmitter<C['__capturedValue']>;
    classes: Observable<string | string[]>; // @Output

Table Filter types

The Table Filters feature ships with a few common Table Filter types:

  • Date Range—allows filtering data via DateRangePickerComponent.
  • Select—allows filtering data via SelectComponent.
  • Tree Select—allows filtering data via TreeSelectComponent.