Skip to main content
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>

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

 
3 respuestas
  1. 6 feb 2020, 14:47
    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
0/9000