angular-tablita

>Angular 2+ data table component, with edit/add/remove actions messages, with batch functions.

angular-tablita (Tablita translates into little table in spanish) is an Angular 2+ component packaged for npm so everyone can use it, it binds to a a data-array creates a reactive form and emits messages so you can perform actions like "services actions, others validations" then you can mutate the input and update the data.

Contents

* 1 Demo
* 2 Install & Usage
* 3 Rules
* 4 Build

1 Demo

Go to the live demo, and look how it sends the output messages Demo.

2 Install & Usage

Go to your project root folder and execute:

``$npm install angular-tablita`

Add the module:

`
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
HttpModule,
BrowserAnimationsModule,
]
bootstrap: [AppComponent]
})
export class AppModule { }
`
Set options and describe columns according to the array:

(Example)

`
private options: any = {
debug: true,//Show debug info
blankLabel: 'n/a',//Null label
outer_form: 'both', //Show Simple Add and Batch actions forms (top, bottom, both)
add: {
display:true,
caption: 'both', // show add button on outer form options "top, bottom, both"
show: false
},
editable: {
display: true,
show: true,
delete: true,
batch: false,
},
columns: [ //Describe columns
{
name: 'Name', // :
type: 'string', // Data type : string, number boolean
validators: { // Validator for the reactive form
required: false,
min: 2,
max: 50
}
},
{
calories: 'Calories',
type: 'string',
validators: {
required: false,
min: 2,
pattern: '^(0|[1-9][0-9]\wkcal)$'
}
},
{
carbos: 'Carbos',
type: 'string',
validators: {
required: false
}
},
{
favorites: 'Favorites',
type: 'number',
validators: {
required: false,
min: 0,
max: 20
}
},
{dressing: 'Aderezo', type: 'boolean'}
]
};
`
Define a method to get the tablita's feedback:

`
updateMesage(event:any){
console.log(event);
}
`
Use the component!
`

`

3 Rules

These are to set the form's validators

`validators: {
required: false, //Field is required
min: 2, //Min lenght
max: 50, //Max lenght
pattern: '^(0|[1-9][0-9]\wkcal)$' //Any Regex pattern validation
}
`


5 Build

clone this repo then npm install

Build into /dist folder:

npm run build

Get package:

npm run pack-lib`

License

MIT3