0.2.4 • Published 4 years ago
kuv-table v0.2.4
KuvTable
This library was generated with Angular CLI version 8.2.14.
Code scaffolding
Run ng generate component component-name --project kuv-table to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project kuv-table.
Note: Don't forget to add
--project kuv-tableor else it will be added to the default project in yourangular.jsonfile.
Inputs
The table inputs in order to use the table are:
| Input | Type | Default | Description |
|---|---|---|---|
| tableOptions | Options | null | Allows the customization of the table style. |
| headOptions | Options | null | Allows the customization of the header style. |
| footOptions | Options | null | Allows the customization of the footer style. |
| showIndex | boolean | true | Indicates if the index column is shown or not. |
| search | boolean | true | Indicates if the search header is shown or not. |
| sort | boolean | true | Indicates if the columns are sortable or not. |
| dataModel | Array\ | [] | The array of data to show. |
| columns | Array<string|[Column](#column)> | [] | The columns to show on the table. |
| actions | Array\<Action> | null | The actions that the table shows for default. |
Usage
Documentation
Options
| Param | Type | Description |
|---|---|---|
| class | string | List of classes. |
| aside | boolean | (footOptionsOnly) Indicates if the footer is outside the table or not |
Action
| Param | Type | Description |
|---|---|---|
| icon | any | Icon of the action button. optional |
| label | string | Label of the action button. optional |
| clickAction | Function(element, index) | Function excecuted on click. |
| show | boolean | Function(element, index): boolean | Value that indicates if the action is shown or not. optional |
Column
| Param | Type | Description |
|---|---|---|
| attribute | string | Name of the column to show. optional |
| label | string | Function(element, index): string | Label of the column in the header. optional |
| value | string | Function(element, index): string | Text to show in the column. optional |
| filter | string | Filter | Filter type to show. optional |
Filter
| Param | Type | Description |
|---|---|---|
| type | 'text' | 'number' | 'select' | Type of the filter input of the column. |
| value | 'value'| 'attribute' | The value that should be filtered. |
| options | string[] | Option | List of options to show in the select type. |
Option
| Param | Type | Description |
|---|---|---|
| label | string | Label to show in the select. |
| value | string | Value of the option in the select. |
Change Log
Version 0.2.4
- Fixed sort on dates and weird number formats
Version 0.2.3
- Fixed index send to click events.
Version 0.2.2
- Minor changes.
Version 0.2.1
- Filter fixed.
Version 0.2.0
- Pagination can now be disabled and load every item.
- Filter and Sort can be applied to the value of the column, not the attribute.
Version 0.1.1
- Minor Fixes
Version 0.1.0
- Added Option type to Filters
- Added value param to Filters.
- Added showIndex Input to the component.
- Fixed Readme links.
Version 0.0.3
- Added onChange event for reloading dataModel
Version 0.0.2
- Added readme
Version 0.0.1
- Initial Version.
Further help
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.