Tabulator - Having Column Header Resize when Font Size Changes

Question

I am using Tabulator and the default "fitData" function to size the cells. This works exactly as intended when I a) Have a default font size set and b) change the row font size using the rowFormatter:

        rowFormatter:function(row){
        var rowData = row.getData();
        row.getElement().style.fontSize = config.body_font_size + "px";

The above works, however, when I want to change the font size of the column titles:

var curHeaders = document.getElementsByClassName("tabulator-col");
for (var i = 0; i < curHeaders.length; i++) {
    curHeaders[i].style.fontSize = fontSize.toString() + "px";
}

This changes all the column font sizes, but does not resize the column width appropriately. Is there a different class where I should assigning the font? Is there a way to apply this in a similar way to the rowFormatter?

Oli Folkerd Oli Folkerd · Accepted Answer · 2018-10-24T17:50:21

You shouldn't try and programatically alter elements inside Tabulator from outside the table. Because Tabulator uses a virtual DOM these changes can be overwritten at any point without notice.

If you need to format column header titles you should use a titleFormatter in the column definition for the column you want to change:

//define custom formatter
var customFormatter = function(cell, formatterParams, onRendered){

    //set font size
    cell.getElement().style.fontSize = fontSize.toString() + "px";

    return cell.getValue();
}

//in the column definition for a column
{title:"Name", field:"name", titleFormatter:customFormatter },

Full documentation on how to use formatters can be found here: http://tabulator.info/docs/4.0/format

If you need to keep using your approach then you can call the table redraw function to force the table to be rebuilt:

table.redraw(true);

Is there a reason you need to change it at run time rather than just making the changes in CSS?

Tabulator - Having Column Header Resize when Font Size Changes

1 Answers