Rxtable-library NPM

RXTable-library

Easy to use Angular 4+ Table component with both server or client side pagination and sorting.

How to Use

Typical use of the rxtable with a observable service with server side pagination

app.component.html

<rx-table cssClass="table">
  <thead>
    <tr>
      <th sort field="id">ID</th>
      <th sort field="number">Number</th>
      <th>Start time</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *rxTableFor="let data of testdata; client:true; pagination:2">
      <td>{{data.id}}</td>
      <td>{{data.number}}</td>     
      <td>{{data.startDate}}</td> 
      <td>
        <a  class="btn  btn-outline-primary">
          <i class="fa fa-search"></i>&nbsp; Details
        </a>
      </td>
    </tr>
  </tbody>
</rx-table>

app.component.ts

import { DataService } from './dataService';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/of';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})


export class AppComponent implements OnInit {

 testdata: Function;

  constructor(public _service: DataService) {
  }

  ngOnInit() {
    this.testdata = this._service.getData.bind(this._service);
  }
}

dataService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, } from 'rxjs/Observable';
import { RxTableRequest } from 'rxtable-library/src/app/modules/rxtable/models/RxTableRequest';
import { IRxTableResponse} from 'rxtable-library/src/app/modules/rxtable/models/RxTableResponse';


@Injectable()
export class DataService {
    constructor(private http: HttpClient) {
    }

    getData(request?: RxTableRequest): Observable<IRxTableResponse<Array<any>>> {
        return this.http.get<IRxTableResponse<Array<any>>>('/api/endpoint', { params: this.toHttpParams(request) })
    }

    private toHttpParams(params): HttpParams {
        if (!params) {
            return new HttpParams();
        }
        return Object.getOwnPropertyNames(params)
            .reduce((p, key) => {
                if (key === 'sort') {
                    if (params[key]) {
                        return p.set('sort', params[key].field).set('dir', params[key].dir);
                    } else {
                        return p.set(key, '');
                    }
                } else {
                    return p.set(key, params[key]);
                }
            }, new HttpParams());
    }
}

Options

Options for rxtable component

<rx-table cssClass="table" cssPagination="pagination" pagination="true" sorting="true">

Setting	Description	Default Value
cssClass	css class applied to the table	`table`
cssPaginator	css class applied to the pagination	`pagination`
pagination	enable table pagination	`true`
sorting	enable table sorting	`true`
cssFooter	css class applied to the pagitor footer
sorting	enable table sorting	`true`
paginationPages	enable pagination limit dropdown	`false`
params	extra parameters to pass to the request obj.

Options for *rxTableFor directive

*rxTableFor="let data of testdata; client:true; pagination:2">

Setting	Description	Default Value
testdata	array or observable function
client	client/server pagination	`false`
pagination	number of rows in the table per page	`20`

Installation

$ npm install rxtable-library

Update app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RxtableModule } from 'rxtable-library';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RxtableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }