1.1.2 • Published 5 years ago
rubber-table v1.1.2
Rubber Table
The sources for this package are in the main HD Table repo. Please file issues and pull requests against that repo. HD Rubber Table version 1.0.3.
Installation
The library is available as npm package, so all you need to do is to run the following command:
npm install rubber-table
This command will create a record in your package.json
file and install the package into the npm modules folder.
Setup Example
First thing you need to do is to import the rubber-table directives into your component.
import {RubberTable} from 'rubber-table';
Then register it by adding to the list of directives of your module:
// ...
@NgModule({
imports: [
// ...
RubberTable,
// ...
],
declarations: [ ... ]
})
// ...
Usage
here are the steps: :D
- Import RubberTable in the desired component
import {RubberTableComponent} from 'rubber-table';
- Import AfterViewInit and ViewChild from '@angular/core'
import { AfterViewInit ,ViewChild} from '@angular/core';
- implement AfterViewInit
export class AppComponent implements AfterViewInit {
- define RubberTable in component
@ViewChild(RubberTable , {static: false , read:false} ) HDTable;
- adding table headers
ngAfterViewInit(){
this.HDTable.addHeaders( [ //#D headers
"Final Product",
"Product Capacity",
"Product CapacityUnit",
"Product Code"
]);
}
- adding table skeleton in ngAfterViewInit()
ngAfterViewInit(){
// the first pram is the column name (used as json prop key ) by defult tag will be input & type will be text
this.HDTable.addColumn("FinalProduct" );
// specify the column tag and input type
this.HDTable.addColumn("ProductCode", this.HDTable.tags.input, this.HDTable.inputTypes.text);
this.HDTable.addColumn("ProductCapacity ", this.HDTable.tags.input, this.HDTable.inputTypes.number );
// in select tag we have to pass the lookups values for the in the column definition in the 4th column and key & value in 5th & 6th
this.HDTable.addColumn("ProductCapacityUnit" , this.HDTable.tags.select , "" , [{key: "ton" ,value: "10" } , {key: "Kig" , value:20 }] , "key" , "value" );
// for the primary key (Ids) column: add the hidden type in case if u want to hide the column
this.HDTable.addColumn("Id" , this.HDTable.tags.input ,this.HDTable.inputTypes.hidden);
}
- finaly the template
// in the template add the event emitters (createdElement) , (updatedElement) & (deletedElement)
<hd-rubber-table
(deletedElement)="onDelete($event)"
(createdElement)="onCreate($event)"
(updatedElement)="onUpdate($event)"> </hd-rubber-table>
- last piece in the component
// from the event emitters (createdElement) , (updatedElement) & (deletedElement) you will reseive the change object or the added object
// example:
onCreate($event) {
$event["Status"] = "CREATE"; // add flage to distinguish the action
this.productsResult.push($event)
}
onDelete($event) {
$event["Status"] = "DELETE";
this.productsResult.push($event)
}
onUpdate($event) {
$event["Status"] = "UPDATE";
this.productsResult.push($event)
}
Features
Supported Tags
- input
- select
Supported input types
- text
- number
- password
- date
- month
- range
- search
- tel
- time
- url
- week
- hidden
CSS classes placeholders
you can change any element styles using the already defined classes in the html template classes:
- hd-table-div-container
- hd-table
- hd-table-header
- hd-table-header-tr
- hd-table-header-th
- hd-table-tbody
- hd-table-tbody-row
- hd-table-tbody-td
- hd-table-select
- hd-table-select-option
- hd-table-input
- hd-table-btn-edit
- hd-table-btn-delete
- hd-table-btn-add
- hd-table-btn-save