CODEWITHSUNDEEP
javascripthtmltabulator
Ryan S
Ryan S

Reputation: 155

Tabulator fitData layout not resizing width of table

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: table output 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.

Upvotes: 5

Views: 2156

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8348

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

Upvotes: 6

Related Questions