Search code examples
javascriptcssangulartabulator

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

enter image description here above image show that how tabulator table width is shrinking

but it should show like below image it should show like this 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>