Table Feature Search

This document explains the Table Feature Search component in the Components Library.

Overview

Table Feature Search is a feature of the Table Component that lets you search within the data set.

Check out an example usage of the Table Feature Search in the @spryker/table config.

Component configuration:

• enabled—enables the feature via config.
• placeholder—the search placeholder text.
• forceAlwaysVisible—makes the feature always visible regardless of data (true by default).

<spy-table
    [config]="{
        dataSource: { ... },
        columns: [ ... ],
        search: {
            enabled: true,
            placeholder: 'Search',
            forceAlwaysVisible: false,
        },                                                                                       
    }"
>
</spy-table>

Component registration

Register the component:

declare module '@spryker/table' {
    interface TableConfig {
        search?: TableSearchConfig;
    }
}

@NgModule({
    imports: [
        TableModule.forRoot(),
        TableModule.withFeatures({
            search: () =>
                import('@spryker/table.feature.search').then(
                    (m) => m.TableSearchFeatureModule,
                ),
        }),
    ],
})
export class RootModule {}

// Via HTML
@NgModule({
    imports: [
        TableModule.forRoot(),
        TableSearchFeatureModule,
    ],
})
export class RootModule {}

<spy-table [config]="config">
    <spy-table-search-feature spy-table-feature></spy-table-search-feature>
</spy-table>

Interfaces

The following example represents interfaces for the Table Feature Search:

export interface TableSearchConfig extends TableFeatureConfig {
    placeholder?: string;
    forceAlwaysVisible?: boolean;
}