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>
At the moment you have one of two display options for the table:
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