Tabulator: column layouts fit to data/ fit to data & fill revert after ajax refresh

[lrowleyUB]

Hi Oli,

The columns in the two layouts mentioned fit the data properly on initialization. However, each column becomes "fixed" regardless of data after call to setData method with ajax refresh. Example of call:

~~~
var tabulatorOptions = {
height: $(window).height() - 100,
layout: "fitDataFill",
ajaxConfig: { type: "POST", contentType: "application/json; charset=utf-8" },
tooltips: true,
headerTooltip: true,
showLoader: true,
ajaxResponse: function (url, params, response) {
var gridResponse = response.d;

            var cols = $.parseJSON(JSON.stringify(gridResponse.columns, replacer));
            var gridData = $.parseJSON(JSON.stringify(gridResponse.gridData, replacer));


            $('#tblLoginActivity').tabulator("setColumns", cols);

            return gridData;
        }

    }

oTbl = $('#tblLoginActivity').tabulator(tabulatorOptions);

function getLoginsActivity() {
oTbl.tabulator("clearData");
var param = getReportDataParam();

    if ($view.val() == '1') {
        oTbl.tabulator("setData", "/GetLoginsActivityByCompany", "{'param':" + JSON.stringify(param) + "}", "POST");
    }

    if ($view.val() == '2') {
        oTbl.tabulator("setData", "/GetLoginsActivityByUser", "{'param':" + JSON.stringify(param) + "}", "POST");
    }

    if ($view.val() == '3') {
        oTbl.tabulator("setData", "/GetSiteAreaActivitySummary", "{'param':" + JSON.stringify(param) + "}", "POST");
    }
}

~~~

[olifolkerd]

Hey @lrowleyUB,

That is correct, as there are a number of situations (an auto refreshing table for example) where you would not want the columns to resize on a change in data.

That being said i think you raise a valid point and will look to add a parameter in the next release that lets you choose whether it should change or not.

in the mean time the redraw function with the true parameter should force a full refresh:

$("#example-table").tabulator("redraw", true);

Cheers

Oli

[lrowleyUB]

Hi Oli,

A parameter would work nicely! I tried the redraw with true parameter and still no joy.

Thanks again,
Laura

[bbrand84]

I seem to have an similar issue when navigating between multiple SPA pages with tabulator tables on each of them. I use layout: "fitColumns" on all of them, but the column widths are messed up after jumping between pages. A page refresh (F5) solves the problem. Is there anything cached somewhere which should be cleared before navigation to another page / other tabulator table?

[olifolkerd]

Hey @bbrand84

That is a different problem you are having there. a Tabulator element must be visible when its data is set, otherwise the DOM elements do not have dimensions so it cannot lay them out properly.

To get round your issue you need to call the redraw function when the table is made visible:

$("example-table").tabulator("redraw", true);

i hope that helps.

Cheers

Oli

[olifolkerd]

Hey All,

You will be happy to hear that I have just pushed some new functionality to the 3.4 branch (which will be released tomorrow) to address this issue.

The new layoutColumnsOnNewData option will allow you to tell Tabulator to update the column widths when the setData function is called:

$("#example-table").tabulator({
    layoutColumnsOnNewData:true,
});

Cheers

Oli :)

[olifolkerd]

Tabulator version 3.4 has now been officially released!

You can find details of the new release in the News Section

Full documentation of all the new features can be found Here

Cheers

Oli :)