I have a customjs callback that assigns width to each table column of the data table, but every time the callback is called, the sizes are either reducing or incrementing. It seems like the DataTable is adjusting itself so that the width size of all columns will be equal. If I set the fit_columns to false, all widths are reducing!! Very weird behavior. Do you know what might caused this?
js callback function
def column_sizing_js_callback(self):
js_code = """
var dictWithForConsole = {};
var element;
var elementList = document.querySelectorAll('.slick-header-column');
tableColumns.forEach(function(col){
elementList.forEach(function(element){
var elementId = element.id;
var child = document.getElementById(elementId).childNodes;
var spanInnerText = child[0].innerText;
elementWidth = document.getElementById(elementId).style.width;
if(col.title==spanInnerText){
dictWithForConsole[spanInnerText] = elementWidth;
col.width = parseInt(elementWidth);
}
});
});
console.log(dictWithForConsole);
"""
custom_js = CustomJS(args=dict(tableColumns=tableColumns), code=js_code)
return custom_js
In the console, you will see the values of the column width:
after how many callbacks, the sizes are changing…
