Introduction

The code library allows implementing inline feature of table. If you application requires add ,edit,delete row functionality, this library is helpful.

Installing Library

Issue following to install this library

$ npm i apaar-datatable

Adding to template

Add following snippet in your template.

<apaar-datatable-lib 
    (onsave)="receivedData($event)" 
    (ondelete)="receivedDeletedrow($event)" 
    [datasource]="Data">
</apaar-datatable-lib>

Here Data in [datasource]="Data" is you source of data from server that would list messages below textarea of chat component. The format for the same is:

[
	 {
        "key": "name",
        "type": "text",
        "label": "Full Name",
        "refer": null,
        "required": true,    
    },
    {
        "key": "gender",
        "label":"Gender",
        "refer": ["Male","Female","Others"],
        "type": "select",
        "required": true,
    },
	{
        "key": "dob",
        "label": "Date",
        "refer": null,
        "type": "date",
        "required": true,
    }
 ]

Here

• key: unique reference name in a collection.
• label: text for column header inside table
• type: it represent the column type whether it is text,date or select
• refer: if represents array of data, if type is select the we required to bind data to formcontrol
• required: it is for validation.

Adding new record

When we click Add Row Button which is on top right side of table ,it will add blank row in editmode we need to fill the data and then triggered save icon.

In template syntax, we have onsave, which is event that gets triggered when save icon inside particular row is invoked. You have to implement, event handler receivedData($event) in your component, like below: <div>

receivedData($event){
	//handle new  data received
	//you may send to your server API and store it.
}

Editing new record

When we click edit icon which is inside table ,it will turn in editmode we need to change the data and then triggered save icon.

In template syntax, we have onsave, which is event that gets triggered when save icon inside particular row is invoked. You have to implement, event handler receivedData($event) in your component, like below: <div>

receivedData($event){
	//handle new  data received
	//you may send to your server API and store it.
}

Delete new record

When we click delete icon which is inside table ,it will delete particular row.

In template syntax, we have ondelete, which is event that gets triggered when delete icon inside particular row is invoked. You have to implement, event handler receivedDeletedrow($event) in your component, like below: <div>

We also have an option to select multiple rows and delete it directly .delete button is on top right side of table. we can also add confirmation dialog before delete action is performed inside component

receivedDeletedrow($event){
	//handle deleted  data received
	//you may send to your server API and store it.
}

Once this function gets executed, you call all rows from server API and display them back to user. For this you need to override Data property we discussed before.

I hope this small documentation would help you implementing the same.

Thank you,