Get the label of edited column in lwc datatable

Question

I have a datatable with 10 columns - ex -

<template> <div style="height: 300px;"> <lightning-datatable key-field="id" data={data} columns={columns}> </lightning-datatable> </div> </template>

import { LightningElement } from 'lwc'; import generateData from './generateData'; const columns = [ { label: 'Label', fieldName: 'name' ,editable=true}, { label: 'Website', fieldName: 'website', type: 'url' , editable=true}, { label: 'Phone', fieldName: 'phone', type: 'phone' ,editable=true}, { label: 'Balance', fieldName: 'amount', type: 'currency' }, { label: 'CloseAt', fieldName: 'closeAt', type: 'date' }, ]; export default class BasicDatatable extends LightningElement { data = []; columns = columns; connectedCallback() { const data = generateData({ amountOfRecords: 100 }); this.data = data; } }

If i edit the phone number or Name or website , I need the label of the column. If i change the phone from 234 to 567 on the datatable UI - In the js i need which field i have edited.

Felix van Hove · Accepted Answer · 2024-01-31 15:08:36Z

In order to make the datatable editable, I suggest the following markup:

<lightning-datatable editable="true" key-field="id" data={data} columns={columns} onsave={handleSave} >

In Javascript, the following finds the label:

handleSave(event) { event.detail.draftValues.forEach(row => { for(const fieldName in row) { if(fieldName !== 'id') { const label = columns.find(col => col.fieldName === fieldName).label; console.log(label); } } }); }

As can be seen, retrieving the fieldName comes first. Retrieving the label requires (to my knowledge) a lookup in the table definition.

Stack Exchange Network

Get the label of edited column in lwc datatable

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Get the label of edited column in lwc datatable

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions