nt-table

NT Table

What does it do?

It is a ready table component made for agile development use which offers: ✔ Serverside (sorting,filtering,pagination) ✔ Row Drag & Pin ✔ Row edit, delete ✔ Column Drag & Pin ✔ Mulit row select ✔ Hide/Show Columns ✔ Export to CSV ✔ Print ✔ Responsive Design ✔ Custom actions template(soon)

But how it works?

NT Table uses ag-grid and angular materials on the backgound. It uses agile standard JSON structure for crud operations. You can look DEMO.

Try it

See it in action DEMO

How to use it?

Since library uses angular material on the backgound 1 Install angular materials: npm install --save @angular/material @angular/cdk @angular/animations 2 Import material theme required for table: Paste this styles to global style.scss 3 Install nt-table to to your project

npm i nt-table --save Import the NtTableModule and BrowserAnimationsModule to your app.module.ts:

import {NtTableModule} from 'nt-table';
@NgModule({
  imports: [
    BrowserAnimationsModule, // required for angular material
    NtTableModule
  ],
})
export class AppModule {}

Use the nt-table component

Note: You must provide height and height on parent div so table will inherit it otherwise table will not be seen.

<div style="width: 1100px;height: 650px">
 <ngx-nt-table
 [apiUrl]="http://nodejs-test-api.us-east-2.elasticbeanstalk.com/api/table"
 ></ngx-nt-table>
</div>

Do not like Actions template?

No worries, soon going to enable feature to insert customs actions template.

API

Inputs

 /** Whether or not table should be multi selectable **/
  @Input() apiUrl: string= 'your api url';

  /** Whether to have Print feature **/
  @Input() printable :boolean = true;

  /** Whether to have Column hide/show feature **/
  @Input() columnHideAble :boolean = true;

  /** Whether to exort feature **/
  @Input() exportable :boolean = true;

  /** Whether or not table show have edit functionality **/
  @Input() editable :boolean = true;

 /** Whether or not row pinnable **/
 @Input() rowPinnable :boolean = true;

  /** Whether or not table should be multi selectable **/
  @Input() multiSelect :boolean= true;

Output events

 /** Emitted when clicked on 'Add data' **/
   @Output()  private onRowAdd = new EventEmitter();`
  /** Emitted after row edit success **/
   @Output()  private onRowEdited = new EventEmitter();`
 /** Emitted after row edit success **/
   @Output()  private onRowRemoved = new EventEmitter();`

Methods

Since it is not efficient to enable 'add' funcionality on library, plugin emits (rowAdd) event on 'Add data' click. After you implement 'add' functionality you call manually trigger table to load data from server again.
To do that you give table a reference
 <ngx-nt-table
 #table
 [apiUrl]="http://nodejs-test-api.us-east-2.elasticbeanstalk.com/api/table"
 ></ngx-nt-table>

on Typescript:

@ViewChild('table') table: NtTableComponent;

and tell table to update data:

this.table.updateData()

Compatibility

Angular 6.0+ Angular-materials 6.0+

Want to Contribute ?

Please fork project from github. Pull requests are kindly accepted.