Table of contents

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

Required

• [x] 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

| Input | Type | Default | Required | Description | | ------------- | ------------- | ------------- | ------------- | ------------- | | [headerTitle] | string | - | no | Set title of mat-card-header. | [data] | Array | - | yes | Array of generic objects with properties. | | [columns] | Array<ConfigColumn> | - | yes | Array with ConfigColumn as type, need to initialize and import in component |

Outputs

| Output | Description | | ------------- | ------------- | | (onAction) | EventEmitter to set actions of buttons |

Models used

| Property | Description | | ------------- | ------------- | | key | EventEmitter to set actions of buttons | | display | Displayed value | | type | TypeColumn - define with enumerator the column type | | format | Used to define Date format by string | | booleanValues | Can define display value for 'true' and 'false' cases | | enumModel | Passed enum type, automatically retrieve the value | | buttonMenuIcon | Define the button icon in menù cases | | actions | Array |

Config Action Model

| Property | Description | | ------------- | ------------- | | name | Action name | | externalIcon | Icon for simple menu | | icon | Icon for menu icon | | fn | Used to define function |

fn Model

| Property | Description | | ------------- | ------------- | | element | Entire row data | | col | row index | | elementIndex | Information about the action name and type |

Credits

This library has been developed by EqProject SRL, for more info contact: [email protected]