Automatic Fitting to Data after replaceData

Question

I am using Tabulator to create a table.

var table_file_listing = new Tabulator("#dir_listing_holder", {
    height: "311px",
    layout: "fitData",
    placeholder: "No Data Available",
    autoColumns: true,
    resizableRows: false,
    resizableColumns: false,
    columns: [
        {title:"Name", field:"name", headerSort:false},
        {title:"Size", field:"size", headerSort:false},
        {title:"Mode", field:"mode", headerSort:false},
        {title:"Owner", field:"owner", headerSort:false},
        {title:"Group", field:"group", headerSort:false},
    ],
});

I am regularly changing the table content with:

table_file_listing.replaceData(data)

However, I am noticing that the columns do not fit to data automatically when I replace the table with new data. Am I missing something here?

Answer 1

You would need to retrieve the existing filters, replace the data, then set the filters again when the data is loaded into the table

//get existing filters
var filters = table_file_listing.getFilters();

//replace data
table_file_listing.replaceData(data)
then(() => {
    //reset filters
    table_file_listing.setFilter(filters);
});