Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

kuv-table

felipenyp200.2.4TypeScript support: included

This library was generated with Angular CLI version 8.2.14.

readme

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-table or else it will be added to the default project in your angular.json file.

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<any> [] 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.