RxDataTable

This is a reactive data-table library powered by RxJS and NgBootstrap.

See the Demo in action

These are the features you'll get using this library:

• Pagination: RxDataTable pagination works through PaginationStrategies, you can indicate to each RxDataTable's component what strategy you want to use. Default is PaginationStrategy.NONE.

• Grouping: You could choose between a data-table with grouping or a basic data-table.

• Reactive: Each data-table component receives a BehaviorSubject, whenever you want to update the view with some changes, you should emit a new value to the data-table component.

• Descriptors: Instead of create an indepent cell template for each cell in your data-table, RxDataTable uses a set of descriptors (an array of properties as strings) which will be used to render the rows and cells of the data-table. Descriptors also describe the order of the columns in the data table, left to right!

Getting Started

First, install rx-data-table in your project:

$ npm install --save @ng-bootstrap/ng-bootstrap
$ npm install --save rx-data-table

Import the DataTableModule in your AppModule or only in the module where you will use it:

import { RxDataTableModule } from 'rx-data-table';

@NgModule({
  ...,
  imports: [
    ...,
    RxDataTableModule,
    ...
  ],
  ...
})
export class AppModule {
}

Imports the DataTableModule will able you to use these components in your templates:

• RxDataTableComponent: Use it with the tag <rx-data-table-basic>. This is a wrapper for InnerDataTableComponent, which implements pagination for the basic use cases of a data table.

• RxDataTableGroupComponent: Use it with the tag <rx-data-table-group>. This is a wrapper for InnerDataTableComponent, which implements pagination for the group use cases of a group data table.

• RxInnerDataTableComponent: This component is the core of the library, it's the raw component which makes all the job behind the components above. It doesn't manages the pagination, letting you to manage your own implementation of pagination; also, this component makes use of DataTableStrategies, you can indicate two strategies according to the kind of data table you need: DataTableStrategies.GROUP and DataTableStrategies.NORMAL.

Please see the complete documentation to learn how you could use this component.

Take a look

You can download the demo to see the source code in action, just follow the next steps:

$ git clone https://github.com/abnerey/rx-data-table.git
$ cd rx-data-table
$ npm install
$ ng serve 

Then open localhost:4200 in your browser.

Notes: In future releases I'm going to decouple the use of NgBootstrap, so, you will only need to install ng-bootstrap if you want to use RxDataTableComponent and RxDataTableGroupComponent, let me know what you think, send me a message to: [email protected]