@eqproject/eqp-table v3.0.11

Table of contents

• Getting started
• Use Cases
• MultiLanguage
• API
• Credits

Required

• Angular Material installed and imported

Getting started

Step 1: Install eqp-table:

NPM

npm install --save @eqproject/eqp-table

Step 2: Import the EqpTableModule and install :

import { EqpTableModule } from '@eqproject/eqp-table';

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

Step 2: Use in your component

Define selector in html

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

Define the datasource for the table

  @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

Define the column configurations

  this.columns = [
    {
        key: "Name",
        display: "Name"
      },
      {
        key: "Surname",
        display: "Surname",
      },
      {
        key: "BirthDate",
        display: "Birth Date",
        type: TypeColumn.Date,
        styles: { flex: "0 0 8%" }
      },
      {
        key: "Gender",
        display: "Gender",
        type: TypeColumn.Enum,
        enumModel: GenderEnum,
        styles: { flex: "0 0 8%" }
      }
  ];

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);

Multilanguage

Step 4(not required): Use Multilanguage :

To use multilanguage, set to true the input boolean variable

    <eqp-table [isMultiLanguage]="true"></eqp-table>

Then, where you set the language to use, like on login page or in navbar to switch language

    this.translateHelper.loadJsonLanguage("en", jsonObject);

Where translateHelper is a service that need to be imported in constructor component as public.

loadJsonLanguage need to set current language, first parameter check the language to use, in the second we need to pass the entire Json for selected language

API

Inputs for basic table configuration

Inputs for table lookup functionality (searching)

Inputs for table pagination

Inputs for table selection

Table Outputs

Models used

ConfigColumns Model

ConfigAction Model

ExportEqpTable Model

CustomButton Model

fn Model

Credits

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