2

I am trying to conditionally disable a button within a LWC Data Table. I have seen similar posts, however none have offered a solution. I am trying to enable or disable the button that displays within one of the columns conditionally depending on the value of a different column. Bellow is my current code which may give you an idea of what I am trying to achieve, but currently returns the error "Cannot read properties of undefined (reading 'data')". Any help would be greatly appreciated. I should note that I am relatively new to LWC so there may be a simple solution I am just looking over.

@api recordId;
@wire(getRecord, { recordId: '$recordId', fields: [BUSINESS_ENTITY_NAME_FIELD, PROJECT_ID_FIELD, PROJECT_CONTACT_ID_FIELD, CONTACT_BUSINESS_ENTITY, FULL_NAME, Contact_ID_FIELD] })ProjectAccount;
@track columns =
    [
        ...
        {
            label: 'Project ID',
            fieldName: 'PID',
            type: 'text'
        },
        ...
        {
            label: 'Tactics',
            type: 'button',
            typeAttributes: {
                label: 'View Tactics',
                disabled: {fieldName: 'PID' == this.projectId.data}
            }
        }
    ];
get projectId()
    {
        return getFieldValue(this.ProjectAccount.data, PROJECT_ID_FIELD);
    }
<lightning-datatable onrowaction={handleRowAction}
    key-field="Id"
    data={accList}
    hide-checkbox-column="true"
    columns={columns}>
</lightning-datatable>
...
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" onclick={closeModal} title="Close">
    <lightning-icon alternative-text="close" icon-name="utility:close" size="small" variant="inverse"></lightning-icon>
    <span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading_medium slds-hyphenate" id="modal-heading-01">Tactics:</h2>
<ul class="slds-m-around_large">
    <template for:each={tList} for:item="tactic">
        <li key={tactic.Id}>
            <h2 class="slds-text-heading_medium slds-hyphenate">{tactic.Tactic_Name__c}</h2>
        </li>
    </template>
</ul>

1 Answer 1

3
disabled: {fieldName: 'PID' == this.projectId.data}

Is incorrect. You need to specify the field:

disabled: { fieldName: 'tacticsDisabled' },

Which you then apply to each row:

this.accList = this.accList.map((acc) => ({ ...acc, tacticsDisabled: 'PID' == this.projectId.data ]));
1
  • The 'PID' should be != to this.projectId.data. Otherwise this was a perfect solution. Thank you very much!
    – JLadage
    Commented Jun 15, 2022 at 15:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .