How to use ngx Data Table in Angular Project

Angular 10|9|8|7 Data Tables,Sorting.

In this article, We’ll learn how to use ngx-datatable to display data in a table with amazing features of Sorting with examples.

Data tables are used to display data in a table to look systematic. It is highly in use in angular project because of it’s amazing feature of Sorting, and more.

In this post we’ll see how to use very popular module which ngx-datatable in angular project.

1. Create a new Angular Project

By using ng command, we will create a new angular project.

$ ng new datatables

2.Install ngx Data Table Package

Now, To use ngx-datatable. We’ll install the package in newly created angular project by using npm command in the terminal window.

$ npm install @swimlane/ngx-datatable

3. Import in App Module

Now, We’ll update app.module.ts by importing NgxDatatableModule in application module.

Open app.module.ts and make following changes.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxDatatableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Import Theme Styles

You can simply import the theme styles in style.scss file at the root of the project.

//styles.scss
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/themes/bootstrap.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

How to use NgxDatatable ??

To use ngx-datatable. Open app.component.html file then add following code in it.

<ngx-datatable 
class="material" 
[rows]="rows" 
[columnMode]="'force'" 
[headerHeight]="50" 
[footerHeight]="50"
[rowHeight]="50" 
[scrollbarV]="false" >

<ngx-datatable-column name="Name" prop="product_name">
  <ng-template let-row="row" ngx-datatable-cell-template>
      {{ row.product_name }}
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Code" prop="product_code">
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.product_code}}
 </ng-template>
 </ngx-datatable-column>


</ngx-datatable>

We’ll use dummy data to display data.Open app.component.ts and make following changes.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  implements OnInit {
 
  rows = [];

  ngOnInit() {
   rows = [
           {
            "product_name": "DairyMilk",
            "produt_code": "4555",
           },
           {
            "product_name": "kitkat",
            "produt_code": "8885",
           },    
           {
            "product_name": "Milk",
            "produt_code": "9696",
           }     
         ]
  }
  

}

Here is the result.

How to set Dark Theme ??

For dark theme you can set class property as dark.

<ngx-datatable 
class="dark" 
[rows]="rows" 
[columnMode]="'force'" 
[headerHeight]="50" 
[footerHeight]="50"
[rowHeight]="50" 
[scrollbarV]="false" >

<ngx-datatable-column name="Name" prop="product_name">
  <ng-template let-row="row" ngx-datatable-cell-template>
      {{ row.product_name }}
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Code" prop="product_code">
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.product_code}}
 </ng-template>
 </ngx-datatable-column>


</ngx-datatable>

How to implement Sorting ??

Default sorting is on in ngx-datatable untill we make it disable.Data property and prop name should be same for proper sorting.

<ngx-datatable-column name="Name" prop="product_name">
  <ng-template let-row="row" ngx-datatable-cell-template>
      {{ row.product_name }}
</ng-template>
</ngx-datatable-column>

How to disable Sorting in Specific Column ??

To disable default sorting in specific column set sorting property to false .[sorting]=”false”

<ngx-datatable 
class="material" 
[rows]="rows" 
[columnMode]="'force'" 
[headerHeight]="50" 
[footerHeight]="50"
[rowHeight]="50" 
[scrollbarV]="false" >

<ngx-datatable-column name="Name" prop="product_name" [sorting]="false">
  <ng-template let-row="row" ngx-datatable-cell-template>
      {{ row.product_name }}
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Code" prop="product_code" [sorting]="false">
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.product_code}}
 </ng-template>
 </ngx-datatable-column>


</ngx-datatable>

Now,It will not sort the data as we had set sorting value to false.

Conclusion

In above post we implemented ngx-datatables in angular project with default sorting and disable sorting.You can build awesome tables using this package.

Also Check

How To Create Toastr in Angular Project.

How do you Format Code on save in VS Code.

How to Change Theme of Visual Studio.