Simple LWC application to demonstrate the add, delete row to/from a lightning-data-table. Modal form to add a row in data-table. Open 'Edit' modal in Lightning Datatable, Delete Row Datatable, Add Row Datatable.
- Create a new web component with the name addDelDatatable.
- Copy and paste the code from addDelDatatable to your component's respective files addDelDatatable.js, addDelDatatable.html, addDelDatatable.css.
- Use the below example code to implement the table. Replace the
Exampleclass name in JS with your desired parent component class 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' }
];
}
<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>
Use below method to get updated table data from the addDelDatatable component into its parent.
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));
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent