javascript - Tabulator: Fix position of right most column when adjusting table column width

Question

How do i fix the position of the right most column?

When trying to increase or decrease the size of a column, the right most column moves along with the adjustment, creating a gap or a horizontal scroll bar in the process. Is there a way to adjust all the columns dynamically to allow the position of the right most column to stay fixed?

Here are a few examples from the docs

Gap from decreasing 3rd column width:

Scroll bar from increasing 3rd column width:

question from:https://stackoverflow.com/questions/65625755/tabulator-fix-position-of-right-most-column-when-adjusting-table-column-width

Answer 1

Layout Mode

If you want columns to resize then you should look at using the fitColumns layout mode. in the table constructor you should set this on the layout option:

var table = new Tabulator("#example-table", {
    layout:"fitColumns",
});

This can be seen on the Fit To Width Example

Tabulator provides many options for configuring this layout mode to choose how to resize each column. More info on this can be found in the Layout Documentation

Frozen Columns

If you would alternatively like the column to remain where it is, even when the table is scrolled horizontally then you can use the frozen property on the column definition for the dob column to freeze it in place:

{title:"Date of Birth", field:"dob", frozen:true}}

More details on this can be found in the Frozen Columns DOcumentation