Table Column Type Button Action

Last updated:
Edit on GitHub

Table Column Button Action is an Angular component in the components library that renders button using the @spryker/button.action component.

Usage

Example of usage in the @spryker/table config:

<spy-table
    [config]="{
        ...,
        columns: [
            ...,
            {
                id: 'columnId',
                title: 'Column Title',
                type: 'button-action',
                typeOptions: {
                    text: 'text',
                    action: {
                        type: 'http',
                        url: '/url',
                    },
                },
            },
            ...,
        ],
    }"
>
</spy-table>

Component registration

Register the component:

declare module '@spryker/table' {
    interface TableColumnTypeRegistry {
        'button-action': TableColumnButtonActionConfig;
    }
}

@NgModule({
    imports: [
        TableModule.forRoot(),
        TableModule.withColumnComponents({
            'button-action': TableColumnButtonActionComponent,
        }),
        TableColumnButtonActionModule,
    ],
})
export class RootModule {}

Interfaces

Table Column Button Action interfaces:

export type ButtonAttributes = Record<string, string>;
export type ActionType = RegistryType<ActionsRegistry>;

interface TableColumnButtonAction extends ActionConfig {
    type: ActionType;
    [k: string]: unknown;
}

interface TableColumnButtonActionConfig {
    /** Bound to the @spryker/button-action inputs */
    text?: string;
    action?: TableColumnButtonAction;
    actionContext?: unknown;
    variant?: ButtonVariant; // 'primary' - by default
    shape?: ButtonShape; // 'default' - by default
    size?: ButtonSize; // 'md' - by default
    attrs?: ButtonAttributes;
}