Fqtable

fqtable is an Angular component for datatable.

Use in angular project

$ npm install fqtable --save

Import in NgModule

import {FqtableModule} from 'fqtable';

@NgModule({
  imports: [
    // ...
    FqtableModule,
    // ...
  ],
})
export class AppModule {
}

Attributes

• tableData : any[]. List of data to fetch on the datatable. The content of the list must be a json type.
• searchList: any[]. This list is used for the search. Duplicate the same tableData
• tableRow : Array. Each key on the Json list must be used for the datable.
• header:FqTableHeaderInfo | string[]. It contains the title of the table, a buttton for an action. If withoutHeader is true, the header can't be shown
• columnHeader: TableColumInfo[] | string[]. Title of each column of the datatable
• menus : RowMenuInfo[]. Actions for each item on the list.
• config : {currentPage, itemsPerPage}. Items length visible per page, default value : 10
• isLoading : boolean. if true, the loading component will be shown.
• withoutHeader: boolean. If true, the table will not have a title and right button.
• withouSearch: boolean. If true, the search input will not be visible
• refresh: function. Function allows to refresh the list

Example of use

• TypeScript files

1. Data model

export class People {
  name: String;
  login: String;
  status: boolean;
}

2. Main file

import {OnInit} from '@angular/core';
import {FqTableHeaderInfo} from './fq-table-header-info';
import {People} from './model'

export class MyClassComponent {

  isLoading = true;
  peopleList: People[];
  tableHeader: FqTableHeaderInfo;

  constructor() {
    this.initDataTable()
  }

  private initDataTable() {
    this.tableHeader = {
      withBtn: true,
      btn: {
        bg: 'btn-primary',
        label: 'Create new',
      },
      title: 'People list',
      btnClick: () => {
       // call here the function to create new account
      }
    };
    this.rowMenu = [
      {
        title: 'Edit',
        click: item => {
          // ...
        },
        color: 'green',
        icon: 'edit', 
        isMatDesign: true,
      },
      {
        title: 'Delete',
        click: item => {
          // ...
        },
        color: 'red',
        icon: 'delete',
        isMatDesign: true,
      },
      // ...
    ];
  }

  public getPeopleList() {
    // ...
  }
}

• HTML file

Call the fqtable tags on the HTML file

<fqtable
  [tableData]="peopleList"
  [searchList]="peopleList"
  [header]="tableHeader"
  [menus]="rowMenu"
  (refresh)="getPeopleList()"
  [tableRow]="['name', 'login', {isIcon: true, label : 'status'}]"
  [columnHeader]="['Name', {label : 'Login', style:{'width' : '20%'}}, 'Status']"
>

</fqtable>

###Contact me

• Github : Ferdinand Quouhadiho
• Email : [email protected]