0

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>
4

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);
}
6
  • How we can read the particular column value for each Row. let rtValues = Object.values(row); console.log('row --->' + row + ' ' + rtValues); This is printing the plain text. Based on the column value we need to show action button else action button should not come. – user3214361 Apr 1 '20 at 14:57
  • @user3214361 It's a normal object, so you should just be able to: if(row.Enroll_Status__c=='Open') { ... – sfdcfox Apr 1 '20 at 14:59
  • It's Worked Thanks. Is there any way we can hide that action button in else condition? – user3214361 Apr 1 '20 at 17:02
  • @user3214361 You simply don't put it in the list of actions, it'll be hidden. You could also provide a disabled attribute instead. – sfdcfox Apr 1 '20 at 17:39
  • Yes in my else part I din't put any actions. But my doubts is can we hide the action menu if the row.Enroll_Status__c not equal to 'Open' (hide the action menu and show empty cell for that row). – user3214361 Apr 1 '20 at 18:00

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.