Ngx-datatable with Angular 11 Example

Ngx-datatable with Angular 10 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:

Attributes and its roles/purposes

• 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' }
];

ngx-datatable: Sample output screenshot:

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