Table Column Type Date

Last updated:
Edit on GitHub

This document explains the Table Column Type Date in the Components library.

Overview

Table Column Date is an Angular Component that renders formatted date using Angular built-in Date Pipe.

Check out an example usage of the Table Column Date in the @spryker/table config:

<spy-table
    [config]="{
        ...,
        columns: [
            ...,
            {
                id: 'columnId',
                title: 'Column Title',
                type: 'date',
                typeOptions: {
                    date: '${displayValue}',
                    format: 'mediumDate',
                },
            },
            ...,
        ],
    }"
>
</spy-table>

Component registration

Register the component:

declare module '@spryker/table' {
    interface TableColumnTypeRegistry {
        date: TableColumnDateConfig;
    }
}

@NgModule({
    imports: [
        TableModule.forRoot(),
        TableModule.withColumnComponents({
            date: TableColumnDateComponent,
        }),
        TableColumnDateModule,
    ],
})
export class RootModule {}

Interfaces

Below you can find interfaces for the Table Column Date:

interface TableColumnDateConfig {
    date?: Date;
    format?: string; // 'shortDate' - by default
}

To learn more about the pre-defined format options, see official Angular documentation.