0

Is there a way to capture the width of columns(header) in data table when user changes the width? I am trying to persist the changes which user makes to the columns(width) after the table is loaded. Thanks.

3

You can use resize event on datatable. You will get the parameter columnWidths in event.

When width is changed, you can store the new widths in localStorage. You should stringify for storing because storage can store only strings. While loading again you can parse the array of widths and set.

Below is the sample:

<lightning:datatable keyField="id"
                     data="{! v.data }"
                     columns="{! v.columns }"
                     hideCheckboxColumn="true"
                     onresize="{! c.handleResize }"/>

controller js:

handleResize : function(component, event, helper){
    localStorage.setItem('datatableColumnWidths', JSON.stringify(event.getParam('columnWidths')));
},
init : function(component, event, helper){
    let columns = [
        {label: 'Name', fieldName: 'Name', type: 'text'},
        {label: 'Title', fieldName: 'Title', type: 'text'},
        {label: 'Phone', fieldName: 'Phone', type: 'phone'},
        {label: 'Email', fieldName: 'Email', type: 'email'},
        {label: 'CreatedDate', fieldName: 'Created Date', type: 'date'}
    ];

    if(localStorage.getItem('datatableColumnWidths')) {
        if(Array.isArray(JSON.parse(localStorage.getItem('datatableColumnWidths')))) {
            let columnWidths = JSON.parse(localStorage.getItem('datatableColumnWidths'));
            columns = columns.map(function(col, ind) {
                col.initialWidth = columnWidths[ind];
                return col;
            });
        } else {
            localStorage.removeItem('datatableColumnWidths');
            alert('widths not stored properly. Pls contact admin'); // show toast
        }
    }

    component.set("v.columns", columns);

    var action = component.get("c.getContactList");
    action.setCallback(this, function(response){
        console.log('response.getReturnValue() ',response.getReturnValue());
        component.set("v.data",response.getReturnValue());
    });
    $A.enqueueAction(action);
}

NOTE:

Notice the check if stored widths are array or not. If its not array clear that item in storage and ask user to contact admin as the implementation is not correct.

  • 1
    Never knew about localStorage, thanks – Brian Miller Aug 25 at 9:21
  • 1
    @alesforce-sas thanks .. your the best !!! – IS_EV Aug 25 at 18:46

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.