Hide button inside Lightning Datatable based on row value

Question

I have an LWC datatable. I am using a Apex class to get Custom data and display them using datatable.

I have delete Button for each row. I want to hide the delete button for particular Rows.

(If the Status ="Open" then we need to show the delete button)

Is there any way to achieve this?

Js:

@track studentProgram = [
{ label: "Program Name", fieldName: "Program_Name__c", initialWidth: 350 },
{ label: "Start Date", fieldName: "Program_Start_Date__c" },
{ label: "End Date", fieldName: "Program_End_Date__c" },
{
  label: "Price",
  fieldName: "Program_Price__c",
  type: "currency",
  initialWidth: 100,
  typeAttributes: { currencyCode: "USD" }
},
{label:"Status", fieldName:"Enroll_Status__c"},
{
  label: "",
  type: "button-icon",
  initialWidth: 30,
  typeAttributes: {
    iconName: "utility:delete",
    name: "delete_student_program",
    title: "Delete Student program",
    variant: "brand"
  }
}
];

HTML:

 <lightning-datatable key-field="Id" data={programData}
                                                 hide-checkbox-column="true"
                                                columns={programColumns} draft-values={draftValues}
                                                resize-column-disabled="true" onrowaction={handleAddProgram}>
                                       </lightning-datatable>

Answer 1

You shouldn't be putting a plain button in a list for that purpose. Use an action menu, and specify the actions dynamically using getRowActions, as demonstrated in the docs.

    this.columns = [
        // 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'
            });
        }
        doneCallback(actions);
}