cipo-table v0.0.5

Table of contents

• Features
• Getting started
• API
• Use Cases
• Credits

Required

• Angular Material installed and imported

Getting started

Step 1: Install eqp-table:

NPM

npm install --save eqp-table

Step 2: Import the EqpTableModule and install :

import { EqpTableModule } from 'eqp-table';

@NgModule({
  declarations: [AppComponent],
  imports: [EqpTableModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 2: Use Example in class :

Define selector in html

<eqp-table [headerTitle]="'Title'" [columns]="columns" [data]="DATA"></eqp-table>

Define the variables and object to use

  @ViewChild(EqpTableComponent) eqpTable: EqpTableComponent; //To access directly the directive
  columns: Array<ConfigColumn>;

 DATA: any[] = [
    { ID: 0, Name: 'Mario', Surname: 'Rossi', BirthDate: new Date(), Gender: 1, Boolean: true},
    { ID: 1, Name: 'Luigi', Surname: 'Bianchi', BirthDate: new Date(), Gender: 2, Boolean: false}
  ];

 genderEnum = GenderEnum; // For enumerators, need only to create variable and assign to enumerator

Step 3: Use Example for constructor :

Inside constructor, we can initialize the variable previously created to define what columns we will see

    this.columns = [
      { key: "Name", display: "Nome" },
      { key: "Surname", display: "Cognome" },
      {
        key: "BirthDate", display: "Data di nascita",
        type: TypeColumn.Date
      },
      {
        key: "Boolean", display: "Si/No",
        type: TypeColumn.Boolean, booleanValues: { true: "Si", false: "No" }
      },
      {
        key: "Gender", display: "Sesso",
        type: TypeColumn.Enum, enumModel: GenderEnum
      },
      {
        key: "action", display: "Action",
        type: TypeColumn.MenuAction, buttonMenuIcon: "list", actions: [{ name: "update" }, { name: "delete", icon: "keyboard_arrow_left", fn: (element, col, elementIndex) => this.deleteRow(element, col, elementIndex) }]
      },
    ];

Step 3: Use Example to reload the table :

On onInit, you can call a reload method, that will only refresh the table using viewchild we previously created

this.eqpTable.reloadDatatable(data);

API

Inputs

Outputs

Models used

Config Action Model

fn Model

Credits

This library has been developed by EqProject SRL, for more info contact: info@eqproject.it