angular-tablita

Angular

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-tablita
300.1.267 years ago7 years agoMinified + gzip package size for angular-tablita in KB

Readme

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

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', // <property_name>: <Name to display on table>
      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]*\w*kcal)$'
      }
    },
    {
      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!
<tablita [tableData]="dataArray" [options]="options" (tableUpdate)="updateMesage($event)" </tablita>

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]*\w*kcal)$' //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