My website contains more than 3 tabs and several charts interspersed between tables.
Based on the requirement, we have not set a fixed size for the tables. Therefore, the height of the table varies depending on the data.
I am looking to fix the headers of the tables in the user interface so that when scrolling vertically, the header remains fixed while only the data scrolls.
var tabledata = [
// Data content here
];
// Initialize table
var table1 = new Tabulator("#tblData1", {
// Table configuration for tblData1
});
var table2 = new Tabulator("#tblData2", {
// Table configuration for tblData2
});<html>
<head>
<script src="js/tabulator.min.js"></script>
<link href="css/tabulator.min.css" rel="stylesheet"/>
</head>
<body>
<div id="tblData1" style="width:550px;"></div>
<br><br><br><br>
<div id="tblData2" style="width:550px;"></div>
<script type="text/javascript">
</script>
</body>
</html>For a similar example, refer to: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html