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

user_8461786 0
Viewed 4527

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/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
            <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
        </head>
        <body>
            <div id="table"></div>
        </body>
    </html>

tabulator css html javascript
3 Answers

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

user_35889930

I have changed height to max-height. Does this solve your problem? No matter how many rows, the table will not occupy more than 200px in height.

Have also added display: inline-block and max-width: 200px to adjust the containing div's width. You can make the table scrollable in any or both directions once the table width and/or height reaches the maximum defined in it's containing div.

 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 {
  display: inline-block;
  max-height: 200px;
  max-width: 200px;
}
<!DOCTYPE HTML>
    <html>
        <head>
            <!-- Tabulator -->
            <link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
            <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
        </head>
        <body>
            <div id="table"></div>
        </body>
    </html>

user_76920760 

ar selectedCount = function() {
  var selectedRows = $("#example-table").tabulator("getSelectedRows").length;
  $('#rowCount').text(selectedRows);
}

$("#example-table").tabulator({
  height: 205,
  layout: "fitColumns", //fit columns to width of table (optional)
  columns: [ {title: 'Name', field: 'name'},
            {title: 'Surname', field: 'surname'}
  ],
});

var tabledata = [
            {name: 'John', surname: 'Miller'},
            {name: 'Mike', surname: 'Tyson'},                        
        ];

//load sample data into the table
$("#example-table").tabulator("setData", tabledata);


selectedCount();
<div id="example-table"></div>

<p>
  Number of selected rows = <span id="rowCount"></span>
</p>

As per my understanding, Please check the documentation provided to make the 
columns to fit for the parent container http://tabulator.info/examples/4.4?#fittowidth


Please check the working example in the following https://jsfiddle.net/gzx72ukh/
user_17210990
Related