Reinitialize tabulator on same DOM element with new data and different column configuration

Question

I am working with tabulator (jQuery plugin). I want to re-initialized the tabulator on same div element with different column config and data dynamically. Below is the sample div and script that I am using. I feel that, tabulator not allow to change the column configuration once its render.

$("#sample_div").tabulator(tabulator_display_config);

//initialize and apply tabulator
$("#sample_div").tabulator("setData", table_data.Data);

//load data into the table

Answer 1

You can try to redraw the tabulator after the new initialization

$("#sample_div").tabulator("setData", table_data.Data);
$("#sample_div").tabulator("redraw", true);

Answer 2

I use the destroy function and reinitialize tabulator. It works for me.

$("#sample_div").tabulator("destroy");
$("#sample_div").tabulator(tabulator_display_config);
$("#sample_div").tabulator("setData", table_data.Data);

Answer 3

If you just want to change your column configuration and keep your sorting you could get your current sorting using the getSorters function before updating the columns and data and then resorting:

var sort = $("#sample_div").tabulator("getSorters");

$("#sample_div").tabulator(tabulator_display_config);
$("#sample_div").tabulator("setData", table_data.Data);
$("#sample_div").tabulator("setSort ", sort);