table-feature-sync-state.md

title	description	template	last_updated	redirect_from	related
Table Feature Sync State	This document provides details about the Table Feature Sync State component in the Components Library.	concept-topic-template	Nov 21, 2023	/docs/marketplace/dev/front-end/202212.0/table-design/table-features/table-feature-sync-state.html /docs/scos/dev/front-end-development/202204.0/marketplace/table-design/table-feature-extension/table-feature-sync-state.html /docs/scos/dev/front-end-development/202311.0/marketplace/table-design/table-feature-extension/table-feature-sync-state.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 Selectable docs/dg/dev/frontend-development/page.version/marketplace/table-design/table-feature-extension/table-feature-selectable.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 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 Sync State component in the Components Library.

Overview

Table Feature Sync State is a feature of the Table Component that synchronizes the table state with the browser URL (like pagination, filters, sorting).

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

Component configuration:

• enabled—enables the feature via config.
• tableId—an id of the table that syncs the state of the table with the browser URL (also can be assigned to the table via HTML).

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

Component registration

Register the component:

declare module '@spryker/table' {
    interface TableConfig {
        syncStateUrl?: TableSyncStateConfig;
    }
}

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

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

<spy-table [config]="config" [tableId]="tableId">
    <spy-table-sync-state-feature spy-table-feature></spy-table-sync-state-feature>
</spy-table>

Interfaces

Below you can find interfaces for the Table Feature Sync State:

export interface TableSyncStateConfig extends TableFeatureConfig {
    tableId?: string;
}