Having an Issue with getting column headers to stretch to fit data

[ameshkin]

Title

• bug: XYZ broken...
• feature: please add...
• enhancement: add this to existing features...

Environment Details

• react-tabulator version:
• "react-tabulator": "^0.18.1", "react-url-query": "1.x", "tabulator-tables": "^5.1.3",
• OS: All
• Node.js version: 14, 16, 17

Long Description I need the columns to stretch no matter how many characters there are. There should be horizontal scrolling. The rows are getting these hard coded styles min-width: 40px; width: 139px; height: 56px;

I upgraded from 4 to 5 and now this has broken. In the old table which was version 5, the width gets calculated as 200px. I've spent hours on this and it just doesn't make sense. I've tried several things.

        <ReactTabulator
          data={data}
          columns={columns}
          tooltips
          renderHorizontal='virtual'
          // layout="fitDataTable"
          // responsiveLayout="hide"
          // TRIED THESE frozen, fitColumns, fitDataFill, fitDataStretch
          // options={options}
        />

[damenking]

@ameshkin did you ever figure out a solution to this by chance? I'm facing the same issue.

[damenking]

I was only able to get it to do what I wanted by having an outer container for the table with width: fit-content but this unfortunately doesn't work with the horizontal virtual dom rendering assuming that works with react-tabulator.