3

I have two buttons called Add and Remove in my datatable columns, i have a checkbox field called isActive on my Account object. If isActive=true, on load of my component Add button should disable and Remove button should enable, if isActive=false, my Add button should enable and Remove button should disable.

How to achieve this using Standard Datatable in LWC

Here is the sample code.

const columns = [ 
    { label: 'Name', fieldName: 'Name', type:'text', initialWidth:180},
    { label: 'Account Number', fieldName: 'AccountNumber', type: 'text',wrapText: true, initialWidth:475},
    {type: 'button', initialWidth:140, typeAttributes: {
        label: 'Add',  
        name: 'add',  
        title: 'Add',
        value: 'Add',  
        iconPosition: 'right',
        variant: 'brand',
        alternativeText: 'Add',
        disabled:{fieldName: 'isActive'},
        
    }},
    {type: 'button', initialWidth:155, typeAttributes: {
        label: 'Remove', 
        name: 'Remove',  
        title: 'Remove',    
        value: 'Remove',  
        iconPosition: 'left',
        variant: 'destructive',
        alternativeText: 'Remove',
        disabled:{fieldName: 'isActive'},//How to use NOT (!) operator here using same checkbox field??
    }},
];
3

You would need to patch in a field "isNotActive" in your data so you can use the opposing value. There's no way to do otherwise with buttons.

If you use the action column instead, you can conditionally determine what to display. This is actually in the documentation:

// Other column data here
{ type: 'action', typeAttributes: { rowActions: this.getRowActions } },

...

getRowActions(row, doneCallback) {
    const actions = [];
        if (row['isActive']) {
            actions.push({
                'label': 'Deactivate',
                'iconName': 'utility:block_visitor',
                'name': 'deactivate'
            });
        } else {
            actions.push({
                'label': 'Activate',
                'iconName': 'utility:adduser',
                'name': 'activate'
            });
        }
        // simulate a trip to the server
        setTimeout(() => {
            doneCallback(actions);
        }), 200);
}
  

You can do the callback immediately instead of simulating a callout, or simply return the value to show. This is the preferred way of doing this in Lightning.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.