Data Table is a arrange data in ordering searching and paginate it.
| Name | Type | Description |
|---|---|---|
md2Data |
Array<any> |
List of array data assign for datatable |
rowsPerPage |
number |
Number of rows per page |
activePage |
number |
Number of active page |
sortBy |
string or Array<string> |
Sort by parameter(s) |
sortOrder |
string |
Sort order parameters are 'asc' or 'desc' |
| Name | Type | Description |
|---|---|---|
activePageChange |
Event |
Fired when change the active page |
rowsPerPageChange |
Event |
Fired when change the rows per page |
sortByChange |
Event |
Fired when change sort by |
sortOrderChange |
Event |
Fired when change sort order |
A Datatable would have the following markup.
<table class="table table-striped"
[md2Data]="data"
#md2="md2DataTable"
[rowsPerPage]="10"
[activePage]="activePage">
...
</table>| Name | Type | Description |
|---|---|---|
md2SortBy |
string |
Sort by parameter |
A directive would have the following markup.
<th md2SortBy="name">Name</th>| Name | Type | Description |
|---|---|---|
rowsPerPageSet |
Array<string> |
Number of rows per page set list |
md2Table |
Md2DataTable |
reference of Md2DataTable |
| Name | Type | Description |
|---|---|---|
change |
Event |
Fired when change the page |
A pagination would have the following markup.
<md2-pagination [rows]="[5,10,15]"></md2-pagination>A data-table would have the following markup.
<table [md2Data]="data"
#md2="md2DataTable"
[rowsPerPage]="10"
[(activePage)]="activePage">
<thead>
<tr>
<th md2SortBy="name">Name</th>
<th md2SortBy="email">Email</th>
<th md2SortBy="age">Age</th>
<th md2SortBy="city">City</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let i of md2.data">
<td>{{i.name}}</td>
<td>{{i.email}}</td>
<td>{{i.age}}</td>
<td>{{i.city}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<md2-pagination [rowsPerPageSet]="[5,10,15]"></md2-pagination>
</td>
</tr>
</tfoot>
</table>