ngx-datatable
ngx-datatable is a Angular component for presenting large and complex data. It has all the features you would expect from any other table but in a light package with no external dependencies.
Install
npm install @swimlane/ngx-datatable
CSS
Include following css in angular.json file.
"./node_modules/@swimlane/ngx-datatable/index.css",
"./node_modules/@swimlane/ngx-datatable/themes/material.css",
"./node_modules/@swimlane/ngx-datatable/assets/icons.css",
Data Tables Module
After Installing, include NgxDatatableModule
in your TablesModule class
in tables.module.ts would look like this:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TablesRoutingModule } from './tables-routing.module';
import { NgxDatatableComponent } from './ngx-datatable/ngx-datatable.component';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
declarations: [ChildRowComponent,NgxDatatableComponent],
imports: [
CommonModule,
TablesRoutingModule,
NgxDatatableModule
]
})
export class TablesModule { }
Data Tables HTML Code
ngx-datatable.component.html
would look like this:
<ngx-datatable class="material" [rows]="rows" [columns]="columns" [sortType]="'multi'" [columnMode]="'force'"
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [rowHeight]="'auto'" [limit]="10">
</ngx-datatable>
Data Tables Components Code
Import data.json
data file in NgxDatatableComponent
class.
ngx-datatable.component.ts would look like this
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ngx-datatable',
templateUrl: './ngx-datatable.component.html',
styleUrls: ['./ngx-datatable.component.sass']
})
export class NgxDatatableComponent implements OnInit {
rows = [];
columns = [
{ name: 'Company' },
{ name: 'Name' },
{ name: 'Gender' }
];
constructor() {
this.fetch((data) => {
this.rows = data;
});
}
fetch(cb) {
const req = new XMLHttpRequest();
req.open('GET', 'assets/data/data.json');
req.onload = () => {
const data = JSON.parse(req.response);
cb(data);
};
req.send();
}
ngOnInit() {
}
}
Data Tables Data Json
data.json
would look like this:
[
{
"name": "Ethel Price",
"gender": "female",
"company": "Johnson and Partners",
"age": 22
},
{
"name": "Claudine Neal",
"gender": "female",
"company": "Sealoud",
"age": 55
}
]
Referral Url
Type | URL |
---|---|
ngx-datatable | https://swimlane.gitbook.io/ngx-datatable/installing |