Tabulator fitData layout not resizing width of table

Question

I'm trying to use Tabulator v4.6.3 with the fitData layout. Here's my code:

var table = new Tabulator("#cowTable", {
        data: cowTableData,
        layout: "fitData",
        history: true,
        columns: [
            { title: "Cow ID", field: "cowId", editor: "number", editorParams: { step: 1 } },
            { title: "Enter", field: "enter", editor: "number", editorParams: { step: 100 } },
            { title: "Exit", field: "exit", editor: "number", editorParams: { step: 100 } },
            { title: "Strip Status", field: "strip", editor: "select", editorParams: { "active": "Active", "inactive": "Inactive", "absent": "Absent" } },
            { title: "Mobility", field: "mobility", editor: "number", editorParams: { min: 0, max: 3, step: 0.05 } },
            { title: "Body Condition", field: "bodycond", editor: "number", editorParams: { min: 0, max: 4, step: 0.05 } }
        ]

Which produces this: My issue is the black part to the right that seems like the table isn't resizing properly. Whenever I use the layout option fitColumns, it works fine and is the full width of the image below but the columns are too wide. I've tried to do table.redraw() below the code of the table, but this doesn't fix anything. If anyone has a solution on how to remove the black part to the right, that would be greatly appreciated.

Thanks.

Andreas

Answer 1

That is rendering correctly.

In fitData layout mode the columns resize to fit their data/column titles which is exactly what is happening there, and spare space on the right is then empty.

If you want to fill the empty space then you should be using the fitDataFill or fitDataStretch layout modes.

The Taubulator website has examples of each layout mode in operation in the Layout Examples Section

Lymanlymann

Because of like that good answer, I am still using stakoverflow even thought I can use Chat GPT. Thank You. – Snakeroot