DataTable: width is not working for column and event onColumnResizeEnd don't fire on reduce size of column

[bhoomesh-spe]

Describe the bug

I have created SPFx with React solution. I have used "primereact": "^9.4.0" version.

I need to set the column width dynamically in the Prime React data-table column.

I have added the same code as below to bind dynamic columns in the Prime React data-table.

columnsArray?.map((col) => {
  return (
    <Column
    key={col?.field}
    field={col?.field}
    header={col?.header} 
    style={{ width: col?.width + 'px', whiteSpace: 'nowrap' }}
    // style={{ min-width: col?.width + 'px', max-width: col?.width + 'px', whiteSpace: 'nowrap' }}
    sortable
    filter
    filterClear={filterClearTemplate}
    filterApply={filterApplyTemplate}
    reorderable={true}
    body={getAllFieldData}
   />
  )
 }
})

Everything is working as expected except the width property.

Also, I have tried max-width and min-width properties, and it works as expected.

If I use min-width and max-width and try to reduce the column size onColumnResizeEnd don't fire to reduce size of column due to min-width.

Can anyone help me with the same?

Thanks

Reproducer

https://stackblitz.com/edit/3ccbnb-ltg7xv?file=src%2FApp.jsx

PrimeReact version

9.4.0

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

[gabrielhpugliese]

I have the same issue when using min-width. It's not possible to resize past below its value. But the same doesn't happen with max-width

[bhoomesh-spe]

@gabrielhpugliese - Thanks for the update. The max-width property is not working only min-width is working and the event onColumnResizeEnd doesn't fire on reducing size of the column.

[melloware]

have you both tested 10.6.6 and made sure its still an issue in 10.6.6?

[github-actions]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[bhoomesh-spe]

@melloware Yes I have upgraded PrimeReact to the 10.6.6 version but face the same issue.

[melloware]

OK can someone create a StackBlitz please?

[gabrielhpugliese]

Hello @melloware, thanks for the attention!

He is my reproduction: https://stackblitz.com/edit/3ccbnb-ltg7xv?file=src%2FApp.jsx
If you try to resize the column to less than 100px it doesn't do anything and it has no indication that it's not possible to do that.

If you want to point me in the code where I can start debugging this I am happy to do so.

[melloware]

Thanks for the reproducer I have marked it as a bug.

[sja-cslab]

I've just been thinking about that ticket and have to say, it doesn't seem to be a bug at all.

If you guys give a column a min-width of 100px, why should it get smaller? You explicitly said, 'don't go less than 100px,' so that column doesn't.

With that in mind, why should onColumnResizeEnd get fired if a resize never happened?

[gabrielhpugliese]

So the same should apply to max-width then but it doesn't.

To give you more context on my usage: I am setting min-width and max-width to the same number because I don't want the width to "jump around" when I scroll down and the cells have different content width. I don't know how else I can achieve this effect but if you tell me there's a way to have always the same width on the column independently of the content I will be very happy.

[sja-cslab]

@gabrielhpugliese I agree with you - just had a problem with columns too if content length changed on items.
So would you make another Issue for it? It's more like "column width changed while scrolling" kind of ticket.
Paying more attention to min/max width could be a solution but I guess just dont change widths while scrolling would make more sense in that case.

Guess that are two different things.

One more thing, did you try tableStyle={{ tableLayout: 'fixed'}}?
See MDN.

I dont know how Vanilla HTML tables will work on auto layout if content change while scrolling - maybe the behavior is just inherited

[bhoomesh-spe]

@sja-cslab @melloware - Thanks for the quick reply.

If I used style={{ width: col?.width + 'px', whiteSpace: 'nowrap' }} then it is not working

If I used style={{ min-width: col?.width + 'px', max-width: col?.width + 'px', whiteSpace: 'nowrap' }} then is is working

the conclusion is dynamic width is not working and If I used min-width then the event onColumnResizeEnd doesn't fire on reduced column size.

[gabrielhpugliese]

@sja-cslab I have tried the { tableLayout: 'fixed' } but it will not respect either width or min-width. It will simply adjust all columns to the space available horizontally.

[sja-cslab]

Thats correct but it should keep the Initial width then. For me at least without width jumping

[gabrielhpugliese]

Indeed there's no width jumping but in small screens it's just not usable because there's no horizontal scroll

[sandipan-saha]

Hi folks,

Facing the same issue here. I have set dynamic widths to each column, but the table doesn't respect that and columns are stretched to max available space.

• I have tried setting the table-layout: fixed
• I have tried using min-width and max-width, but then resizing columns is an issue

Has anybody found any work around to this problem ?

PS: My implementation:
<DataTable key={"table_no_"+Math.random() * 100} value={tableData} reorderableColumns resizableColumns columnResizeMode="expand" onColReorder={(e) => handleColReorder(e)} onColumnResizeEnd={(e) => handleColResize(e)} className="iviewTable" style={{ color: "rgb(202, 0, 0)" }}> {columnHeaderData.map((item, index) => { return <Column field={item.colHeader} header={renderHeader(item.colHeader, item.colType)} key={index} style={{ width: item.colWidth }} />; })} </DataTable>

[tnurmi82]

I discovered PrimeReact after having tried several datagrid/table components from several libraries. I was thrilled to see PrimeReact DataTable ticks all the boxes feature-wise. But I immediately noticed the horrible experience when scrolling a virtualized (scrollable) table.

@sandipan-saha The only workaround that currently kind of works for me is to pad the actual column content, so that each string is of same length. With that I got rid of the table headers jumping horizontally when scrolling. Not sure yet, but this might have some effects on the filter function and perhaps sort as well.

But this width issue isn't nearly as annoying as the blank view when scrolling quickly (happens even with delay: 0). For that reason alone I don't think I can switch to PrimeReact's DataTable. For example RSuite's Table Virtualized performs way better on quick scroll.

[sja-cslab]

@tnurmi82 that flickering is visible you're right. However there are perfomance issues open currently that may fix that issues.
Currently there're 2 PRs that handle specifig performance related things
#7425
#7420

Keep an eye on that, maybe it will help as soon as it's merged

[tnurmi82]

Thanks @sja-cslab I will keep an eye on those. Also, I think I'm able to live with the scroll issues after all, because otherwise DataTable has been awesome in my tests. Very rich feature-wise, easy to set up, and overall less code required compared to many other datagrid/table components. Sort and filtering are super easy.