1.0.3 • Published 3 years ago
sagabook-component-lib v1.0.3
Sagabook UI Component Library
Sagabook is a library of component using Angular Material for various use cases.
Content Field Table
A component for handling displaying and editing data inside a table.
Please checkout the storybook at https://github.com/antonio-marasescu/sagabook-ui
How to use
- install it using
npm i sagabook-component-lib
- import the
ContentFieldTableModule
in your module - add the component to your html using
<sb-content-field-table></sb-content-field-table>
- Fill out the
dataSource
andconfig
inputs
@Input dataSource: ContentFieldTable
Specifies the input used to render the form fields and readonly data inside the table
Table definition
export interface ContentFieldTable {
headers: string[]; // the headers of the tables
rows: ContentFieldRow[]; // the definition of a row of the table
}
Row definition
export interface ContentFieldRow {
key: string; // unique identifier of the row
selected?: boolean; // if row will be selectable
expanded?: boolean; // if row will be expandable
form: FormGroup; // the form using editable the fields keys
fields: ContentField[]; // the normal row header fields definition
expandedFields?: ExpandedContentField[]; // the exapanded fields definition
}
Content Field definition
export interface ContentField {
key: string | number; // the unique key of the field
displayLabel?: string; // the label displayed if the field is a form control
value?: any; // value for non-form fields
type: ContentFieldType; // TextField or FormField
}
Expanded Content Field definition
export interface ExpandedContentField {
key: string | number; // the unique key of the field
value?: any; // the value displayed
}
@Input config: ContentFieldConfig
export interface ContentFieldConfig {
selectable: boolean; // is the table using selectable rows
expandable: boolean; // is the table using expandable rows
}