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",
 							
						

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

							
						

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>
							
						

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.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
    }
]
							
						

Type	URL
ngx-datatable	https://swimlane.gitbook.io/ngx-datatable/installing