Table Column Type Date

Last updated:
Edit on GitHub
You are browsing a previous version of the document. The latest version is 202212.0.

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.