above image show that how tabulator table width is shrinking
but it should show like below image
here table is shrinking at first time loading like in which is there in first image and when i drag it is coming but i want it should adjust properly
this.wormGearTabulatorHeaders = [
{
title: "Type", field: "name", headerHozAlign: "left", width: "55%", headerSort: false, hozAlign: "left", editable: false
},
{
title: "Value", headerHozAlign: "center", width: "45%",
columns: [
{
title: "Min", field: "minValue",cellEdited: validateWormGear,editable:editCheck, editor: "input", headerSort: false, width: "15%", hozAlign: "right", formatter:
decimalFormatter
, headerHozAlign: "right"
, editorParams: {
formatter: decimalFormatter
},
},
{
title: "Nom", field: "nomValue",cellEdited: validateWormGear, editor: "input", headerSort: false, width: "15%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"
, editorParams: {
formatter: decimalFormatter
}
},
{
title: "Max", field: "maxValue",cellEdited: validateWormGear,editable:editCheck, editor: "input", headerSort: false, width: "15%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"
, editorParams: {
formatter: decimalFormatter
}
},
],
},
];
this.wormGearTabulatorTable = new Tabulator("#wormGearTabulatorTable", {
maxHeight: "100%",
maxwidth: "100%",
data: wormGearTableData,
layout: "fitDataTable",
headerSort: false,
columns: this.wormGearTabulatorHeaders,
})its html code for same table
<div id="wormGearTabulatorTable" style="max-height: 100%;max-width: 100%;position: relative;"></div>