0

I have a datatable column with custom actions defined like this:

statusActions = [
    {
        label: 'Show Unconfirmed Leads',
        name: 'unconfirmed_leads',
    }, {
        label: 'Show All My Leads',
        name: 'all_my_leads',
        checked: true,
    }
];

The column's menu displays correct with the second item checked. Selecting the first item correctly filters the records (using an @wireded Apex query). But the check doesn't correctly get taken off the second item and placed on the first. Here's the code that is called by the action:

handleHeaderAction(event) {
    const name = event.detail.action.name;
    if (name !== this.filter) {
        this.filter = name;
        const actions = this.columns[1].actions;
        for (const action of actions) {
            action.checked = (action.name === name);
        }
        console.log(this.columns[1].actions);
    }
}

That last line confirms that the action's are getting updated. Here's the output of the console when the first item is selected:

[{label: "Show Unconfirmed Leads", name: "unconfirmed_leads", checked: true}, {label: "Show All My Leads", name: "all_my_leads", checked: false}]

The handleHeaderAction method is modeled on the example from the datatable documentation.

1 Answer 1

1

If you don't copy back to the variable, and you don't use @track, changes in an object won't be seen. You need to change the columns definition:

@track columns = .......;

Or, in your handler:

// Shallow copy triggers render cycle
this.columns = [...this.columns];

Also, you can change your code to just:

const name = event.detail.action.name;
if (name !== this.filter) {
  this.filter = name;
  this.columns[1].actions = this.columns[1].actions.map(action => ({ ...action, checked: action.name === name }));
}
2
  • Your second solution did the track. I tried importing track and using the decorator as that seems cleaner to me, but that didn't fix the problem.
    – Chuck
    Mar 9, 2021 at 22:45
  • @Chuck Yeah, track is kind of limited in depth, but forcing a copy at the top-level is guaranteed to work.
    – sfdcfox
    Mar 9, 2021 at 22:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .