Search code examples
javascripthtmlcsstabulator

How to fit a Tabulator table to a div of fixed height and width?


I am trying to create a Tabulator table inside a div that has fixed height and width.

However, if there is not enough columns/rows of data to fill the entire width or height of the div, the Tabulator table will still occupy the entire height/width, only filling grey color in the free space.

How can I get rid of this grey area? Note that I do not want to resize rows nor columns.

 function create_table() {
    let table = new Tabulator("#table", {
        data: [
            {name: 'John', surname: 'Miller'},
            {name: 'Mike', surname: 'Tyson'},                        
        ],
        columns:[
            {title: 'Name', field: 'name'},
            {title: 'Surname', field: 'surname'},
        ]
    })               
  }
                
 create_table()
#table {
  height: 200px;
  width: 200px;
}
<!DOCTYPE HTML>
    <html>
        <head>
            <!-- Tabulator -->
            <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
            <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
        </head>
        <body>
            <div id="table"></div>
        </body>
    </html>


Solution

  • At the moment you have one of two display options for the table:

    • If you specify a height on the table it will take up that height and any overflow will be managed correctly and allow scrolling, if there are not enough rows to fill the table it still takes up the same amount of space and you see the table background
    • If you don't specify a height on the table it assumes that you want it to take up as much height as there are rows and that the external div to the table will handle scrolling

    So in your scenario you could look at changing the background color to make it fit in more, but there is no way to hid the extra space.

    In the upcoming version 4.6 (coming early 2020) there will be a new display mode that is a hybrid between the two, that will allow the table to expand until it overflows and then handle scrolling inside the table