Dynamic table generator library for Angular.
npm install ngx-dynamic-table --save
if you use yarn
you might want to use:
yarn install ngx-dynamic-table --save
ngx-dynamic-table
exposes a module called NgxDynamicTableModule
.
Import NgxDynamicTableModule
in your root module e.g: AppModule
.
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxDynamicTableModule } from 'ngx-dynamic-table'; // ==> import module from library
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxDynamicTableModule // ==> add module to `imports` array.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once the module is imported, you can start using the libaray seamlessly.
Setup table config in your component file:
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
config = {
tableName: 'Customer Table',
tableOffset: 5,
tableHeaders: ['name', 'phone', 'country', 'zip code', 'state', 'customer', 'order number'],
tableData: [
{
name: 'John Doe 1',
phone: '+2348161691968',
country: 'Nigeria',
'zip code': 100222,
state: 'Lagos',
customer: 12233,
'order number': 1234442223343
},
]
};
}
tableName
: Name of the table.
tableOffset
: Number of rows to be displayed per page upon pagination.
tableHeaders
: row headers of the table.
tableData
: An array of data to be displayed in the table.
P.S: elements in the tableHeaders
array must be the same as the keys in the object of each elements on the tableData
array.
Finally, add the ngx-dynamic-table
to your template:
<!-- app.component.html-->
<ngx-dynamic-table [config]=config></ngx-dynamic-table>
And we are done ...
...