Setting maximum column width with Tabulator

Question

I have a tabulator grid with fitDataFill layout. Is it possible to set a maximum width for some columns?

The [width] property seems to set a fixed width (even if the automatic layout would assign a smaller width based on the actual data) and [minWidth] specifies the minimum width (also for interactive column resizing).

Kanter

Answer 1

You can use CSS to set this if you want to stop a user resizing the column beyond a certain width. Tabulator adds a tabulator-field attribute to all cells and column elements, so if you wanted to limit the width of a column with a field name of "gender" you would need to use the following CSS:

.tabulator [tabulator-field="gender"]{
        max-width:200px;
}

Leith

Thanks! But I was actually looking for the opposite: specify a maximum width to be used by the automatic layout (when the content is too wide), but let the users increase the width interactively if they wish. – Kanter

i see, width property is your best shot there, the user can still resize beyond it if they wat – Leith

Answer 2

Late to the party, but just had the same question. From the documentation (v4.9):

var table = new Tabulator("#example-table", {
    columnMaxWidth:300, //maximum column width of 300px
    columns:[
        {title:"name", field:"name", maxWidth:false} //remove max width on this column
    ]
});

If you use autoColumns (which automatically adds columns from data field names) you need to use autoColumnsDefinitions (insted of columns).

var table = new Tabulator("#example-table", {
    columnMaxWidth: 300, //maximum column width of 300px
    autoColumns: true, //create columns from data field names,
    autoColumnsDefinitions: [
        { field: "Foo", maxWidth: false }, //don't limit width of Foo column
        { field: "Bar", maxWidth: false }
    ],
});

read more

Costanza