DcPaginationTable

This library was generated with Angular CLI version 12.1.1.

Code scaffolding

Run ng generate component component-name --project dc-pagination-table to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project dc-pagination-table.

Note: Don't forget to add --project dc-pagination-table or else it will be added to the default project in your angular.json file.

Build

Run ng build dc-pagination-table to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build dc-pagination-table, go to the dist folder cd dist/dc-pagination-table and run npm publish.

Running unit tests

Run ng test dc-pagination-table to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Usage

Demo

There is a data set.

const data = [
    {
	    'First Name':  'ABC',
	    'Last Name':  'DEF',
	    'Short Name':  'XYZ',
	    'username':  'abcd',
	    'number':  0123456789,
	    'e-mail':  '[email protected]',
	    'Last Login':  '27-07-2021',
	    'Active':  true,
	    'Action': [
		    {
				hide: false,
			    menu: [{
					hide: false,
				    label:  "sample1",
				    img:  "sample1.png",
				    data:  ""
			    }]
		    },{
				hide: false,
			    button: [{
					hide: false,
				    label:  "sample2",
				    icon:  "ad-icon-pencil",
				    data:  ""
			    },{
					hide: false,
				    label:  "sample3",
				    icon:  "ad-icon-eye",
				    data:  ""
				}]
			}
		]
	},
    { 
		'First Name':  'ABC1',
	    'Last Name':  'DEF1',
	    'Short Name':  'XYZ1',
	    'username':  'abcd1',
	    'number':  0123456789,
	    'e-mail':  '[email protected]',
	    'Last Login':  '27-07-2021',
	    'Active':  true,
	    'Action': [
		    {
				hide: false,
			    menu: [{
					hide: false,
				    label:  "sample1",
				    img:  "sample1.png",
				    data:  ""
			    }]
		    },{
				hide: false,
			    button: [{
					hide: false,
				    label:  "sample2",
				    icon:  "ad-icon-pencil",
				    data:  ""
			    },{
					hide: false,
				    label:  "sample3",
				    icon:  "ad-icon-eye",
				    data:  ""
				}]
			}
		]
	},
    { 
		'First Name':  'ABC2',
	    'Last Name':  'DEF2',
	    'Short Name':  'XYZ2',
	    'username':  'abcd2',
	    'number':  0123456789,
	    'e-mail':  '[email protected]',
	    'Last Login':  '27-07-2021',
	    'Active':  true,
	    'Action': [
		    {
				hide: false,
			    menu: [{
					hide: false,
				    label:  "sample1",
				    img:  "sample1.png",
				    data:  ""
			    }]
		    },{
				hide: false,
			    button: [{
					hide: false,
				    label:  "sample2",
				    icon:  "ad-icon-pencil",
				    data:  ""
			    },{
					hide: false,
				    label:  "sample3",
				    icon:  "ad-icon-eye",
				    data:  ""
				}]
			}
		]
	}
];

Sample table html.

<!-- Table Pagination -->

<dc-pagination-table
	*ngIf="tableData && tableData.length > 0"
	[records]="tableData"
	[totalRecords]="totalRecords"
	[activePage]="activePage"
	[pageSize]="pageSize"
	[perPageList]="perPageList" 
    [groups]="columnGroups"
	(onPaginClick)="paginClick($event)"
	(onPageChange)="displayActivePage($event);"
	(onClickAction)="onUserClick($event);">
</dc-pagination-table>

Sample table component.

// Table Pagination

tableData: any[] = [];
tableActualData: any[] = [];

activePage:number = 1;
totalRecords: number = 0;
pageSize: number = 25;
perPageList: any[] = [];
isPagingStatic: boolean = true;

// End Table Pagination

constructor() {}

// Table Pagination

loadTableData(temp: any[]) {
	this.tableActualData = this.tableData;
	this.pageSize = 5;
	this.perPageList = [2,5,10,20];
	if(this.isPagingStatic){
		// static paging
		this.totalRecords = this.tableData.length;
		this.filterTable();
	}
}

displayActivePage(activePageNumber:number){
	if(activePageNumber != this.activePage){
		this.activePage = activePageNumber;
		this.paginClick({ isPageChanged:  false, pageSize:  this.pageSize });
	}
}  

paginClick(data: { isPageChanged: boolean; pageSize: number; }) {
	let  isPageChanged = data ? data.isPageChanged : false;
	this.pageSize = data ? data.pageSize : this.pageSize;
	if(isPageChanged){
		this.activePage = 1;
	}

	if(this.isPagingStatic){
		// static paging
		this.filterTable();
	} else {
		// endpoint call paging
	}
}  

filterTable() {
	let  start = (this.activePage - 1) * this.pageSize;
	let  end = (this.activePage) * this.pageSize;
	this.tableData = this.tableActualData.slice(start, end);
}

onUserClick(value: any) {
	console.log("Table Action Click : ",value);
}

API

Table Simple

| Props | Description | Type | Default | |------------------|------------------------------------|---------------|--------------------------| | records | the items you want to render | Array | isRequired | | columnNames | the order of columns | String | isRequired | | menu| hide: boolean (optional) label: string. img: menu icondata: data required on action | Array | empty | | button| hide: boolean (optional) label: string. icon: button icondata: data required on action | Object | empty |

Table Pagination

In addition to the above...

| Props | Description | Type | Default | |------------------|------------------------------------|---------------|--------------------------| | totalRecords| the length of the items | Number | isRequired | | perPageList| the numbers of the items on per page | Number | isRequired | | groups| grouping of columns label: group label. name: group namecolspan: row colspan | Array | Optional | | pageSize| the selected page size | Number | isRequired | activePage| user active page | Number | isRequired|

Example

npm start

By default, the example is on the 4200 port after run the command above. Then you can access localhost:4200 to see the demo.

Test

npm test

Other useful component

dc-pagination-table