dc-pagination-table

Angular material table with pagination to manage static and dynamic records and paging

Usage no npm install needed!

<script type="module">
  import dcPaginationTable from 'https://cdn.skypack.dev/dc-pagination-table';
</script>

README

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':  'abc@def.com',
        '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':  'abc@def.com',
        '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':  'abc@def.com',
        '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 icon
data: data required on action
Array empty
button hide: boolean (optional)
label: string.
icon: button icon
data: 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 name
colspan: 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