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>