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
- Data model
export class People {
name: String;
login: String;
status: boolean;
}
- 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() {
// ...
}
}
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 : fquouhadiho@gmail.com