@railinc/rl-ng-table
v0.0.13
Published
Simple table extension with sorting, filtering, paging, drag&drog, editing...
Downloads
27
Keywords
Readme
rl-ng-table
Simple table extension with sorting, filtering, paging, drag&drog, editing...
Installation
To install this library, run:
$ npm install @railinc/rl-ng-table --save
Usage
You can import rl-datepicker-popup in any Angular application:
and then from your Angular AppModule
or SharedModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RlNgTableModule } from '@railinc/rl-ng-table';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RlNgTableModule
],
declarations: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once your library is imported, you can use it in your Angular application:
<rl-ng-table
[config]="myTable.config"
[isDnd]="false"
[rows]="myTable.rows"
[columns]="myTable.columns"
(tableChanged)="onTableChanged(myTable.config)"
(cellClicked)="onTableCellClick($event)">
</rl-ng-table>
[config]
configuration of rl-ng-table
. It is the place to set paging, sorting, filtering and className.
[isDnd]
Enable/Disable drag and drog sorting for rl-ng-table
[rows]
rows of data that will be displayed on rl-ng-table
[columns]
columns definition for rl-ng-table
. There are three properties need to be set for each column.
title
: the title that will be display on the header of each column.
name
: name should match the property name of the row object in rows. The value of the property will be displayed.
editable
(optional): Allow user to edit the content of the cell by double clicking it.
(tableChanged)
tableChanged
will invoke the callback function when table changed.
(cellClicked)
cellClicked
will invoke the callback function when any of the table cells is clicked.
(cellEdited)
cellEdited
will invoke the callback function when cell editing is completed.
Development
To generate all *.js
, *.js.map
and *.d.ts
files:
$ npm run tsc
To lint all *.ts
files:
$ npm run lint
License
MIT © Bruce Gong