How to use Ngx Datatable in Angular 5

NgxDatatable

The table is designed to be extremely flexible and light. it doesn't make any assumptions about your data and how to filter, sort or page it. That we wanted to keep the features.

strictly related to dealing with the data rather than implementing complex filtering/etc i.e, often very use-case specific. The current features include:

1. Handle large data sets and records ( Virtual DOM ).

2. Expressive Header and Cell Templates.

3. Horizontal & Vertical Scrolling.

4. Column Reordering & Resizing.

5. Client/Server side Pagination & Sorting.

6. Intelligent Column Width Algorithms ( Force-fill & Flex-grow ).

7. Integrated Pager.

8. Cell & Row Selection ( Single, Multi, Keyboard, Checkbox ).

9. Fixed AND Fluid height.

10. Left and Right Column Pinning.

11. Row Detail View.

12. Decoupled theme'ing with included Google Material theme.

13. Light codebase / No external dependencies.

Installation ngx-datatable in your Application:-

npm install @swimlane/ngx-datatable

import in app.module.ts file:-

Firstly, you can import NgModule and BrowserModule also in our Project and then, you can start import and use  to NgxDatatableModule. firstly import it and declared it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
?
import { AppComponent } from './app.component';
?
@NgModule({
  declarations: [AppComponent],
  imports: [NgxDatatableModule, BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

when you create component and you can use and import Ngxdatatable in our components. Dynamically import and initialize table's columns and rows in our component.ts file.

and call that array's of object in  our component.html file. you can Operate all operations of table's are handled by NgxDatatable dynamically like searching, sorting, Pagination etc.

 import in  app.component.ts you define a table like:-

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <div>
      <ngx-datatable
        [rows]="rows"
        [columns]="columns">
      </ngx-datatable>
    </div>
  `
})
export class AppComponent {
  rows = [
    { name: 'Rahul', gender: 'Male', company: 'Swimlane' },
    { name: 'Ankit', gender: 'Male', company: 'KFC' },
    { name: 'Neha', gender: 'Female', company: 'Burger King' },
  ];
  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
}

we can define Parameters Page size, Page Number, sorting direction and It's order form in component.ts file and we can mention style's of table also in component.ts file like width, height and which table is called dynamically.

and when you use NgxDatatable then, you can use Template reference which is define in component.ts  file and that template is use in our component.html file in which whole view called in it.

another way to use in app.component.ts file:-

public page: any = { pageNumber: 1, pageSize: 20, sortingDirection: "ASC", orderForm: { status: "", filterSearch: "" } };


columns = [];

this.page.size = "20";


this.columns = [{ name: 'S.No', cellTemplate: this.rowIndex, width: 10 },
                 { name: 'Document Type', prop: 'documentType', width: 20 },
                         { name: 'File', prop: 'fileName', width: 20 },
                     { name: 'Update Date', prop: 'uplodedDate', width: 20 },
                     { name: 'Upload By ', prop: 'uplodedBy', },
                   { name: 'Action', cellTemplate: this.editTmpl, width: 20 }];


@ViewChild('List') List: TemplateRef<any>;

The tag use for NgxDatatable is <ngx-datatable></ngx-datatable> in our component.html file. we can use Scrollbar also. NgxDatatable have various Properties which is use very easily and understands it.

import in app.component.html file:-

         <ngx-datatable class="material" [rows]="List" [columns]="columns" [columnMode]="'force'" [headerHeight]="30" [footerHeight]="50"
          [rowHeight]="'auto'" [externalPaging]="true" [count]="totalSize" [offset]="page.pageNumber" [limit]="page.size" (page)='setPage($event)'
          [scrollbarH]="true">
        </ngx-datatable>
        <ng-template #rowIndex let-row='row' let-rowIndex="rowIndex" let-value="value">
          <div>{{rowIndex + 1}}</div>
        </ng-template>