1

Below is my component, when i click view case it shows all cases associated with the account, and should change the label to hide case. And when clicked on hide case it should hide the cases shown below. i'm not able to do this in LWC Datatable which includes button, How to achieve this as i'm beginner to LWC.

This is my component

enter image description here

JS File

import { LightningElement, api, track } from 'lwc';

const actions = [
    { label: 'View Case', name: 'view' },
    { label: 'Hide Case', name: 'hide' },
];

const column = [
    {
        label: 'Account name',
        fieldName: 'Name',
        type: 'text',
        sortable: true
    },
    {
        label: 'Active',
        fieldName: 'Active__c',
        type: 'text',
        sortable: true
    },
    {
        type: "button", 
        typeAttributes: {  
            label: actions.label,  
            name: 'View',  
            title: 'View Case',  
            variant: 'brand',
            disabled: false,  
            value: 'view',  
            iconPosition: 'left',
            rowAction: actions,
    }}
   ];

export default class ChildAccountActiveOrInactive extends LightningElement {
    @track columns = column;

    @api childActiveAccount;
    @api childInactiveAccount;

    handlesClick(event){
        const row = event.detail.row;
        console.log('ROW :',JSON.stringify(row));
        // Creates the event with the data.
        const selectedEvent = new CustomEvent("viewcaseclicked", {
            detail: {recordID:row.Id}
        });
        // Dispatches the event.
        this.dispatchEvent(selectedEvent); 
     }  
}

HTML file

<template>
   <template if:true={childActiveAccount}>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={childActiveAccount}
                columns={columns}
                onrowaction={handlesClick}
                hide-checkbox-column="true"  
                show-row-number-column="true">
        </lightning-datatable>
    </div>
1
  • I think you can achieve this by creating a custom data type to render the button and then you can change its label when it is clicked on.
    – McCubo
    Commented Jul 26, 2022 at 7:57

0

You must log in to answer this question.