Tabulator sticky headers without using the height argument - sticky

Question

I want to have sticky headers in Tabulator, and I don't want to use the height variable when creating the table. Any ideas would be greatly appreciated.
var table = new Tabulator("#example-table", {
height:"100px", // Sticky header works
// height:false,// Use instead of height:"100px", sticky header fails
// leaving the height argument out, sticky header fails
columns:[
{title:"Name", field:"name"},
{title:"Progress", field:"progress", align:"right", sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", align:"center"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"}
],
data: [
{id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, dob:"14/04/1984", car:1},
{id:2, name:"Mary May", progress:1, gender:"female", rating:2, dob:"14/05/1982", car:true},
{id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, dob:"22/05/1982", car:"true"},
{id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, dob:"31/01/1999"},
{id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, dob:"12/05/1966", car:1},
{id:7, name:"Jamie Newhart", progress:23, gender:"male", rating:3, dob:"14/05/1985", car:true}
]
});
Please see/run this jsfiddle.

Answer 1

If you upgrade to version 4.6 and add a max-height of 100% to your table then the table will scroll once it has exceeded the height of the containing element.
The table must have a scrollbar in order for the headers to stay fixed, otherwise it just treats the table as a static element on a page and dosnt overflow

Answer 2

Solved via #Oli Folkerd (of course). Using/updating to Tabular 4.6, and setting the maxHeight arguement to 100%. Then the table will scroll with sticky headers within the container element. Perfect and thank you #Oli Folkerd
See the solution and try it here jsfiddle
HTML
<link href="https://unpkg.com/tabulator-tables#4.6.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.6.2/dist/js/tabulator.min.js"></script>
<div class="example-table" id="example-table"/>
CSS
div.example-table {
height: 150px;
border: 1px solid black;
}
JavaScript
var table = new Tabulator("#example-table", {
// height:"100px", // Sticky header works
// height:false, // Use instead of height:"311px", sticky header fails
// leaving the height argument out, sticky header fails
maxHeight:"100%", // use this and version 4.6 of Tabulator
columns:[
{title:"Name", field:"name"},
{title:"Progress", field:"progress", align:"right", sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", align:"center"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"}
],
data: [
{id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, dob:"14/04/1984", car:1},
{id:2, name:"Mary May", progress:1, gender:"female", rating:2, dob:"14/05/1982", car:true},
{id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, dob:"22/05/1982", car:"true"},
{id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, dob:"31/01/1999"},
{id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, dob:"12/05/1966", car:1},
{id:7, name:"Jamie Newhart", progress:23, gender:"male", rating:3, dob:"14/05/1985", car:true}
]
});