Datatables Documetation

NPM

Install @swimlane/ngx-datatable using npm

@swimlane/ngx-datatable

npm install @swimlane/ngx-datatable --save

Dependencies

No Dependencies for this module.

Data Tables Module

Add NgxDatatableModuleinto 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{ }
            

Data Tables

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>
                    

Data Tables Components

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() {}
}
                

Data Tables Data

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: