1

I followed documentation for "Creating Header-Level Actions" (https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation)

The actions fire ok but I am having trouble getting the column header to reflect the new state.

You can see it in action at (https://developer.salesforce.com/docs/component-library/tools/playground/huueFbBVc/edit)

The template is

<template>
    <lightning-card title="Test LDT Header action">
        <lightning-datatable data={data} 
                    hide-checkbox-column=true   
                    columns={columns} 
                    key-field="Id"  
                    onheaderaction={handleHeaderAction}>
            </lightning-datatable>      
        </lightning-card>
</template>

JavaScript

import { LightningElement,track} from 'lwc';

export default class LdtHeaderAction extends LightningElement {

    rawData = [
        { Col1: '1', Col2: 'XXX' },
        { Col1: '2', Col2: 'XXX' },
        { Col1: '3', Col2: 'YYY' },
        { Col1: '4', Col2: 'YYY' },
        { Col1: '5', Col2: 'ZZZ' },
    ];

    @track columns = [
        {
            label: 'Col 1',
            fieldName: 'Col1',
            initialWidth: 100
        },
        {
            label: 'Col 2',
            fieldName: 'Col2',
            actions: [
                { label: 'All', checked: true, name:'all' },
                { label: 'XXX', checked: false, name:'filter_xxx' },
                { label: 'YYY', checked: false, name:'filter_yyy' },
                { label: 'ZZZ', checked: false, name:'filter_zzz' },
            ]
        },
    ];


    @track data = this.rawData;
    @track filter ='all';

    handleHeaderAction(event) {
        const actionName = event.detail.action.name;
        const cols = this.columns;
        const filter = this.filter;

        if (actionName !== filter) {
            this.filter = actionName;
            this.filterCol2();

            //set col action as checked 
            let actions = cols[1].actions;
            actions.forEach((action) => {
                action.checked = action.name === actionName;
            });
            //force header check change
            this.columns = cols;
            // eslint-disable-next-line no-console
            console.log(JSON.stringify(this.columns, null, '\t'));
        }
    }

    filterCol2 () {
        const rows = this.rawData;
        const filter = this.filter;
        let filteredRows = rows;
        if (filter !== 'all') {
            filteredRows = rows.filter(function (row) {
                let test = 'filter_'+row.Col2.toLowerCase() === filter;
                return test;
            });
        }
        this.data = filteredRows;
    }

}

enter image description here

I thought the change to this.columns which is @track should force the update but it is not. Interestingly after I toggle Wrap/clip the state changes as shown below. Is there and event I need to fire or something else I am missing or is this a bug?

enter image description here

0

1 Answer 1

1

As stated here, You can possibly fix this by creating a new object to columns or something like this.

this.columns = JSON.parse(JSON.stringify(cols));

You must log in to answer this question.

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