PRS Ngx-DataTables

company.json

[
  {
    "name": "Ethel Price",
    "gender": "female",
    "company": "Johnson, Johnson and Partners, LLC CMP DDC",
    "age": 22
  },
  {
    "name": "Claudine Neal",
    "gender": "female",
    "company": "Sealoud",
    "age": 55
  },
  {
    "name": "Beryl Rice",
    "gender": "female",
    "company": "Velity",
    "age": 67
  },
  {
    "name": "Wilder Gonzales",
    "gender": "male",
    "company": "Geekko"
  },
  {
    "name": "Georgina Schultz",
    "gender": "female",
    "company": "Suretech"
  }
]

table-example.component.html

<div>
  <h3>Table Example</h3>

  <menu>
    <form [formGroup]="form">
      <label>
        <input type="checkbox" [formControl]="form.controls.name" />
        {{ filterLabels.name }}
      </label>

      <label>
        <input type="checkbox" [formControl]="form.controls.gender" />
        {{ filterLabels.gender }}
      </label>

      <label>
        <input type="checkbox" [formControl]="form.controls.age" />
        {{ filterLabels.age }}
      </label>
    </form>
  </menu>

  <ngx-datatable
    [rows]="rows"
    [columnMode]="ColumnMode.standard"
    [headerHeight]="50"
    [footerHeight]="50"
    rowHeight="auto"
  >

    <ngx-datatable-column
      [name]="filterLabels.name"
      [width]="500"
    >
      <ng-template let-column="column" ngx-datatable-header-template>
        {{ column.name }}
      </ng-template>

      <ng-template let-value="value" ngx-datatable-cell-template>
        Hi: <strong>{{ value }}</strong>
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column
      *ngIf="form.value.gender"
      [name]="filterLabels.gender"
    >
      <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
        <span (click)="sort()">{{ column.name }}</span>
      </ng-template>
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        My name is: <i [innerHTML]="row['name']"></i> and <i>{{ value }}</i>
      </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column
      *ngIf="form.value.age"
      [name]="filterLabels.age"
      [width]="500"
    >
      <ng-template let-value="value" ngx-datatable-cell-template>
        <div style="border:solid 1px #ddd;margin:5px;padding:3px">
          <div style="background:#999;height:10px" [style.width]="value + '%'"></div>
        </div>
      </ng-template>
    </ngx-datatable-column>

  </ngx-datatable>
</div>

table-example.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ColumnMode } from '@swimlane/ngx-datatable';

@Component({
  selector: 'app-example-a',
  templateUrl: './example-a.component.html',
  styleUrls: ['./example-a.component.scss']
})
export class ExampleAComponent {

  form: any;
  filters = [
    { id: 'name',   title: 'Name',   value: true, disabled: true  },
    { id: 'gender', title: 'Gender', value: true, disabled: false },
    { id: 'age',    title: 'Age',    value: true, disabled: false },
  ];
  filterLabels: { [id: string]: string  };

  rows = [];
  ColumnMode = ColumnMode;

  constructor(
    private _formBuilder: FormBuilder,
  ) {
    this.form = new FormGroup({});
    this.filterLabels = {};

    this.fetch(data => this.rows = data);
  }

  ngOnInit() {
    this.buildControls();
    this.filterLabels = this.filters.reduce((model, { id, title}) => {
      return { ...model, [ id ]: title };
    }, {});
  }

  buildControls(): void {
    const filters = this.filters.reduce((model, { id, value, disabled }) => {
      const control = this._formBuilder.control({ value, disabled });
      return { ...model, [id]: control };
    }, {});

    this.form = this._formBuilder.group( filters );
  }

  getFilterLabel(id: any): string {
    return this.filterLabels[ id ];
  }

  fetch(cb: (json:any)=>void): void {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data/company.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }
}