Table Column Type Chip
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 Chip in the Components library.
Overview
Table Column Chip is an Angular Component that renders a chip using the @spryker/chips
component.
Check out an example usage of the Table Column Chip in the @spryker/table
config:
<spy-table
[config]="{
...,
columns: [
...,
{
id: 'columnId',
title: 'Column Title',
type: 'chip',
typeOptions: {
text: '${displayValue}',
color: 'blue',
},
},
{
id: 'columnId',
title: 'Column Title',
type: 'chip',
typeOptions: {
color: 'gray',
},
typeOptionsMappings: {
color: { 0: 'red' },
},
},
...,
],
}"
>
</spy-table>
Component registration
Register the component:
declare module '@spryker/table' {
interface TableColumnTypeRegistry {
chip: TableColumnChipConfig;
}
}
@NgModule({
imports: [
TableModule.forRoot(),
TableModule.withColumnComponents({
chip: TableColumnChipComponent,
}),
TableColumnChipModule,
],
})
export class RootModule {}
Interfaces
Below you can find interfaces for the Table Column Chip:
interface TableColumnChipConfig {
/** Bound to the @spryker/chips inputs */
text?: string;
color?: string;
}
Thank you!
For submitting the form