function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Evita DSouzaEvita DSouza 

Fetch row values on click of button in custom HTML data table for LWC (Lightning Web Component)

Hi,
I want to retrieve row data on click of remove button for custom HTML data table in Lightning Web Component(LWC). I am using custom HTML data table in LWC since LWC does not support displaying picklist values. Could someone please help me with the same.
Below is my code with screenshot:
<!--lwcPicklistDemo.html-->

<template>
    <lightning-card >
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
        <thead>
        <tr class="slds-line-height_reset">
            <th scope="col"><div class="slds-truncate">Actions</div></th>
            <th scope="col"><div class="slds-truncate">Id</div></th>
            <th scope="col"><div class="slds-truncate">Name</div></th>
            <th scope="col"><div class="slds-truncate">Type</div></th>
            <th scope="col"><div class="slds-truncate">Industry</div></th>
        </tr>
        </thead>

        <tbody>
        <template for:each={sObjData} for:item="sobKey">
        <tr key={sobKey.Id}>
                <td><div><lightning-button variant="brand" label="Remove" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
                </div></td>
                <td><div>{sobKey.Id}</div></td>
                <td><div>{sobKey.Name}</div></td>
                <td>
                    <div class="slds-select_container">
                    <select class="slds-select"  onchange={onValueSelection1}>
                    <option value="">{sobKey.Type}</option>
                    <!--iterate all picklist values from wrapper list using for:each loop-->
                    <template for:each={TypeValue.data} for:item="picklistItem">
                    <option key={picklistItem.svalue} value={picklistItem.svalue}>
                    {picklistItem.slabel}
                    </option>
                    </template>
                    </select>
                    </div>
                </td>
                <td>
                    <div class="slds-select_container">
                    <select class="slds-select"  onchange={onValueSelection1}>
                    <option value="">{sobKey.Industry}</option>
                    <!--iterate all picklist values from wrapper list using for:each loop-->
                    <template for:each={IndustryValues.data} for:item="picklistItem">
                    <option key={picklistItem.svalue} value={picklistItem.svalue}>
                    {picklistItem.slabel}
                    </option>
                    </template>
                    </select>
                    </div>
                </td>
        </tr>
       </template>
    </tbody>
    </table>
</lightning-card>
</template>
/*lwcPicklistDemo.js*/

import { LightningElement,wire, api, track } from 'lwc';
import fetchsObjectData from '@salesforce/apex/lwcDemoController.fetchsObjectData';
import fetchPickListValue from '@salesforce/apex/lwcDemoController.fetchPickListValue';

export default class LwcPicklistDemo extends LightningElement {
@api objectName = 'Account';
@track sObjData= [];

    @wire(fetchsObjectData, {obName :'$objectName'} )
    wiredResult(result) { 
        if (result.data) {
            this.sObjData = result.data;
        }
    }

    @wire(fetchPickListValue, {objInfo: {'sobjectType' : 'Account'},
    picklistFieldApi: 'Industry'}) IndustryValues;
	@wire(fetchPickListValue, {objInfo: {'sobjectType' : 'Account'},
    picklistFieldApi: 'Type'}) TypeValue;

	onValueSelection1(event){
	// eslint-disable-next-line no-alert
	alert(event.target.value);
	}    
	onValueSelection2(event){
	// eslint-disable-next-line no-alert
	alert(event.target.value);
    }  
    
    handleClick(){
        // eslint-disable-next-line no-alert
        alert('Remove clicked');
    }

}
/*lwcDemoController.apxc*/

public with sharing class lwcDemoController {

    @AuraEnabled(cacheable = true)
    public static List<SObject> fetchsObjectData(String obName){
        return database.query('SELECT ID, Name,Type,Industry FROM '+obName+' LIMIT 5');
    }
    
    
    @AuraEnabled(cacheable = true)
    public static List < FetchValueWrapper > fetchPickListValue(sObject objInfo, string picklistFieldApi) {
        // Describe the SObject using its object type.
        Schema.DescribeSObjectResult objDescribe = objInfo.getSObjectType().getDescribe();
 
        // Get a map of fields for the SObject
        map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap();
 
        // Get the list of picklist values for this field.
        list < Schema.PicklistEntry > values = fieldMap.get(picklistFieldApi).getDescribe().getPickListValues();
 
        // Create a list of wrapper to store picklist value/lable
        list < FetchValueWrapper > objWrapper = new list < FetchValueWrapper > ();
 
        for (Schema.PicklistEntry a: values) {
            FetchValueWrapper oFetchValueWrapper = new FetchValueWrapper();
            oFetchValueWrapper.slabel = a.getLabel();
            oFetchValueWrapper.svalue = a.getValue();
            objWrapper.add(oFetchValueWrapper);
        }
        return objWrapper;
 
    }
 // wrapper class 
    public with sharing class FetchValueWrapper {
        @auraEnabled public string slabel {get;set;}
        @auraEnabled public string svalue {get;set;}
    }
    
}
<!--lwcDemoApp.app-->

<aura:application extends="force:slds">
    <c:lwcPicklistDemo></c:lwcPicklistDemo>
</aura:application>

User-added image



 
Best Answer chosen by Evita DSouza
itzmukeshy7itzmukeshy7
Pass the index to the button with the data attribute and get the same in the JS and use that index to get the item from the list.

HTML change
<!-- Rest of the above code. -->
<template for:each={sObjData} for:item="sobKey" for:index="index">
  <tr key={sobKey.Id}>
    <td>
      <div>
        <lightning-button variant="brand" label="Remove" title="Primary action" onclick={handleClick} class="slds-m-left_x-small" data-index={index}></lightning-button> <!-- Added the data-index attribute here to use in JS. -->
      </div>
    </td>
    <!-- Rest of the below code. -->

JS Change:
handleClick(event){
    const itemIndex = event.currentTarget.dataset.index;
    const rowData = this.sObjData[itemIndex];
    
    // eslint-disable-next-line no-console
    console.log(rowData);
}

I guess this is what you are looking for;

#html5 #data-api #lwc

All Answers

itzmukeshy7itzmukeshy7
What data you want to reterive on Remove button click?
Evita DSouzaEvita DSouza
@itzmukeshy7 I want to retrieve the row data(Id, Name, Type,Industry) displayed on UI. If I click on first remove button, then I should get row data as highlighted below:

User-added image:

Please let me know if you need any additional details.
 
itzmukeshy7itzmukeshy7
Pass the index to the button with the data attribute and get the same in the JS and use that index to get the item from the list.

HTML change
<!-- Rest of the above code. -->
<template for:each={sObjData} for:item="sobKey" for:index="index">
  <tr key={sobKey.Id}>
    <td>
      <div>
        <lightning-button variant="brand" label="Remove" title="Primary action" onclick={handleClick} class="slds-m-left_x-small" data-index={index}></lightning-button> <!-- Added the data-index attribute here to use in JS. -->
      </div>
    </td>
    <!-- Rest of the below code. -->

JS Change:
handleClick(event){
    const itemIndex = event.currentTarget.dataset.index;
    const rowData = this.sObjData[itemIndex];
    
    // eslint-disable-next-line no-console
    console.log(rowData);
}

I guess this is what you are looking for;

#html5 #data-api #lwc
This was selected as the best answer