@schemater/components consists of components that use @scehmater/core and bootstrap to create components.

Table

This component is used to present data table. It's build using @angular/cdk and @fortawesome/angular-fontawesome

Usage

1. Import @schemater/core and @schemater/bootstrap and define all fields.
2. Import SchematerComponentsModule
3. Put <schemater-table></schemater-table> into template

Parameters

Inputs

fields: SchematerFieldConfig[] definitions of available fields. required

data:any[] data in array to render in SchematerTable. Keys in data row should be the same as field.id in fields

displayFields:string[] Array of field.id to display in table

sorting:SchematerTableSorting Display indicator of which field.id is sorted and in which directions. Example: {fieldId: 'ASC'}

firstStickyColumnCellTemplate:any Reference to template which will be rendered in cell of first column. Example: <ng-template #firstColumnCell let-row let-index="index">{{ index }} has data {{ row |json}} </ng-template>

firstStickyColumnHeaderTemplate:any Reference to template which will be rendered in header of first column. Example: <ng-template #firstColumnHeader>Header</ng-template>

lastStickyColumnCellTemplate:any Reference to template which will be rendered in cell of last column. Example: <ng-template #lastColumnCell let-row let-index="index">{{index}} has data {{row|json}} </ng-template>

lastStickyColumnHeaderTemplate:any Reference to template which will be rendered in header of last column.

Example: <ng-template #lastColumnHeader>Header</ng-template>

options:SchematerTableOptions table options:

• showSelection: boolean - show selection column. Default: false
• showSorting: boolean - show column sorting. Default: false
• maxColumnWidth: "auto" | boolean - max width od column. Default: "auto"
• minColumnWidth: "auto" | boolean - min width od column. Default: "auto"

Outputs

sortingChange: SchematerTableSorting event triggered when sorting changes

selectionChange: SchematerFieldConfig[] event triggered when selection changes

Item list

This component is used to present list of fields as details.

Usage

1. Import @schemater/core and @schemater/bootstrap and define all fields.
2. Import SchematerComponentsModule
3. Put <schemater-item-list></schemater-item-list> into template

Parameters

Inputs

fields: SchematerFieldConfig[] definitions of available fields. required

values:any data of fields to render in SchematerItemList. Keys in data should be the same as field.id in fields

displayFields:string[] Array of field.id to display in list