table-feature-selectable.md

title	description	template	last_updated	redirect_from	related
Table Feature Selectable	This document provides details about the Table Feature Selectable component in the Components Library.	concept-topic-template	Nov 21, 2023	/docs/marketplace/dev/front-end/202212.0/table-design/table-features/table-feature-selectable.html /docs/scos/dev/front-end-development/202204.0/marketplace/table-design/table-feature-extension/table-feature-selectable.html /docs/scos/dev/front-end-development/202404.0/marketplace/table-design/table-feature-extension/table-feature-selectable.html	title link Table Feature extension docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-extension.html title link Table Feature Batch Actions docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-batch-actions.html title link Table Feature Editable docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-editable.html title link Table Feature Pagination docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-pagination.html title link Table Feature Row Actions docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-row-actions.html title link Table Feature Search docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-search.html title link Table Feature Settings docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-settings.html title link Table Feature Sync State docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-sync-state.html title link Table Feature Title docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-title.html title link Table Feature Total docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-total.html

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

Overview

Table Feature Selectable is a feature of the Table Component that allows selecting multiple rows. The row selection toggles whether a row is selected. A checkmark indicates that a row is selected, while an empty box indicates that a row is not selected. Commonly, the table header indicates whether all rows are selected. If they are, the header displays a checkmark. If all rows are unselected, the header displays an empty checkbox. For rows with indeterminate states, a dash appears in the header. When the rows selection feature changes, it emits an event with all selected rows, which can be used by other features (for example, the Table Feature Batch Actions will display the applicable actions for selected rows).

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

Component configuration:

• enabled—enables the feature via config.

<spy-table
    [config]="{
        dataSource: { ... },
        columns: [ ... ],
        itemSelection: {
            enabled: true,
        },                                                                                           
    }"
>
</spy-table>

Component registration

Register the component:

declare module '@spryker/table' {
    interface TableConfig {
        itemSelection?: TableSelectableConfig;
    }
}

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

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

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

Interfaces

Below you can find interfaces for the Table Feature Selectable:

export interface TableSelectableConfig extends TableFeatureConfig {}

export interface TableSelectionRow {
    data: TableDataRow;
    index: number;
}

export type TableSelectionChangeEvent = TableSelectionRow[];