How To Provide Pagination and Filtering via Custom Table

Posted By : Shivam Gupta | 29-Jun-2018

Angular2

ngx-data table support around all basic table functionality example: dynamic data insertion, filtering of a table via specific column name, sorting of a table, pagination of a table via client and server side. some basic example is given.

Table input: - for efficient implementation ngx-data table provide some specific input, which is given under.

1. column mode: - If a user wants to set the width of columns then this input property will be used. Width can be used in a three-way, which is given under.

a. - standard

b. - flex

c. - force

Columns: - this property accepts an array of columns which will be shown in head section.

External paging: - if any user wants to provide external paging(server-side pagination), then the value for external paging will be true.

External sorting: - if any user wants to provide external sorting(server-side pagination), then the value for external sorting will be true.

Messages: - message which will be shown at specific conditions ex: if user table is empty then default message may be overridden with the value of messages.

Limit: - the total number of the row which can come in one page.

Reorderable: - can table row be reordered i.e if want to change the column position then we can reorder the table column with a true value.

rowHeight: - user can provide undefined(for fluid height), the specific number, or specific function which will provide the numbers in a result.

rowIdentity: - for tracking specific row user may use rowIdentity option(for tracking specific row.)

rows: - for providing the row data user will assign user data into rows option.

Scrollbar H: - if the user wants to provide horizontal scrollbar then the value will be true in scrollbar H. this property will be used when a user wants to provide responsiveness in the table.

Scrollbar V: - if a user wants to provide vertical scrollbar then the value will be true in scrollbar V. this property will be used when a user wants to provide responsiveness in the table.

Table pagination: - if any user wants to provide client or server side pagination with limited size. then ngx-data table provides such feature more manageable way.

Select check: - if the user wants to select a specific row then select check property will be used.

TrackByProp: - a property of row which will be uniquely defined i.e- id

rowClass: - if the user wants to provide a class in specific condition then the rowClass property will be used. ex; - return { 'old': row.age < 50 }

ex: - view part of pagination is given below: -

            <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif;">                <div class="widget-body">
                <ngx-datatable class="material" [rows]="rows" [columns]="columns" [columnMode]="'fixed'" [headerHeight]="50" [footerHeight]="50"
                    [rowHeight]="'auto'" [externalPaging]="true" [count]="page.totalElements" [offset]="page.pageNumber" [limit]="page.size"
                    (page)='setPage($event)' [scrollbarH]="true">
                </ngx-datatable>
                <ng-template #editDate let-row="row">
                    {{ row.createdDate | date:'medium'}}
                </ng-template>
                <ng-template #sno let-rowIndex="rowIndex">
                    {{rowIndex +1 + (page.pageNumber * 10)}}
                </ng-template>
            </div>
         
</span></span>

a component part of pagination is given below: -

            <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif;">    export class AddEthariumComponent implements OnInit {
    @ViewChild('editDate') editDate: TemplateRef<any>;
    @ViewChild('sno') sno: TemplateRef<any>;
    rows = [];
    public page: any = { totalElements: 0, pageNumber: 1, size: 10 };
    columns = [];
    
    ngOnInit() {
        let that = this;
        this.columns = [{ name: 'S.No.', cellTemplate: this.sno, width: '70' }, { name: 'Date', prop: "createdDate", cellTemplate: this.editDate }, { name: 'Receiver Address', prop: 'address', width: '360' }, { name: 'Net Amount', prop: 'netAmount' }, { name: 'Transaction Fee', prop: 'transactionFee', width: '160' }, { name: 'Status', prop: 'transactionStatus', width: '100' }, { name: 'Description', prop: 'description' }];
        this.pageTitleService.setTitle("Ethereum");
      
        this.setPage({ offset: 0 });
    } 
         
</span></span>

table filtering: - if any user wants to provide filter property from a client side, then ngx-data table also provide this specific feature.

             <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif;">               <ngx-datatable
        #table
        class='material'
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [limit]="10"
        [rows]='rows'>
      </ngx-datatable>
        </span></span>

component part of this section is given under -

           <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif;">              rows = [];
 
  temp = [];
 
  columns = [
    { prop: 'name' },
    { name: 'Company' },
    { name: 'Gender' }
  ];
  @ViewChild(DatatableComponent) table: DatatableComponent;
 
  constructor() {
    this.fetch((data) => {
       
      this.filterData = [...data];
      this.rows = data;
    });
  }
 
 getFilter(event) {
    const val = event.target.value.toLowerCase();
 
    // filter our data
    const temp = this.filterData.filter(function(d) {
      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
    });
 
    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
  }
   
        </span></span>