How to hide Lightning Datatable row action button based on field value

Question

I am using a wrapper class to get the document details of an opportunity and display them using a custom LWC component using a lighting data table. I want to hide/disable the row action button (Share with Client) on the lighting data table when the field (hideDocTransferButton) value is true.

The field value is coming as true based on the certain condition we set in the Apex controller method. As I am setting the disabled property value of action typeAttributes based on the field value.

JS

    const actions = [
        { label: 'Share with Client', name: 'share' },
    ];
    
    const columns = [
        { 
            label: 'Title', 
            fieldName: 'docURL',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Title' },
                target: '_blank'}, 
            initialWidth: 300,
            sortable: "true"
        },
        { label: 'Document Type', fieldName: 'DocType', sortable: "true"},
        { label: 'Date uploaded', fieldName: 'createdDate', type: 'date', sortable: "true" },
        { 
            label: 'Shared with client', 
            fieldName: '', 
            cellAttributes: { iconName: { fieldName: 'TransferStatus' },
            class: 'slds-align_absolute-center' },
            sortable: "true" 
        },
        { label: 'Date shared with client', fieldName: 'TransferedDate', type: 'date', sortable: "true" },
        { label: 'Uploaded by', fieldName: 'createdBy', sortable: "true" },
        {
            type: 'action',
            typeAttributes: { rowActions: actions, disabled: { fieldName: 'hideDocTransferButton' } },
        },
    ];

    export default class DatatableWithRowActions extends LightningElement {
        @track data = [];
        @api recordId;
        columns = columns;
        record = {};
        @track sortBy;
        @track sortDirection;
       
        selectedRows=[];
        selectedData=[];
        cardTitle = 'Files'
        _wiredResult;
        loaded = false;
        
        
        @wire(getDocumentList, {recordId: '$recordId'} )
        wiredCallback(result) {
            this._wiredResult = result;
            if (result.data) {
                this.data = result.data;
                console.log('******this.data*****', JSON.parse(JSON.stringify(this.data)));
                this.loaded = true;
            } 
        }
        
        handleRowSelection(event) {
            let selectedRows = event.target.selectedRows;        
            this.selectedRows = selectedRows;
        }
    
        handleRowAction(event) {
            const actionName = event.detail.action.name;
            const row = event.detail.row;
            switch (actionName) {
                case 'share':
                    this.handleTransAction(row);
                    break;
                default:
            }
        }
    }

HTML

<div class="slds-card__body slds-p-bottom_large" style="margin-top:-8px" >
                    <lightning-datatable
                        key-field="Id"
                        data={data}
                        columns={columns}
                        onrowaction={handleRowAction}
                        hide-checkbox-column="true"
                        sorted-direction={sortDirection}
                        sorted-by={sortBy}
                        onsort={doSorting}
                        >
                    </lightning-datatable>
                </div>

I have tried similar approach provided here Solution1, Solution2, Solution3 and followed the same logic to hide/disable the action. However, the button is not disabled when the field value is true and I am unable to find what is wrong with code. Can someone please help me with this issue? Thank you!

Answer 1

I think it's better if I reply here. I think what you need to do is to something like this.

    columns = [
        // ...
        { type: 'action', typeAttributes: { rowActions: this.getRowActions } },
        // ...    
    ];

    getRowActions(row, doneCallback) {
        const actions = [];
        if (row.buttonDisabled) {
            actions.push({
                label: 'Share with Client', 
                name: 'share',
                disabled: true
            });
        } else {
            actions.push({
                label: 'Share with Client', 
                name: 'share',
                disabled: true
            });
        }

        doneCallback(actions);
    }

Because I think you need to check buttonDisabled value in the actual function. So hopefully this snippet will work for you.