Ngx-datatable with Angular 4/5/6 Example

Ngx-datatable with Angular 4/5/6 Example

Ngx-datatable with Angular 4 Example:

I have been searching for a best datatable with features like sorting, searching, pagination, rows per page etc.. to use in my angular projects. I am a big fan of datatables.net datatable, but unfortunately with angular it is not working properly (the issue i faced in datatables.net with angular is after sorting/any operations datatable will become empty, raised question to the datatables.net team, but no reply 🙁 ).
Datatable which I am using now:

ngx-datatable

 
Why I am using ngx-datatable?

  • I came across lot of datatables and finally used this by comparing the features and easiness to use than other datatables.
  • Also it remains top in github with more star rating as of July 2017.
  • The issue I am facing with ngx-datatable:
  • This datatable has been designed exclusively for material framework, if your website is designed using bootstrap, then you will face a issue designing the table as you need.

 

Requirement/Installation:

npm i @swimlane/ngx-datatable –save

If you are facing any issue while installing, feel free to check the below posts to resolve those errors.

To install npm in windows:

3 Simple Steps to install NodeJS in Windows 7

 

 

To install angular-cli in windows:

How to install Angular-CLI in Windows 7 ?

 

 

 

Code snippets:

html template file:

Things to know:

rows => this.stores is a Store[] with the fields like storename, desc, store url etc…
limit => 20 (pagination will be enabled with 20 per row)
reorderable => reorderable (column reordering will be enabled).
selected => selected (allowed to select the row)
selectionType => checkbox will be appeared in all the rows to select.
(select) => on selecting the row using the checkbox this method will be called in the ts file.
input text box => to enable the searching functionality.
ngx-datatable-column name=”storeUrl” => should be same variable like in the store model class.


<input class="input-lg"
type='text'
style='padding:8px;margin:15px auto;width:30%;'
placeholder='Type to filter the Store Name...'
(keyup)='updateFilterStoreName($event)'
/>

<ngx-datatable
class="material"
[rows]="this.stores"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[limit]="20"
[reorderable]="reorderable"
[scrollbarH]="true"
[rowHeight]="'auto'"
[selected]="selected"
[selectionType]="'checkbox'"
(activate)="onActivate($event)"
(select)='onSelect($event)'>
<ngx-datatable-column
[width]="30"
[sortable]="false"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="true"
[checkboxable]="true">
</ngx-datatable-column>

<ngx-datatable-column name="storeName" class="resizeable" >
<ng-template let-value="value" ngx-datatable-cell-template>
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="storeDesc" >
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="storeUrl" >
<ng-template let-value="value" ngx-datatable-cell-template>
{{value}}
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="storeId" [width]="10" value="Edit">

<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<a [routerLink]="['/stores/add-new-store',value]"> <i class="fa fa-edit" ></i> </a>
</ng-template></ngx-datatable-column>

<ngx-datatable-column name="storeId" [width]="10">

<ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
<a style="cursor: pointer;" (click)="onStoreDelete(value)"><i class="fa fa-trash-o"></i></a>
</ng-template></ngx-datatable-column>
</ngx-datatable>

typescript component file:

For searching:

Getting the entered value, converting to lowercase and filtering with the backup cache store array and assigning it back to store array which we used in the template html file.

 

updateFilterStoreName(event){
const storeName = event.target.value.toLowerCase();
const tempStores = this.cacheStores.filter(function(result){
return result.storeName.toLowerCase().indexOf(storeName) !== -1 || !storeName;
})
this.stores = tempStores;
}

 

Row Select:

Get the selected row object here.

 


onSelect({ selected }) {
console.log('Select Event', selected, this.selected);
console.log(selected[0].storeId);
}

 

 

Column and Row mapping:

columns1 = [
{ prop: 'storeName' },
{ name: 'storeDesc' },
{ name: 'storeUrl' }
];
rows1 = [
{ name: 'Larry', gender: 'Male', company: 'Cisco' },
{ name: 'Lauren', gender: 'Female', company: 'HP' }
];

Sample output screenshot:

Feel free to write your queries in the below comments section.

4,008 total views, 1 views today

10 thoughts on “Ngx-datatable with Angular 4/5/6 Example

  1. Hi,

    I want to put custom value in [checkboxable] because I want checkbox in some row(s) and don’t want in other rows(s).
    Can you please tell me how can I do?

    Thanks in advance.

    1. Hi Amit,

      Thanks for visiting our site.
      For this requirement you can go ahead this way,
      Keep some Boolean and make that as true where you need checkbox and control displaying the checkbox with *ngIf.
      Hope you got some idea!

      1. Hi, Mirthbees,

        Thanks for the reply. Can you please provide me any examples with syntax that explain how *ngIf will applicable for the specific row.

        Scenario for my project:

        I am passing a model to “ngx-datatable” with 10 rows. 9 rows contain product details and the last one is the total of above 9 products quantity and price. I don’t want a checkbox for that row, for rest of the rows, I need it.

        Below is the code:
        ————————–

        I hope you understand my problem. If possible, please give me example or put *ngIf in above code.

        Thanks in advance.

        1. I think, we can’t place a code in comment box, If possible, please provide me your contact on skype or mail id so i can contact you.

          Code:

Leave a Reply

Your email address will not be published. Required fields are marked *