ngx-unitelist
This library is for Angular (2+) projects to build a list from passed data and provide pagination and filters and their callbacks after proper configuration.
Installing
npm install @appcarvers/ngx-unitelist --saveTo use pagination and filters of unitelist, you will also need to install few dependencies as listed below
npm install ngx-bootstrap --save
npm install ng2-select --saveImplementation
Simply first import the module in your app.module.ts as shown below
import { UniteModule } from '@appcarvers/ngx-unitelist/unite.module';
imports : [UniteModule]Now, pass proper configuration so as to render pagination, filters, table-view. You will also get various callback like pageChanged and filterChanged so that you can update the data based on changes.
Displying complete uniteList i.e. with pagination, filters, table
Code in component.html
user.component.html
<ngx-unite-sort [sortDataArray]='userSortArray' sortCoverClass='my-sorting-class' (sortChanged)='updateSort($event)'></ngx-unite-sort>
<ngx-unite-list
[data]="usersData"
[tableHeaders] = 'usersHeaders'
[totalPages] = 'userTotalPages'
[currentPage] = 'userCurrentPage'
[filters] = 'userFilters'
[searchBox] = 'true'
(pageChanged)='checkPageChanged($event)'
(filterChanged)='jobsFilterChanged($event)'
(searchInput)='jobsSearched($event)'
table-class='table-bordered table'
filter-class='my-col col-xs-2'
filter-cover-class='my-filters'
> </ngx-unite-list>Code in component.ts
user.component.ts
import { Component, OnInit } from '@angular/core';
import { FakedataService } from '../fakedata.service';
@Component({
selector: 'app-userlist',
templateUrl: './userlist.component.html',
styleUrls: ['./userlist.component.css'],
providers : [FakedataService]
})
export class UserlistComponent implements OnInit {
usersData;
usersHeaders;
userTotalPages;
userCurrentPage;
userFilters;
userSortArray;
constructor(private _fService : FakedataService) { }
ngOnInit() {
this.userSortArray = [
{name : 'sort-1', label : 'Sort 1 new'},
{name : 'sort-2', label : 'Sort 2 new'},
{name : 'sort-3', label : 'Sort 3 new'},
{name : 'sort-4', label : 'Sort 4 new'},
];
this.usersHeaders = [
{label : "Id", identifier : ['id']},
{label : "Name", identifierCombo : [['first_name'],['last_name']]},
{label : "Avatar", identifier : ['avatar'], displayType : 'image'}
];
this.userFilters = [
{
label : 'Filter 1',
name : 'filter-1',
options : [{id: 'a', text: 'Alpha'},{id: 'b', text: 'Beta'},{id: 'c', text: 'Gamma'},]
},
{
label : 'Filter 2',
name : 'filter-2',
options : [{id: 'a', text: 'xyz'},{id: 'b', text: 'abc'},{id: 'c', text: 'syz'},]
}
];
this.loadUsers();
}
loadUsers(pageNo? : number){
this._fService.getUsers(pageNo).subscribe(usersData => {
this.usersData = usersData['data'];
this.userTotalPages = usersData['total_pages'];
this.userCurrentPage = usersData['page'];
console.log(usersData);
});
}
checkPageChanged(e){
if(typeof e.newPage === 'number')
{
this.loadUsers(e.newPage);
}
}
checkFilterChanged(e){
console.log('filter changed event captuire ', e);
}
updateSort(e){
console.log("change event ", e);
}
}Displying Pagination separately without unitelist or filters
Code in component.html
user.component.html
<ngx-unite-pagination
[totalPages] = 'userTotalPages'
[currentPage] = 'userCurrentPage'
(pageChanged)='checkPageChanged($event)'
> </ngx-unite-pagination>Code in component.ts
user.component.ts
import { Component, OnInit } from '@angular/core';
import { FakedataService } from '../fakedata.service';
@Component({
selector: 'app-userlist',
templateUrl: './userlist.component.html',
styleUrls: ['./userlist.component.css'],
providers : [FakedataService]
})
export class UserlistComponent implements OnInit {
userTotalPages;
userCurrentPage;
constructor(private _fService : FakedataService) { }
ngOnInit() {
this.loadUsers();
}
loadUsers(pageNo? : number){
this._fService.getUsers(pageNo).subscribe(usersData => {
this.userTotalPages = usersData['total_pages'];
this.userCurrentPage = usersData['page'];
console.log(usersData);
});
}
checkPageChanged(e){
if(typeof e.newPage === 'number')
{
this.loadUsers(e.newPage);
}
}
}Releases
v.0.1.10
- Documentation for UnitSort updated
v.0.1.9
- UnitSort compoment to give power for sorting
- Flexibility to provide custom class to filter cover div
v.0.1.8
- Pagination bug fixes.(https://github.com/appcarvers/ngx-unite-list/issues/1, https://github.com/appcarvers/ngx-unite-list/issues/4)
v.0.1.7
- Added Cancel button for date filters.
v.0.1.6
- Pagination bug fixes.
v.0.1.5
- Pagination page-numbers are now limited to display only 10 pages at once if there are more.
- Pagination : First, previous, next, last buttons will now update the pagenumber out of box.
v.0.1.4
- Bug Fixes
v.0.1.3
- Bug Fixes
v.0.1.2
- Seperate attribute to assign class for search-box viz. searchbox-class.
- Removed margin from pagination.
