rl

rxtable-library

Angular 4.x+ table with pagination and sorting for observable data

Showing:

Popularity

Downloads/wk

6

GitHub Stars

2

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

12

Size (min+gzip)

50.3KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Angular Table

Readme

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">

SettingDescriptionDefault Value
cssClasscss class applied to the tabletable
cssPaginatorcss class applied to the paginationpagination
paginationenable table paginationtrue
sortingenable table sortingtrue
cssFootercss class applied to the pagitor footer
sortingenable table sortingtrue
paginationPagesenable pagination limit dropdownfalse
paramsextra parameters to pass to the request obj.

Options for *rxTableFor directive

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

SettingDescriptionDefault Value
testdataarray or observable function
clientclient/server paginationfalse
paginationnumber of rows in the table per page20

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 { }

Development

Want to contribute? Great!

npm library: rxtable-library

Todos

  • Write Tests

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100