NPM
Install @swimlane/ngx-datatable using npm
@swimlane/ngx-datatable
npm install @swimlane/ngx-datatable --save
Dependencies
No Dependencies for this module.
Add NgxDatatableModule
into your DataTablesModule
class.
datatables.module.ts
would look like this
import { NgModule } from '@angular/core';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { BasicinitialisationComponent } from './basicinitialisation/basicinitialisation.component';
@NgModule({
imports: [NgxDatatableModule],
declarations: [BasicinitialisationComponent],
providers: [ ]
})
export class DatatablesModule{ }
basicinitialisation.component.html
would look like this
<ngx-datatable class="bootstrap table-bordered" [limit]="7" [rows]="rows" [columnMode]="'force'"
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50">
</ngx-datatable>
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="140">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="140">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
Import company.json
data file in BasicinitialisationComponent
class. basicinitialisation.component.ts
would look like this
import { Component } from '@angular/core';
declare var require: any;
const data: any = require('../../../../../assets/data/datatables/tableinitialisation/tableinitialisation.json');
@Component({
selector: 'app-basicinitialisation',
templateUrl: './basicinitialisation.component.html',
styleUrls: ['./basicinitialisation.component.css']
})
export class BasicinitialisationComponent {
rows = data['rows'];
loadingIndicator: boolean = true;
];
constructor() {}
}
company.json
would look like this
"rows":[
{ "name": "Mark", "position": "Otto", "office": "@mdo", "age": "34", "salary": "12000", "startdate": "16/05/2017" },
{ "name": "Jacob", "position": "Thornton", "office": "@fat", "age": "36", "salary": "12000", "startdate": "16/05/2017" },
{ "name": "Larry", "position": "the Bird", "office": "@twitter", "age": "38", "salary": "12000", "startdate": "16/05/2017" },
{ "name": "Mark", "position": "Otto", "office": "@mdo", "age": "32", "salary": "12000", "startdate": "26/05/2017" },
];
Refer following links for usage and more options:
Type | URL |
---|---|
Plugin Github Page | https://github.com/swimlane/ngx-datatable |
Template Page | https://modernadmin.evolvision.com/datatables/basicinitialisation |