Search code examples
javascriptnode.jsnpmtabulator

Remove horizontal scroll bar and make table wider

By default, Tabulator reduces the max width of the table and displays a horizontal scroll bar at the bottom of the table. Is it possible to remove this scroll bar and force tabulator to increase the width of the table (so that the horizonta scrollbar is displayed at the bottom of the browser window)? enter image description here

Solution

  • Update

    As of Tabulator v4.7 there is a built in layout mode for handling this. the fitDataTable layout mode will fit the width table to its contents:

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

    See the Layout Documentation for full details and a working example

    Original Answer

    There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.

    It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured.

    You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.

    You would need to include the following CSS after the tabulator style sheet has been included:

    .tabulator, .tabulator-header, .tabulator-tableHolder{
    overflow:visible !important;
}

    But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.