The “angular-6-datatable”
will provide the table component with sorting and pagination for Angular 6. If
you want to use the datatable in Angular 6 applications, try the following
steps.
Install -
npm
i angular-6-datatable
--save
The
Example -
app.module.ts -
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ NgModule } from
'@angular/core';
import
{ FormsModule } from
'@angular/forms';
import
{ RouterModule, Routes
} from '@angular/router';
import
{ AppComponent } from
'./app.component';
import
{ UserComponent } from
'./user/user.component';
import
{ UserListComponent
} from './user-list/user-list.component';
import {DataTableModule} from "angular-6-datatable";
@NgModule({
declarations: [
AppComponent,
UserComponent,
UserListComponent
],
imports: [
BrowserModule,
DataTableModule,
FormsModule,
RouterModule.forRoot([
{ path: 'user-link',
component: UserComponent
},
{ path: 'user-list',
component: UserListComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export
class AppModule
{ }
user-list.component.ts -
import
{ Component, OnInit
} from '@angular/core';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export
class UserListComponent
implements OnInit
{
public data
: any
constructor() { }
ngOnInit() {
]
}
}
user-list.component.html -
<table
class="table
table-striped" [mfData]="data"
#mf="mfDataTable"
[mfRowsOnPage]="5">
<thead>
<tr>
<th style="width:
20%">
<mfDefaultSorter
by="name">UserName</mfDefaultSorter>
</th>
<th style="width:
50%">
<mfDefaultSorter
by="email">UserEmail</mfDefaultSorter>
</th>
<th style="width:
10%">
<mfDefaultSorter
by="age">Age</mfDefaultSorter>
</th>
<th style="width:
20%">
<mfDefaultSorter
by="city">User
City</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let
user of mf.data">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td class="text-right">{{user.age}}</td>
<td>{{user.city
| uppercase}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator
[rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
user-list.component.css -
@import
"//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
@import
"//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";
Result –
Reference - https://www.npmjs.com/package/angular-6-datatable
|
Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog.
For more detail about me, kindly refer to this link..
|
You Might Also Like
![angular-6-datatable [Pagination, Sorting in Angular 6]](https://4.bp.blogspot.com/-89vC50wmRTc/W1A0pAYvIHI/AAAAAAAASxc/nrgxEQ2gqDk25oAvZTfv03qrv2sRaYqDwCLcBGAs/s72-c/angular-6-datatable-example.png)
