ngx-datatabulate/data-table/data-table.component.ts

Render your data in tabular format with pagination and filters available out of the box. Just pass the config and tadhaan!!! your table will be ready with pagination and filters

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({
  selector: 'tj-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {

  _totalPages;
  _filters : Array<any> = [];
  bsConfig: Partial<BsDatepickerConfig>;

  public totalItems: number = 64;
  public currentPages: number = 4;
  public smallnumPages: number = 0;
 
  public setPage(pageNo: number): void {
    this.currentPage = pageNo;
  }

  @Input() displayTable = true;
  @Input() tableData;
  @Input() tableHeaders;
  @Input() currentPage: number = 4;;
  @Input() searchBox = false;
  @Input() pagesToShow = 7;
  @Input('table-class') tableBlockClass = 'table';
  @Input('filter-class') filterBlockClass = 'my-col col-xs-3';
  @Input() set totalPages(value){
    this._totalPages = Array(value).fill(1); // [0,1,2,3,4]
  };
  @Input() set filters(value){
    this._filters = value; // [0,1,2,3,4]
  };

  @Output() pageChanged = new EventEmitter();
  @Output() filterChanged = new EventEmitter();
  @Output() searchInput = new EventEmitter();

  @ViewChild('tableBody') checkingTableBody;

  myOptions: Array<any>;
  mySelectValue: Array<string>;

  constructor() {
  }

  ngOnInit() {
    console.log('chekcing table body ', this.checkingTableBody);
  }

  pageChange(newPage){
    var thisNewPage = newPage;

    if(typeof newPage === 'number')
    {
      // just because the pagination value starts from 0 and not 1 :D
      thisNewPage++;
    }

    if(thisNewPage != this.currentPage)
    {
      var obj = { currentPage : this.currentPage, newPage : thisNewPage };
      this.pageChanged.emit(obj);
    }
  }

  filterSelected(e, f){
    var obj = {status : 'selected', filterId : f, value : e.id, text : e.text};
    this.filterChanged.emit(obj);
  }

  filterRemoved(e,f){
    var obj = {status : 'removed', filterId : f, value : e.id, text : e.text};
    this.filterChanged.emit(obj);
  }

  dateChanged(e, f){
    if(e)
    {
      let obj = {status : 'selected', filterId : f, value : e};
      this.filterChanged.emit(obj);
    }
    else
    {
      let obj = {status : 'removed', filterId : f, value : ''};
      this.filterChanged.emit(obj);
    }
  }

  searchValueChanged(e){
    let obj = {keyPressed : e.key, searchVal : e.target.value, keyCode : e.which};
    this.searchInput.emit(obj);
  }
}