The Issue
After activating and deactivating header filters, the column height does not return to its original state.
- Is this the expected behavior?
- Is there a way to reset the column height?
Check out this JS Fiddle example: https://jsfiddle.net/biruktes/wak920us/24/
Code
var filterState = false;
var tabledata = [];
var table = new Tabulator("#html-table", {
data: tabledata, //assign data to table
layout: "fitColumns",
tooltips: true,
tooltipsHeader: true,
placeholder: "No Data Available", //display message to user on empty table
height: "300px",
columns: [{
title: "ID",
field: "itemId",
headerFilter: false
},]
});
function showHideFilters() {
if (filterState == false) {
table.updateColumnDefinition("itemId", {
headerFilter: true
});
filterState = true;
} else {
table.updateColumnDefinition("itemId", {
headerFilter: false
});
filterState = false;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.6.3/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.6.3/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<button onClick="showHideFilters()">
Show/Hide Filters
</button>
<div id="html-table">
</div>
</body>
</html>