Enable or Disable button in Data-table based on certain criteria using LWC #inSalesforce

Enable or Disable button in Data-table based on certain criteria using LWC #inSalesforce

In this, if the Account is inactive then the button will be enabled else disabled.

Account Controller or the class:

public with sharing class AccountController {
    @AuraEnabled(cacheable = true)
    public static List<Account> fetchAccounts( String searchKey ) {
        String theKey = '%' + searchKey + '%';
        return [SELECT Id, Name,AccountNumber,Industry, Rating, Active__c FROM Account WHERE Name LIKE: theKey];
    }
}

accountList of LWC:

.js:

import { LightningElement } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
import { NavigationMixin } from 'lightning/navigation';
 
const columns = [   
    { label: 'Id', fieldName: 'Id' },
    { label: 'Name', fieldName: 'Name' },
    { label: 'Industry', fieldName: 'Industry' },
    { label: 'Rating', fieldName: 'Rating' },
    { label: 'Active', fieldName: 'Active__c' },
    {   
        type: "button", typeAttributes: {
        label: 'View',
        name: 'view',
        title: 'View',
disabled: { fieldName: 'Active__c'},
        value: 'view',
        iconPosition: 'left'
    }
 },
    {   
        type: "button", typeAttributes: {
        label: 'Edit',
        name: 'edit',
        title: 'Edit',
disabled: { fieldName: 'Active__c'},
        value: 'edit',
        iconPosition: 'left'
    }
 }
];
export default class DataTable extends NavigationMixin( LightningElement ) {
    accounts;
    error;
    columns = columns;
    handleKeyChange( event ) {
        const searchKey = event.target.value;
        if ( searchKey ) {
            fetchAccounts( { searchKey } )   
            .then(result => {
                this.accounts = result;
            })
            .catch(error => {
                this.error = error;
            });
        } else
        this.accounts = undefined;
    }
    handleRowAction( event ) {
        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch ( actionName ) {
            case 'view':
                this[ NavigationMixin.Navigate ]( {
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        actionName: 'view'
                    }
                } );
                break;
            case 'edit':
                this[ NavigationMixin.Navigate ]( {
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        objectApiName: 'Account',
                        actionName: 'edit'
                    }
                });
                break;
            default:
        }
    }
}

.html

<template>      
    <lightning-card title = "Quickly Search Account" icon-name = "custom:custom63">  
        <div class = "slds-m-around_medium">  
            <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search the Account here..." >
            </lightning-input>  
            <template if:true = {accounts}>
                <div style="height: 300px;">  
                    <lightning-datatable
                        key-field="Id"
                        data={accounts}
                        columns={columns}
                        hide-checkbox-column="true"
                        show-row-number-column="true"
                        onrowaction={handleRowAction}>
                    </lightning-datatable>  
                </div>   
            </template>      
            <template if:true = {error}>  
                {error}>                  
            </template>  
        </div>  
    </lightning-card>
</template>

.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>    
</LightningComponentBundle>

Reference: https://thesalesforcetutorial.blogspot.com/2022/12/search-records-in-datatable-with-view.html