npm install @mendeldantas/ng-datatable --save
yarn add @mendeldantas/ng-datatable
bower install @mendeldantas/ng-datatable --save
import { NgModule } from '@angular/core';
import { DataTableModule } from '@mendeldantas/ng-datatable';
@NgModule({
imports: [
...
DataTableModule
],
})
export class AppModule {}
<ng-datatable [rows]="rows" [columns]="cols"> </ng-datatable>
import { Component } from '@angular/core';
import { colDef } from '@mendeldantas/ng-datatable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
cols: Array<colDef> = [];
rows: Array<any> = [];
constructor() {
this.initData();
}
initData(){
this.cols = [
{ field: "id", title: "ID", filter: false },
{ field: "name", title: "Name" },
{ field: "username", title: "Username" },
{ field: "email", title: "Email" },
{ field: "phone", title: "Phone" },
{ field: "date", title: "Date", type: "date" },
{ field: "active", title: "Active", type: "bool" },
{ field: "age", title: "Age", type: "number" },
{ field: "address.city", title: "Address" },
{ field: "company.name", title: "Company" },
];
this.rows = [
{
id: 1,
name: "Leanne Graham",
username: "Bret",
email: "Sincere@april.biz",
address: {
street: "Kulas Light",
suite: "Apt. 556",
city: "Gwenborough",
zipcode: "92998-3874",
geo: {
lat: "-37.3159",
lng: "81.1496",
},
},
phone: "1-770-736-8031 x56442",
website: "hildegard.org",
company: {
name: "Romaguera-Crona",
catchPhrase: "Multi-layered client-server neural-net",
bs: "harness real-time e-markets",
},
date: "Tue Sep 27 2022 22:19:57",
age: 10,
active: true,
},
.......
];
}
}
Props | Type | Default | Description |
---|---|---|---|
columns (required) | array | [] | table columns |
rows (required) | array | [] | table rows |
isServerMode | boolean | false | set true if you need server side pagination. |
totalRows | number | 0 | total number of rows. totalRows required when isServerMode is true |
skin | string | "bh-table-striped bh-table-hover" | custom class for skin ('bh-table-striped' - for stripe row, 'bh-table-hover' - for hover row, 'bh-table-bordered' - for bordered row, 'bh-table-compact' - for compact table) |
loading | boolean | false | enable loader |
hasCheckbox | boolean | false | enable checkbox |
search | string | "" | enable global search |
page | number | 1 | current page |
pageSize | number | 10 | number of rows per page |
pageSizeOptions | array | [10, 20, 30, 50, 100] | pagesize options |
showPageSize | boolean | true | enable pagesize options |
rowClass | array, function | "" | custom row class |
cellClass | array, function | "" | custom cell class |
sortable | boolean | true | enable sorting |
sortColumn | string | "id" | name of sort column |
sortDirection | string | "asc" | sort direction (asc or desc) |
columnFilter | boolean | false | enable individual column filter |
pagination | boolean | true | enable pagination |
showNumbers | boolean | true | enable numbers pagination |
showNumbersCount | number | 5 | show numbers of count in pagination |
showFirstPage | boolean | true | enable first page in pagination |
showLastPage | boolean | true | enable last page in pagination |
firstArrow | string | default arrow | custom first page arrow |
lastArrow | string | default arrow | custom last page arrow |
previousArrow | string | default arrow | custom previous page arrow |
nextArrow | string | default arrow | custom next page arrow |
paginationInfo | string | "Showing {0} to {1} of {2} entries" | custom pagination info |
noDataContent | string | No data available | custom no data message |
stickyHeader | boolean | false | enable fixed header |
height | string | 450px | only will be used when stickyHeader enabled |
stickyFirstColumn | boolean | false | enable fixed first column |
cloneHeaderInFooter | boolean | false | enable clone header in footer |
selectRowOnClick | boolean | false | enable to select row(checkbox) on row click |
Props | Type | Default | Description |
---|---|---|---|
isUnique | boolean | false | db column is primary key or not |
field | string | "" | db column name |
title | string | "" | display column name |
value | string | "" | filter value if filter enabled |
condition | string | "contain" | default condition for column filter if filter enabled |
type | string | "" | column type (string, date, number, bool) |
width | string | "" | custom width of column |
minWidth | string | "" | custom minimum width of column |
maxWidth | string | "" | custom maximum width of column |
hide | boolean | false | show/hide column |
filter | boolean | true | enable column filter |
search | boolean | true | enabled global search |
sort | boolean | true | enable sorting |
cellRenderer | function, string | custom cell rendering | |
headerClass | string | "" | custom header cell class |
cellClass | string | "" | custom cell class |
Name | Description |
---|---|
sortChange | will trigger when sorting changed |
searchChange | will trigger when search changed |
pageChange | will trigger when page changed |
pageSizeChange | will trigger when pagesize changed |
rowSelect | will trigger when row selected using checkbox |
filterChange | will trigger when column filter changed |
rowClick | will trigger when row clicked |
rowDBClick | will trigger when row double clicked |
Name | Description |
---|---|
reset | will reset all options like selected rows, filter, search, currennt page etc |
getSelectedRows | will returns all selected rows |
getColumnFilters | will return all column filters |
clearSelectedRows | will unselect all selected rows |
selectRow(index) | will select row with the given index (non-existent row will be ignored) |
unselectRow(index) | will unselect row with the given index (non-existent row will be ignored) |
isRowSelected(index) | will return true if the row with given index is selected |
@mendeldantas/ng-datatable is open-sourced software licensed under the MIT license.