Tables - luftsport/nlf-client GitHub Wiki

import { DefaultTableConfig } from 'app/interfaces/ngx-easy-table.interface';

import { DefaultConfig } from 'ngx-easy-table';

import { Columns, Config, STYLE } from 'ngx-easy-table';
import { DefaultTableConfig } from 'app/interfaces/ngx-easy-table.interface';

tableConf: Config;
public columns: Columns[] = [
    { key: 'value', title: 'Value Title' },
];

ngOnInit() {

    this.tableConf = DefaultConfig;
    this.tableConf.tableLayout.style = STYLE.TINY;
    this.tableConf.headerEnabled = false;
}

<ngx-table [id]="the_id" [configuration]="tableConf" [data]="functions" [columns]="columns">
  <ng-template let-row let-index="index">
      <td>
        ...
      </td>
  </ng-template>
</ngx-table>

<ngx-table [id]="'table_id'" [configuration]="tableConf" [data]="data" [columns]="columns" [(pagination)]="pagination" (event)="parseEvent($event)">

public parseEvent(obj: TableEventObject) {

    if (obj.event === 'onPagination') {
      this.pagination.limit = obj.value.limit ? obj.value.limit : this.pagination.limit;
      this.pagination.offset = obj.value.page ? obj.value.page : this.pagination.offset;
      this.pagination = { ...this.pagination };
      this.getData();
    }
    if (obj.event === 'onOrder') {

      // Limits which columns can order or not
      this.sort = [];
      let tmpSort = {};

      if (obj.value.order === 'desc') {
        tmpSort[obj.value.key] = -1;
      }
      else if (obj.value.order === 'asc') {
        tmpSort[obj.value.key] = 1;
      }
      this.sort.push(tmpSort);
      this.getData();
    }

  }


  public getData() {

    if (!!this.userData) {
      // Using OptionsInterface to build and pass options
      let options: ApiOptionsInterface = {
        query: {
          page: this.pagination.offset,
          max_results: this.pagination.limit,
          sort: this.sort,
        },
      };

      this.orsService.getObservationsSelf(options).subscribe(
        data => {
          this.pagination.count = data._meta.total; // this is for pagination
          this.pagination = { ...this.pagination }; // Need to create new object to make change-detection work
          this.data = data._items;
        },
        err => console.error(err),
        () => {
          this.tableConf.isLoading = false;
          this.dataReady = true;
        }
      );
    }
  }