2.2.0

Option to hide pagination dropdown range.
To enable it add paginationRangeEnabled parameter to your config service

import { Injectable } from '@angular/core';
import { Config } from './ngx-easy-table/model/config';

@Injectable()
export class ConfigService {
  public static config: Config = {
    searchEnabled: true,
    headerEnabled: true,
    orderEnabled: true,
    globalSearchEnabled: true,
    paginationEnabled: true,
    exportEnabled: false,
    clickEvent: true,
    selectRow: false,
    selectCol: false,
    selectCell: false,
    rows: 10,
    additionalActions: false,
    serverPagination: false,
    isLoading: false,
    detailsTemplate: false,
    groupRows: false,
    paginationRangeEnabled: true, // <-- here
  };
}

2.1.0

Configs model has new path:

Before:

import { Config } from 'ngx-easy-table/app/model/config';

After:

import { Injectable } from '@angular/core';
import { Config } from 'ngx-easy-table/src/app/ngx-easy-table/model/config';

@Injectable()
export class ConfigService {
  public static config: Config = {
    searchEnabled: false,
    headerEnabled: true,
    orderEnabled: false,
    globalSearchEnabled: false,
    paginationEnabled: true,
    exportEnabled: false,
    clickEvent: false,
    selectRow: true,
    selectCol: false,
    selectCell: false,
    rows: 5,
    additionalActions: false,
    serverPagination: true,
    isLoading: false,
    detailsTemplate: true,
    groupRows: false
  };
}

2.0.0

• Angular 5 support
• Group rows

<ngx-table
  [configuration]="configuration"
  [data]="data"
  [columns]="columns"
  [groupRowsBy]="'age'"
  [pagination]="pagination">
</ngx-table>

1.8.0

• row details

If you have more details than row can handle, you can put them into row details, and toggle when needed.

app.component.html

<ngx-table
  [configuration]="configuration"
  [data]="data"
  [columns]="columns"
  [detailsTemplate]="detailsTemplateRef"
  [pagination]="pagination">
</ngx-table>
<ng-template #detailsTemplate let-row>
  <div>
    <h2 class="color-green">{{row.company }}</h2>
    {{row.firstname }} {{row.lastname}}
    <hr>
    <span class="fa fa-address-card-o" aria-hidden="true"> </span> {{row.created | date}}
  </div>
</ng-template>

app.component.ts

export class AppComponent implements OnInit {
  @ViewChild('detailsTemplate') detailsTemplateRef: TemplateRef<any>;
}

1.7.1

• Server pagination
• Server sorting
• Breaking change: removed http module, to pass data to the table use [data] and [columns]:

<ngx-table 
  [configuration]="configuration"
  [data]="data"
  [columns]="columns"
  [pagination]="pagination"
  (event)="eventEmitted($event)">
</ngx-table>

  data = [
    { id: 1, age: 34, name: 'John Black', company: 'FooBar'},
    { id: 2, age: 24, name: 'Lucy Black', company: 'FooBar'},
    { id: 3, age: 23, name: 'John White', company: 'FooBar'},
  ];
  columns = [
    { key: 'id', title: 'ID' },
    { key: 'age', title: 'Age' },
    { key: 'name', title: 'Name' },
    { key: 'company', title: 'Company' }
  ];

• Breaking change: new config schema:

import { Injectable } from '@angular/core';
import { Config } from 'ngx-easy-table/app/model/config';

@Injectable()
export class ConfigService {
  public static config: Config = {
    searchEnabled: false,
    headerEnabled: false,
    orderEnabled: false,
    globalSearchEnabled: false,
    paginationEnabled: true,
    exportEnabled: false,
    clickEvent: false,
    selectRow: true,
    selectCol: false,
    selectCell: false,
    rows: 10,
    additionalActions: false,
    serverPagination: true,
    isLoading: false,
  };
}

1.7.0

server pagination and sorting

1.6.0

Breaking change.

before:
<ng2-table></ng2-table>

after:
<ngx-table></ngx-table>

Custom sort This option is removed in 2.0

  sortBy(key, order): void {
    this.sort = {
      key: key,
      order: order,
    };
  }

<div>
  <button class="dropdown" (click)="sortBy('created', 'asc')">Created asc</button>
  <button class="dropdown" (click)="sortBy('created', 'desc')">Created desc</button>
  <button class="dropdown" (click)="sortBy('id', 'asc')">ID</button>
</div>
<ngx-table
  [configuration]="configuration"
  [filters]="filters"
  [sort]="sort">
</ngx-table>

Custom css styles:

Add custom styles to table:

• ngx-table__header
• ngx-table__header-cell
• ngx-table__header-cell-additional-actions
• ngx-table__sortHeader
• ngx-table__body-empty
• ngx-table__footer
• ngx-table__global-search
• ngx-table__header-search
• ngx-table__table-menu
• ngx-icon-menu
• ngx-icon ngx-icon-arrow-up
• ngx-icon ngx-icon-arrow-down
• ngx-menu-item
• ngx-pagination
• ngx-page-item

1.5.0

Add style to row template

https://ngx-easy-table.stackblitz.io/template

Table for basic styles uses awesome Spectre.css - https://picturepan2.github.io/spectre.
Each class has prefix ngx- so you can easy customise table to you project.
If you use angular-cli just add basic styles to angular-cli.json:

"styles": [
    "../node_modules/ngx-easy-table/spectre.css",
    "../node_modules/ngx-easy-table/spectre-icons.css",
  ],

If you use just Angular without CLI, add above .css files as @import "~ngx-easy-table/spectre.css" to your basic style.css file or to .

If you would like to use your own styles just go to https://picturepan2.github.io/spectre/getting-started.html#custom
Customise Spectre.css (colors, marings, shadows etc). Then scroll to Custom prefix section and add prefix ngx- (this is because Spectre uses same classes as many other css frameworks).
By adding prefix you will use just spectre styles and vice versa. Spectre won't overwrite your app styles.

At the end run gulp run build and gulp run prefix and add it to you page.

1.4.0

Custom filters

This option is removed in 2.0

Create filter outside table and pass them to the table:

<input type="checkbox"
       id="showOpenCompanies"
       [checked]="isChecked"
       (change)="showOpenCompanies()">
<label for="showOpenCompanies">Show open companies</label>

<input type="range" min="1" max="10000"
       id="filterByAmount"
       (input)="filterByAmount($event.target.value)">
<label for="filterByAmount">filter by amount</label>

<ng2-table
  [configuration]="configuration"
  [filters]="filters"
</ng2-table>

  public filters = {};
  ngOnInit() {}
  showOpenCompanies() {
    this.filters['status'] = {
      value: 2, // 2 means open company (from database)
      query: '=',
    };
    this.filters = Object.assign({}, this.filters);
  }

  filterByAmount(value) {
    this.filters['amount'] = {
      value: value,
      query: '>',
    };
    this.filters = Object.assign({}, this.filters);
  }

1.3.6

1. Pass data to table by creating custom array: This option has been changed in 2.0

https://ngx-easy-table.stackblitz.io/custom-array

const array = [{'foo': 'bar'}, {'foo': 'baz'}];
this.configuration.data = array;

2. Pass custom headers to url, for example when you deal with OAuth2 and your request requires additional headers: Removed in 2.0

const headers = new HttpHeaders({ 'Authorization': 'Bearer token' });
this.configuration.httpHeaders = array;