Forcetrails: How to add/delete row dynamically in lwc datatable


The dynamic, extensible, flexible lightning-data-table in LWC has many capabilities that help you speed up your
development process. Today I am going to share with you, how to add/delete rows to/from lightning-data-table of
Lightning Web Component Framework.
Below are the topics covered in this article.
  • How to add a row in Lightning Datatable.
  • How to delete a row from Lightning Datatable.
  • How to open an edit form on button click of row.
  • How to add Lightning Button Icon in Lightning Datatable.
I have built a reusable and extensible component by extending the functionality of Lightning Datatable in
LWC Framework. Here are the steps to use the same

1. Download the code from the public git repository
2. Create a new web component with the name addDelDatatable.
3. Copy and paste the code from addDelDatatable to your component's respective files
 - addDelDatatable.js, addDelDatatable.html, addDelDatatable.css.
4. Use the below example code to implement the table. Replace the Example with your desired
component name.
import { LightningElement, track } from 'lwc';

export default class Example extends LightningElement {
    cols = [
        { label: 'Name', fieldName: 'name', required: true },
        { label: 'Phone', fieldName: 'phone', type: 'phone' },
    ];

    @track data = [
        { uid: 1, name: 'Rahul', phone: '1234567890' },
        { uid: 2, name: 'Arnav', phone: '1112223334' }
    ];

    handleGetData() {
        let datafromchild = this.template.querySelector('c-add-del-datatable').data;
        console.log(`Got ${datafromchild.length} record/s from the Child Component!`);
        console.log('data from child =>' + JSON.stringify(datafromchild));
    }
}

Use the below component HTML markup.

<template>
    <lightning-button variant="brand" label="Get Data in Parent" title="Get Data in Parent" onclick={handleGetData} class="slds-m-left_x-small"></lightning-button>
    <c-add-del-datatable columns={cols} data={data}></c-add-del-datatable>
</template>

17 comments:
  1. Hi Rahul,

    Many thanks for sharing this Idea.

    Is is possible to add the Lookup and dependent picklist into this Table?

    Thanks!

    ReplyDelete
    Replies
    1. Yes, it is possible, you will have to fetch all the dependencies using apex, then you will have to change the options of the dependent picklist dynamically, whenever the controlling picklist values changes. I will have to work to make it support for dependent picklist values(But not sure when I will get time for that). Meanwhile if you can please feel free to clone and contribute to the repository.

      Thanks!!

      Delete
  2. Hi rahul,
    I am getting error [Line: 33, Col: 9] LWC1503: Invalid public property "data". Properties starting with "data" are reserved properties.while saving addDeleteDatatable.js

    ReplyDelete
    Replies
    1. Hello, Just change the getter and setter names to tableData on line 34 and 38. Also you need to change the attribute in the above code



      to

      Delete
    2. Hello, Just change the getter and setter names to tableData on line 34 and 38. Also you need to change the attribute in the above code

      <c-add-del-datatable columns={cols} data={data}></c-add-del-datatable>

      to

      <c-add-del-datatable columns={cols} table-data={data}></c-add-del-datatable>

      Basically change all the public properties named data to something else.

      Delete
  3. can we show picklist field through javascript array in Edit dialogue box?

    ReplyDelete
    Replies
    1. you need to habdle that condition based on the type and use combobox instead of input

      Delete
    2. Do you have any code,because i have doubt adding options of picklist from array?

      Delete
    3. Honestly I don't have that right now but I am going to update this repository in the coming weekend as multiple people have requested the same.

      Delete
  4. atleast can you give me idea how can I access options
    { label: 'Type of Benifits', fieldName: 'benifit', required: true,isPickList:true ,typeAttributes: {
    placeholder: 'Choose rating', options: [
    { label: 'Hot', value: 'Hot' },
    { label: 'Warm', value: 'Warm' },
    { label: 'Cold', value: 'Cold' },
    ]}},

    ho cai use this in combobox


    ReplyDelete

Hi there, comments on this site are moderated, spams and promotions will be deleted. If you have any concern, or if you are not able to comment for some reason, reach email us at rahul@forcetrails.com