0

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

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));
| improve this answer | |

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.