# nt-table
> Agile table component for Angular
Latest version **1.0.0-rc.21** (published 2018-12-07) · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install nt-table
pnpm add nt-table
yarn add nt-table
bun add nt-table
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 1.0.0-rc.21 |
| Published | 2018-12-07 |
| First published | 2018-08-26 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | vugar |
## Links
- npm: https://www.npmjs.com/package/nt-table
- Repository: https://github.com/vugar005/nt-agile-components
- Homepage: https://github.com/vugar005/nt-agile-components#readme
- Issues: https://github.com/vugar005/nt-agile-components/issues
- npm.io page: https://npm.io/package/nt-table
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
## Recent versions
- 1.0.0-rc.21 (latest) — 2018-12-07
- 1.0.0-rc.20 — 2018-11-30
- 1.0.0-rc.19 — 2018-11-30
- 1.0.0-rc.18 — 2018-11-28
- 1.0.0-rc.17 — 2018-11-13
- 1.0.0-rc.16 — 2018-11-12
- 1.0.0-rc.15 — 2018-11-08
- 1.0.0-rc.14 — 2018-11-07
- 1.0.0-rc.13 — 2018-11-06
- 1.0.0-rc.12 — 2018-11-05
- 1.0.0-rc.11 — 2018-11-01
- 1.0.0-rc.10 — 2018-10-29
- 1.0.0-rc.9 — 2018-10-29
- 1.0.0-rc.8 — 2018-10-16
- 1.0.0-rc.7 — 2018-09-28
- … 28 more at https://npm.io/package/nt-table/versions
## README
# 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](https://stackblitz.com/edit/angular-mdpudp).
## Try it
See it in action [DEMO](https://vugar005.github.io/)
## 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](https://github.com/vugar005/nt-agile-components/blob/master/src/assets/themes/ag-theme.scss) 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`:
```typescript
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.
```html
```
### Do not like Actions template?
No worries, soon going to enable feature to insert customs actions template.
## API
### Inputs
```typescript
/** 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
```typescript
/** 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
```html
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
```
on Typescript:
```typescript
@ViewChild('table') table: NtTableComponent;
```
and tell table to update data:
```typescript
this.table.updateData()
```
## Compatibility
Angular 6.0+
Angular-materials 6.0+
## Want to Contribute ?
Please fork project from github. Pull requests are kindly accepted.
---
_Source: https://npm.io/package/nt-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._