How to add/delete row dynamically in lwc datatable

Telegram logo Join our Telegram Channel

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>

22 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
  5. Replies
    1. thanks Rahul. It was a great help . I have a requirement that i should not get the pop up for edit or add row . I want to edit inline or add row and enter the values on the row itself by avoiding this intermediate popup. Please help

      Delete
    2. Hello VK, for that you can use the standard edit functionality of the lightning datatable by mentioning the "editable: true" attribute in the column definition. this will give you an option to edit the value inline.

      Delete
    3. but also i need add row and delete icon

      Delete
    4. the same ADD ROW at the top and delete icon at each level I need with the inline edit of datatable. Please can you share the code

      Delete
    5. HI VK, use the same code mentioned above, you take only the code that you need from github repo linked in above post.

      Delete

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com