Pages

How to implement ngx-datatable in angular

Did you came across a situation where your plain table in angular is not enough to please the user or the organisation you're working for.
if yes this post will show you how to easily implement data tables in angular without writing your own code from scratch.
ngx-datatable is an Angular component for presenting large and complex data. we are going to use this custom component to show our data in a more feature packed table.

first, lets create a project in angular. i had already created a project so, i'm going to use that. if you want to know how to create a project in angular, you can check it here

Now to use ngx-datable in our angular project we have to first install the module into our project. to do so copy and paste the below code to your projects command prompt and click on enter.

npm i @swimlane/ngx-datatable --save

this will install the ngx-datatable module to our angular project. now since the ngx-datatable is installed into our project, lets see how to implement it and view ngx-datatable on our angular project.

I want to create a new component to view datatable so, i will create a component with name ngxtable by executing the following command on your project command prompt as shown below. 

ng generate component ngxtable

this will create a folder with name as "ngxtable" in your projects src/app folder.

Now open app.module.ts in your editor and import 'NgxtableComponent' as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';


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


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

Now open ngxtable.component.ts and declare rows and columns as shown below.

 
rows = [

{ name: 'John', gender: 'Male', company: 'Wipro' },
{ name: 'lakshmi', gender: 'Female', company: 'TATA' },
{ name: 'Henry', gender: 'Male', company: 'Burger King' },
{ name: 'Jacob', gender: 'Male', company: 'Microsoft' },
{ name: 'Harry', gender: 'Male', company: 'IBM' },
{ name: 'Jessica', gender: 'Female', company: 'Apple' }

];
columns = [
{ prop: 'name' },
{ name: 'Gender' },
{ name: 'Company' }
];

next open 'ngxtable.html' and paste the below given code to it.

<div>
  <ngx-datatable
   class="material striped"
   [rows]="rows"
   [columns]="columns"
   [columnMode]="'force'"
   [headerHeight]="50"
   [footerHeight]="50"
   [rowHeight]="50"
   [limit]="3">
  </ngx-datatable>
</div>

save the above files and run your project. navigate to your component ( if you don't know how to navigate to other component on angular , you can check it here.  ) and check if the table is working. 

By default the data-table is not styled. this makes it easy for us to style it as we wish. ngx-datatable is also provided with a separate material theme. In order to use it, you need to include the following in your project ngx-datatable.css file.

 
@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';

check now to see if the styling is applied. if not please import the ViewEncapsulation to your component as shown below.

import { ViewEncapsulation } from '@angular/core';
@Component({
 selector: 'app-ngxtable',
 templateUrl: './ngxtable.component.html',
 styleUrls: ['./ngxtable.component.css'],
 encapsulation: ViewEncapsulation.None
})

Note: if you get any error like ' rxjs_1.fromEvent is not a function ' when sorting table update your 'rxjs &
rxjs-compat' node modules to latest versions.
the final output of our code will look something like this.
that's it, we have our ngx-datatable up and working. for more options on how to manipulate ngx-datatable, check this link here.

vinay kumar

Founder of Gowriter.Blogspot.com, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: