ngx-easy-table/ngx-easy-table/ngx-easy-table.js

Angular easy table

import { BrowserModule } from '@angular/platform-browser';
import { ChangeDetectorRef, Component, ContentChild, EventEmitter, Injectable, Input, NgModule, Output, Pipe, TemplateRef } from '@angular/core';
import { Http, HttpModule } from '@angular/http';
import 'rxjs/add/operator/map';
import { Subject as Subject$1 } from 'rxjs/Subject';

class HttpService {
    /**
     * @param {?} http
     */
    constructor(http$$1) {
        this.http = http$$1;
    }
    /**
     * @param {?} url
     * @return {?}
     */
    getData(url) {
        return this.http.get(url)
            .map((responseData) => {
            return responseData.json();
        });
    }
}
HttpService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
HttpService.ctorParameters = () => [
    { type: Http, },
];

class FiltersService {
    constructor() {
        this.filters = [];
    }
    /**
     * @param {?} k
     * @param {?} v
     * @return {?}
     */
    update(k, v) {
        this.filters[k] = v;
    }
    ;
    /**
     * @return {?}
     */
    get() {
        return this.filters;
    }
}
FiltersService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
FiltersService.ctorParameters = () => [];

class ResourceService {
    constructor() {
        this.data = [];
        this.keys = [];
        this.order = [];
        this.previousData = [];
    }
    /**
     * @return {?}
     */
    static getPipedData() {
        if (!this._pipedDataEmitter) {
            this._pipedDataEmitter = new EventEmitter();
        }
        return this._pipedDataEmitter;
    }
    /**
     * @return {?}
     */
    getOrder() {
        return this.order[this.key];
    }
    ;
    /**
     * @param {?} key
     * @return {?}
     */
    sortBy(key) {
        this.key = key;
        if (Object.keys(this.order).length === 0) {
            this.order[this.key] = 'asc';
        }
        if (this.order[this.key] === 'asc') {
            this.order = [];
            this.order[this.key] = 'desc';
            this.data.sort((a, b) => this.compare(a, b));
        }
        else {
            this.order = [];
            this.order[this.key] = 'asc';
            this.data.sort((a, b) => this.compare(b, a));
        }
        return this.data;
    }
    ;
    /**
     * @param {?} a
     * @param {?} b
     * @return {?}
     */
    compare(a, b) {
        if ((isNaN(parseFloat(a[this.key])) || !isFinite(a[this.key])) || (isNaN(parseFloat(b[this.key])) || !isFinite(b[this.key]))) {
            if (a[this.key] + ''.toLowerCase() < b[this.key] + ''.toLowerCase()) {
                return -1;
            }
            if (a[this.key] + ''.toLowerCase() > b[this.key] + ''.toLowerCase()) {
                return 1;
            }
        }
        else {
            if (parseFloat(a[this.key]) < parseFloat(b[this.key])) {
                return -1;
            }
            if (parseFloat(a[this.key]) > parseFloat(b[this.key])) {
                return 1;
            }
        }
        return 0;
    }
    ;
}
ResourceService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
ResourceService.ctorParameters = () => [];

class ConfigService {
    constructor() {
        this.searchEnabled = true;
        this.orderEnabled = true;
        this.globalSearchEnabled = true;
        this.footerEnabled = false;
        this.paginationEnabled = true;
        this.exportEnabled = true;
        this.editEnabled = false;
        this.clickEvent = false;
        this.selectRow = true;
        this.selectCol = false;
        this.selectCell = false;
        this.resourceUrl = "https://www.json-generator.com/api/json/get/ceVvFoDEeq";
        this.rows = 10;
        this.columns = [];
        this.hiddenColumns = new Set([]);
    }
}
ConfigService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
ConfigService.ctorParameters = () => [];

class TableComponent {
    /**
     * @param {?} filtersService
     * @param {?} config
     * @param {?} resource
     * @param {?} httpService
     * @param {?} cdr
     */
    constructor(filtersService, config, resource, httpService, cdr) {
        this.filtersService = filtersService;
        this.config = config;
        this.resource = resource;
        this.httpService = httpService;
        this.cdr = cdr;
        this.event = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (this.configuration) {
            this.config = this.configuration;
        }
        this.numberOfItems = 0;
        this.itemsObservables = this.httpService.getData(this.config.resourceUrl);
        this.itemsObservables.subscribe(res => {
            this.data = res;
            this.numberOfItems = res.length;
            this.keys = Object.keys(this.data[0]);
            this.resource.keys = this.keys;
        });
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.cdr.detectChanges();
    }
    /**
     * @param {?} key
     * @return {?}
     */
    orderBy(key) {
        this.data = this.resource.sortBy(key);
    }
    /**
     * @param {?} $event
     * @param {?} row
     * @param {?} key
     * @param {?} colIndex
     * @param {?} rowIndex
     * @return {?}
     */
    clickedCell($event, row, key, colIndex, rowIndex) {
        if (this.config.selectRow) {
            this.selectedRow = rowIndex;
        }
        if (this.config.selectCol) {
            this.selectedCol = colIndex;
        }
        if (this.config.selectCell) {
            this.selectedRow = rowIndex;
            this.selectedCol = colIndex;
        }
        if (this.config.clickEvent) {
            this.event.emit({
                event: $event,
                row: row,
                key: key,
                rowId: rowIndex,
                colId: colIndex,
            });
        }
    }
    /**
     * @return {?}
     */
    isColumnDefined() {
        if (this.config.columns.length === 0) {
            return false;
        }
        if (this.keys.length !== this.config.columns.length) {
            console.error('columns count in the configuration is not equal to columns count from JSON');
            return false;
        }
        return true;
    }
    /**
     * @param {?} colIndex
     * @return {?}
     */
    showColumn(colIndex) {
        return !this.config.hiddenColumns.has(colIndex);
    }
    /**
     * @param {?} colIndex
     * @return {?}
     */
    toggleColumn(colIndex) {
        if (this.config.hiddenColumns.has(colIndex)) {
            this.config.hiddenColumns.delete(colIndex);
        }
        else {
            this.config.hiddenColumns.add(colIndex);
        }
    }
}
TableComponent.decorators = [
    { type: Component, args: [{
                selector: 'ng2-table',
                providers: [HttpService, FiltersService, ResourceService, ConfigService],
                template: `
    <global-search
      *ngIf="config.globalSearchEnabled"
      (globalUpdate)="globalSearchTerm = $event">
    </global-search>
    <csv-export *ngIf="config.exportEnabled"></csv-export>

    <table class="ng2-table__table--striped">
      <thead>
      <tr>
        <ng-container *ngFor="let key of keys;let headerIndex = index">
          <th [style.display]="config.orderEnabled?'':'none' "
              *ngIf="showColumn(key)"
              (click)="orderBy(key)">
            <div *ngIf="isColumnDefined();then customHeader else defaultHeader"></div>
            <ng-template #customHeader>{{config.columns[headerIndex]}}</ng-template>
            <ng-template #defaultHeader>{{ key }}</ng-template>
            <span *ngIf="resource.order[key]==='asc' "
                  class="icon-sort-alpha-desc">
            </span>
            <span *ngIf="resource.order[key]==='desc' "
                  class="icon-sort-alpha-asc">
            </span>
          </th>
        </ng-container>
        <ng-container *ngFor="let key of keys">
          <th [style.display]="!config.orderEnabled?'':'none' "
              *ngIf="showColumn(key)">
            {{ key }}
          </th>
        </ng-container>
        <th *ngIf="config.editEnabled">Actions</th>
      </tr>
      <tr *ngIf="config.searchEnabled">
        <ng-container *ngFor="let key of keys">
          <th *ngIf="showColumn(key)">
            <table-header (update)="term = $event" [key]="key"></table-header>
          </th>
        </ng-container>
        <th *ngIf="config.editEnabled"></th>
      </tr>
      </thead>
      <tbody *ngIf="data">
      <ng-container *ngIf="tpl">
        <tr *ngFor="let row of data | search : term | global : globalSearchTerm | pagination : range;
                  let rowIndex = index"
            [class.ng2-table__table-row--selected]="rowIndex == selectedRow && !config.selectCell">
          <ng-container [ngTemplateOutlet]="tpl"
                        [ngOutletContext]="{ $implicit: row }">
          </ng-container>
        </tr>
      </ng-container>
      <ng-container *ngIf="!tpl">
        <tr *ngFor="let row of data | search : term | global : globalSearchTerm | pagination : range;
                  let rowIndex = index"
            [class.ng2-table__table-row--selected]="rowIndex == selectedRow && !config.selectCell">
          <ng-container *ngFor="let key of keys; let colIndex = index">
            <td *ngIf="showColumn(key)"
                (click)="clickedCell($event, row, key, colIndex, rowIndex)"
                [class.ng2-table__table-col--selected]="colIndex == selectedCol && !config.selectCell"
                [class.ng2-table__table-cell--selected]="colIndex == selectedCol && rowIndex == selectedRow && !config.selectCol && !config.selectRow"
            >
              <div>{{ row[key] }}</div>
            </td>
          </ng-container>
          <td *ngIf="config.editEnabled">
            <button class="ng2-table__button">Edit</button>
          </td>
        </tr>
      </ng-container>
      </tbody>
      <tbody *ngIf="!data">
      <tr>
        <td>No results</td>
      </tr>
      </tbody>
      <tfoot *ngIf="config.footerEnabled">
      <tr>
        <td *ngFor="let key of keys"></td>
        <td></td>
      </tr>
      </tfoot>
    </table>

    <pagination
      *ngIf="config.paginationEnabled"
      [numberOfItems]="numberOfItems"
      (updateRange)="range = $event">
    </pagination>
  `,
                styles: [`
    @import url("../assets/fonts/style.css");
    @import "~lato-font";

    * {
      font-family: Lato, serif;
    }

    .ng2-table__button, .ng2-table__csv-export-button {
      background: #f0f0f0;
      border: 1px solid #d7d7d7;
      font-size: .8em;
      padding: 6px;
    }

    .ng2-table__table, .ng2-table__table--striped {
      border-spacing: 0;
      width: 100%;
    }

    .ng2-table__table td,
    .ng2-table__table th, .ng2-table__table--striped td,
    .ng2-table__table--striped th {
      border-color: #f2f2f2;
      border-style: solid;
      border-width: 1px 1px 0 0;
      margin: 0;
      padding: 2px;
    }

    .ng2-table__table thead > th, .ng2-table__table--striped thead > th {
      cursor: pointer;
      font-weight: 700;
      text-align: left;
    }

    .ng2-table__table tr:last-child th, .ng2-table__table--striped tr:last-child th {
      border-bottom-color: #cacaca;
    }

    .ng2-table__table tr:last-child td, .ng2-table__table--striped tr:last-child td {
      border-bottom: 1px solid #f0f0f0;
    }

    .ng2-table__table tr td:first-child,
    .ng2-table__table tr th:first-child, .ng2-table__table--striped tr td:first-child,
    .ng2-table__table--striped tr th:first-child {
      border-left: 1px solid #f0f0f0;
    }

    .ng2-table__table--striped tbody tr:nth-child(odd) {
      background: #fafafa;
    }

    .ng2-table__table-row--selected {
      background: #66c6f0 !important;
    }

    .ng2-table__table-col--selected {
      background: #66c6f0 !important;
    }

    .ng2-table__table-cell--selected {
      background: #66c6f0 !important;
    }
  `]
            },] },
];
/**
 * @nocollapse
 */
TableComponent.ctorParameters = () => [
    { type: FiltersService, },
    { type: ConfigService, },
    { type: ResourceService, },
    { type: HttpService, },
    { type: ChangeDetectorRef, },
];
TableComponent.propDecorators = {
    'configuration': [{ type: Input },],
    'event': [{ type: Output },],
    'tpl': [{ type: ContentChild, args: [TemplateRef,] },],
};

class GlobalSearch {
    constructor() {
        this.globalUpdate = new EventEmitter();
    }
}
GlobalSearch.decorators = [
    { type: Component, args: [{
                selector: 'global-search',
                template: `
    <label class="ng2-table__global-search-label" for="search">
      <input type="text"
             id="search"
             class="ng2-table__input"
             #input
             (input)="globalUpdate.emit({value: input.value})"
             placeholder="Search"/>
    </label>
  `,
                styles: [`
    .ng2-table__input {
      border: 0;
      font-size: .9em;
      margin: 0;
      padding: 2px;
      width: 99%;
    }

    .ng2-table__global-search-label {
      border: 1px solid #f0f0f0;
      display: inline-block;
      margin: 6px 0;
      padding: 2px;
      width: 300px;
    }
    .ng2-table__global-search-label::before {
      color: #cacaca;
      left: 290px;
      position: absolute;
      top: 18px;
      z-index: 1;
    }
  `]
            },] },
];
/**
 * @nocollapse
 */
GlobalSearch.ctorParameters = () => [];
GlobalSearch.propDecorators = {
    'globalUpdate': [{ type: Output },],
};

class CsvExport {
    /**
     * @param {?} resource
     * @param {?} config
     */
    constructor(resource, config) {
        this.resource = resource;
        this.config = config;
        this.exportCsv = () => {
            const /** @type {?} */ data = this.resource.data;
            let /** @type {?} */ csvContent = "data:text/csv;charset=utf-8,";
            let /** @type {?} */ dataString = "";
            let /** @type {?} */ x = [];
            const /** @type {?} */ keys = [...this.resource.keys].filter((key) => {
                return !this.config.hiddenColumns.has(key);
            });
            data.forEach((row, index) => {
                x[index] = [];
                keys.forEach((i) => {
                    if (row.hasOwnProperty(i)) {
                        if (typeof row[i] === "object") {
                            row[i] = "Object"; // so far just change object to "Object" string
                        }
                        x[index].push(row[i]);
                    }
                });
            });
            csvContent += keys + "\n";
            x.forEach((row, index) => {
                dataString = row.join(",");
                csvContent += index < data.length ? dataString + "\n" : dataString;
            });
            const /** @type {?} */ encodedUri = encodeURI(csvContent);
            const /** @type {?} */ link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "my_data.csv");
            link.click();
        };
    }
}
CsvExport.decorators = [
    { type: Component, args: [{
                selector: 'csv-export',
                template: `
    <button class="ng2-table__csv-export-button"
            (click)="exportCsv()">Export to CSV
    </button>`,
                styles: [`
    /*TODO move this button to some imports */
    .ng2-table__csv-export-button {
      background: #f0f0f0;
      border: 1px solid #d7d7d7;
      font-size: .8em;
      padding: 6px;
      display: inline-block;
      float: right;
      margin: 6px 0;
    }
  `]
            },] },
];
/**
 * @nocollapse
 */
CsvExport.ctorParameters = () => [
    { type: ResourceService, },
    { type: ConfigService, },
];

class Header {
    /**
     * @param {?} filtersService
     */
    constructor(filtersService) {
        this.filtersService = filtersService;
        this.update = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.update.emit({});
    }
}
Header.decorators = [
    { type: Component, args: [{
                selector: 'table-header',
                template: `
  <label for="search_{{ key }}">
    <input type="text"
           id="search_{{ key }}"
           aria-label="Search"
           placeholder="Search for {{ key }}"
           class="ng2-table__input"
           #input
           (input)="update.emit({value: input.value, key: key})"
    >
  </label>`,
                styles: [`
    .ng2-table__input {
      border: 0;
      font-size: .9em;
      margin: 0;
      padding: 2px;
      width: 99%;
    }
  `]
            },] },
];
/**
 * @nocollapse
 */
Header.ctorParameters = () => [
    { type: FiltersService, },
];
Header.propDecorators = {
    'key': [{ type: Input },],
    'update': [{ type: Output },],
};

class PaginationService {
    /**
     * @param {?} resource
     * @param {?} config
     */
    constructor(resource, config) {
        this.resource = resource;
        this.config = config;
        this.updateRangeSource = new Subject$1();
        this.updateRange$ = this.updateRangeSource.asObservable();
        this.ranges = [5, 10, 25, 50, 100];
        this.pageNumber = 1;
        this.range = this.config.rows || 10;
        this.pageNumbers = [];
        ResourceService.getPipedData().subscribe(data => {
            this.numberOfItems = data;
            this.updateNumberPerPage();
        });
    }
    /**
     * @return {?}
     */
    emitPaginationProperties() {
        this.updateRangeSource.next({ range: this.range, page: this.pageNumber });
    }
    /**
     * @return {?}
     */
    updateNumberPerPage() {
        // issue #5
        // if (this.range > this.numberOfItems && this.numberOfItems > 0) {
        //   this.range = this.numberOfItems;
        // }
        this.pageNumbers = Array(this.paginationItemsCount)
            .fill(this.paginationItemsCount, 0)
            .map((_, i) => i + 1);
    }
    /**
     * @return {?}
     */
    updatePagination() {
        this.updateNumberPerPage();
        this.emitPaginationProperties();
    }
    /**
     * @param {?} currentRange
     * @return {?}
     */
    isActiveRange(currentRange) {
        return currentRange === this.range;
    }
    /**
     * @param {?} currentPage
     * @return {?}
     */
    isActivePage(currentPage) {
        return currentPage === this.pageNumber;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    nextPage(event) {
        event.preventDefault();
        if (!this.isLastPage()) {
            this.pageNumber++;
            this.updatePagination();
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    previousPage(event) {
        event.preventDefault();
        if (!this.isFirstPage()) {
            this.pageNumber--;
            this.updatePagination();
        }
    }
    /**
     * @return {?}
     */
    isLastPage() {
        return this.pageNumber === this.pageNumbers.length;
    }
    /**
     * @return {?}
     */
    isFirstPage() {
        return this.pageNumber === 1;
    }
    /**
     * @return {?}
     */
    ngOnChanges() {
        this.updatePagination();
    }
    /**
     * @param {?} event
     * @param {?} number
     * @return {?}
     */
    changeRange(event, number) {
        event.preventDefault();
        this.range = number;
        this.pageNumber = 1;
        this.updatePagination();
    }
    /**
     * @param {?} event
     * @param {?} numberOfPage
     * @return {?}
     */
    changePage(event, numberOfPage) {
        event.preventDefault();
        this.pageNumber = numberOfPage;
        this.updatePagination();
    }
    /**
     * @return {?}
     */
    get paginationItemsCount() {
        return Math.ceil(this.numberOfItems / this.range);
    }
}
PaginationService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
PaginationService.ctorParameters = () => [
    { type: ResourceService, },
    { type: ConfigService, },
];

class Pagination {
    /**
     * @param {?} paginationService
     */
    constructor(paginationService) {
        this.paginationService = paginationService;
        this.numberOfItems = this.paginationService.numberOfItems;
        this.updateRange = new EventEmitter();
        paginationService.updateRange$.subscribe(ev => {
            this.updateRange.emit(ev);
        });
    }
}
Pagination.decorators = [
    { type: Component, args: [{
                selector: 'pagination',
                template: `
    <div class="ng2-table__pagination-wrapper">
      <ul class="ng2-table__pagination">
        <li [class.disabled]="paginationService.isFirstPage()"
            (click)="paginationService.previousPage($event)">
          <span class="icon-circle-left"></span>
        </li>
        <li *ngFor="let page of paginationService.pageNumbers"
            (click)="paginationService.changePage($event, page)"
            [class.active]="paginationService.isActivePage(page)">
          <a href="#">{{page}}</a>
        </li>
        <li [class.disabled]="paginationService.isLastPage()"
            (click)="paginationService.nextPage($event)">
          <span class="icon-circle-right"></span>
        </li>
      </ul>

      <ul class="ng2-table__items-per-page">
        <li [class.active]="paginationService.isActiveRange(range)"
            (click)="paginationService.changeRange($event, range)"
            *ngFor="let range of paginationService.ranges">
          <a href="#">{{range}}</a>
        </li>
      </ul>
    </div>
  `,
                styles: [`
    @import url("../../../assets/fonts/style.css");

    .ng2-table__pagination, .ng2-table__items-per-page {
      display: inline-block;
      float: left;
      list-style-type: none;
      margin: 8px 0;
      padding: 0;
    }
    .ng2-table__pagination li, .ng2-table__items-per-page li {
      border: 1px solid #f0f0f0;
      float: left;
      margin: 0;
      padding: 6px;
      cursor: pointer;
      border-left: 0;
      border-right: 0;
    }
    .ng2-table__pagination li:first-child, .ng2-table__items-per-page li:first-child {
      border-left: 1px solid #f0f0f0;
    }
    .ng2-table__pagination li:last-child, .ng2-table__items-per-page li:last-child {
      border-right: 1px solid #f0f0f0;
    }
    .ng2-table__pagination a, .ng2-table__items-per-page a {
      color: inherit;
      text-decoration: none;
    }
    .ng2-table__pagination .active, .ng2-table__items-per-page .active {
      background: #3e71b4;
      border-color: #3e71b4;
      color: #fff;
    }

    .ng2-table__pagination .disabled, .ng2-table__items-per-page .disabled {
      background: #fff;
      border-color: #f0f0f0;
      color: #dddddd;
      cursor: default;
    }

    .ng2-table__items-per-page {
      float: right;
    }
    .ng2-table__pagination-wrapper::after {
      clear: both;
      content: '';
      display: block;
      height: 0;
      visibility: hidden;
    }
  `],
                providers: [PaginationService],
            },] },
];
/**
 * @nocollapse
 */
Pagination.ctorParameters = () => [
    { type: PaginationService, },
];
Pagination.propDecorators = {
    'numberOfItems': [{ type: Input },],
    'updateRange': [{ type: Output },],
};

class SearchPipe {
    /**
     * @param {?} filtersService
     * @param {?} resource
     */
    constructor(filtersService, resource) {
        this.filtersService = filtersService;
        this.resource = resource;
    }
    /**
     * @param {?} value
     * @param {?} filters
     * @return {?}
     */
    transform(value, filters) {
        if (typeof value === "undefined") {
            return;
        }
        this.resource.data = value.slice();
        if (typeof filters === 'undefined' || Object.keys(filters).length === 0) {
            return this.resource.data;
        }
        this.filtersService.update(filters.key, filters.value);
        let /** @type {?} */ filtersArr = this.filtersService.get();
        value.forEach((item) => {
            for (const /** @type {?} */ filterKey in filtersArr) {
                if (filtersArr.hasOwnProperty(filterKey)) {
                    let /** @type {?} */ element;
                    if (typeof item[filterKey] === "string") {
                        element = item[filterKey].toLocaleLowerCase();
                    }
                    if (typeof item[filterKey] === "object") {
                        element = JSON.stringify(item[filterKey]);
                    }
                    if (typeof item[filterKey] === "number") {
                        element = item[filterKey].toString();
                    }
                    if (element.indexOf(filtersArr[filterKey].toLocaleLowerCase()) === -1) {
                        this.resource.data.splice(this.resource.data.indexOf(item), 1);
                        return;
                    }
                }
            }
        });
        return this.resource.data;
    }
}
SearchPipe.decorators = [
    { type: Pipe, args: [{
                name: 'search'
            },] },
];
/**
 * @nocollapse
 */
SearchPipe.ctorParameters = () => [
    { type: FiltersService, },
    { type: ResourceService, },
];

class PaginationPipe {
    /**
     * @param {?} resource
     */
    constructor(resource) {
        this.resource = resource;
    }
    /**
     * @param {?} value
     * @param {?} filters
     * @return {?}
     */
    transform(value, filters) {
        let /** @type {?} */ range = 10;
        if (typeof value === 'undefined') {
            return;
        }
        ResourceService.getPipedData().emit(value.length);
        let /** @type {?} */ copiedArr = value.slice();
        if (typeof filters !== 'undefined') {
            range = filters.range;
            copiedArr = value.slice(range * (filters.page - 1));
        }
        return copiedArr.splice(0, range);
    }
}
PaginationPipe.decorators = [
    { type: Pipe, args: [{
                name: 'pagination'
            },] },
];
/**
 * @nocollapse
 */
PaginationPipe.ctorParameters = () => [
    { type: ResourceService, },
];

class GlobalSearchPipe {
    /**
     * @param {?} resource
     */
    constructor(resource) {
        this.resource = resource;
    }
    /**
     * @param {?} dataArr
     * @param {?} filter
     * @return {?}
     */
    transform(dataArr, filter) {
        if (typeof dataArr === "undefined") {
            return;
        }
        if (typeof filter === 'undefined' || Object.keys(filter).length === 0 || filter === "") {
            return dataArr;
        }
        this.resource.data = [];
        dataArr.forEach((row) => {
            for (const /** @type {?} */ value in row) {
                if (row.hasOwnProperty(value)) {
                    let /** @type {?} */ element;
                    if (typeof row[value] === "object") {
                        element = JSON.stringify(row[value]);
                    }
                    if (typeof row[value] === "boolean") {
                        element = "" + row[value];
                    }
                    if (typeof row[value] === "string") {
                        element = row[value].toLocaleLowerCase();
                    }
                    if (typeof row[value] === "number") {
                        element = "" + row[value];
                    }
                    if (element.indexOf(filter["value"].toLocaleLowerCase()) >= 0) {
                        this.resource.data.push(row);
                        return;
                    }
                }
            }
        });
        return this.resource.data;
    }
}
GlobalSearchPipe.decorators = [
    { type: Pipe, args: [{
                name: 'global'
            },] },
];
/**
 * @nocollapse
 */
GlobalSearchPipe.ctorParameters = () => [
    { type: ResourceService, },
];

class TableModule {
}
TableModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    TableComponent,
                    GlobalSearch,
                    CsvExport,
                    Header,
                    Pagination,
                    SearchPipe,
                    PaginationPipe,
                    GlobalSearchPipe,
                ],
                imports: [
                    BrowserModule,
                    HttpModule
                ],
                exports: [TableComponent],
                providers: [],
                bootstrap: [TableComponent]
            },] },
];
/**
 * @nocollapse
 */
TableModule.ctorParameters = () => [];

/**
 * Generated bundle index. Do not edit.
 */

export { TableModule, TableComponent as ɵa, CsvExport as ɵg, GlobalSearch as ɵf, Header as ɵh, Pagination as ɵi, GlobalSearchPipe as ɵm, SearchPipe as ɵk, PaginationPipe as ɵl, ConfigService as ɵe, FiltersService as ɵc, HttpService as ɵb, PaginationService as ɵj, ResourceService as ɵd };
//# sourceMappingURL=ngx-easy-table.js.map