Datatable: scrollable property loses column alignment

[Dav3rs]

Describe the bug

This occurs just by adding the scrollable property when cell values are very different each others:

Just by removing the "scrollable" property:

Check the next sandbox:

Reproducer

https://codesandbox.io/embed/great-monad-pzyj6p?fontsize=14&hidenavigation=1&theme=dark

PrimeReact version

8.3.0

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Keep the column alignment.

[riyasat]

Hi, There is also one more bug related to the scrollable. When you make datatable as scrollable you cannot set the column width. You can reproduce it on same link as mentioned in the bug report by adding style={{width:'3em'}}.

Regards

[ubau]

Simple workaround for this issue is to set min width for every column. You can try it in same reproducer just by adding style={{minWidth: "100px"}}

[melloware]

Excellent workaround @ubau !

https://codesandbox.io/s/thirsty-austin-9jo7hu?file=/src/App.js

[Dav3rs]

@melloware That is a workaround for the with style issue, but not for the main ticket issue, because if I set some harcoded min-width for the columns, but then some cells have a bigger lenght the columns are getting messy anyway. In fact this min-width usage is on the official exaple docs https://www.primefaces.org/primereact/datatable/scroll/ Another problem is that if the table has a large number of columns, min-width will cause unused empty spaces that cannot be abused. Please don't drop priority over this issue🙏. It will be a big score for the next release 🚀

[melloware]

I don't work for PrimeTek.

I assigned it to Mert who is in charge of this project for PrimeTek.

[ubau]

Well, this is just a workaround and issue still remains. Speaking about unused empty spaces you can use different min width for every column. If the cell content is biger than column width there are two options - you can wrap content or use: className="white-space-nowrap overflow-hidden text-overflow-ellipsis" (set max width also) and show full content in Tooltip. Actually I don't use scrollable anymore, it's enough with responsiveLayout="scroll".

[melloware]

Looks like this is a duplicate this person had the same issues and I commented with solutions and screenshots: https://github.com/primefaces/primereact/issues/2951

[melloware]

I think this ticket is also related: https://github.com/primefaces/primereact/issues/2479 @ubau

[Dav3rs]

If this styles are removed from the row

This from the header

And this styles are removed from the cells

The bug is completely and beautifully gone.

It can be localy fixed by overwriting the styles with

.p-datatable-scrollable .p-datatable-thead > tr,
.p-datatable-scrollable .p-datatable-tbody > tr,
.p-datatable-scrollable .p-datatable-tfoot > tr {
	display: table-row !important;
}
.p-datatable-scrollable .p-datatable-thead > tr > th,
.p-datatable-scrollable .p-datatable-tbody > tr > td,
.p-datatable-scrollable .p-datatable-tfoot > tr > td {
	display: table-cell !important;
}

.p-datatable-scrollable .p-datatable-thead,
.p-datatable-scrollable .p-datatable-tbody,
.p-datatable-scrollable .p-datatable-tfoot {
	display: table-header-group !important;
}

I confirm, the bug is gone.

[mertsincan]

Thanks a lot, @Dav3rs! We changed datatable's structure. I think this issue has already been fixed in 9.2.0. Please try it. https://github.com/primefaces/primereact/issues/4078

Best Regards,

[melloware]

Confirmed this is fixed in 9.2.0