Tabulator table width is shrinking at first time loading and after drag it is adjusting

Issue

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>

Solution

Could you try setting the default width to 100% this might solve your issue!

Another thing also can be adjusting it to 100vw but this depends if the table is shown the entire width of the screen!

<div id="wormGearTabulatorTable" style="max-height: 100%;width: 100%;position: relative;"></div>

Answered By - Naren Murali