Table Feature Row Actions

This document explains the Table Feature Row Actions component in the Components Library.

Overview

Table Feature Row Actions is a feature of the Table Component that renders a drop-down menu with actions applicable to the table row and when clicked triggers an Action which must be registered. Also this feature allows triggering actions via row click. Each row has all actions by default, but they can be filtered using an array of action Ids in each row using the path configured by availableActionsPath.

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

Component configuration:

• enabled—enables the feature via config.
• actions—an array with actions that are displayed in the drop down menu and their type of registered action.
• click—indicates which action is used for clicking the table row by its id.
• rowIdPath—is used for the rowId action context.
• availableActionsPath—path to an array with the available action IDs in the table data row (supports nested objects using dot notation for ex. prop.nestedProp).

<spy-table
    [config]="{
        dataSource: { ... },
        columns: [ ... ],
        rowActions: {
            enabled: true,
            actions: [
                { id: 'edit', title: 'Edit', type: 'edit-action' },
                { id: 'delete', title: 'Delete', type: 'delete-action' },
            ],
            click: 'edit',
            rowIdPath: 'sku',
            availableActionsPath: 'path.to.actions',
        },                                                                                        
    }"
>
</spy-table>

Component registration

Register the component:

declare module '@spryker/table' {
    interface TableConfig {
        rowActions?: TableRowActionsConfig;
    }
}

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

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

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

Interfaces

Below you can find interfaces for the Table Feature Row Actions:

export interface TableRowActionsConfig extends TableFeatureConfig {
    actions?: TableRowActionBase[];
    click?: string;
    rowIdPath?: string;
    availableActionsPath?: string;
}

export interface TableRowActionBase extends TableActionBase {
    title: string;
    icon?: string;
}

export interface TableRowActionContext {
    row: TableDataRow;
    rowId?: string;
}