DataTable Responsive Scrollable

[Ibrahim Siripe]

Hi,
on PrimeReact 5.0.1 with Utlima Template
In order to make datatable responsive, I follow PrimeReact instruction https://primefaces.org/primereact/show ... responsive, and everything work perfectly, but when I enable scrollable option, datatable column width is not full in mobile mode as you can see in below picture.



I tried to customize css but failed to resolve this issue, I'll be very thankfull for any advice or tips to resolve this.

[mert.sincan]

Hi,

Could you please re-attach your screenshot or add a link?

Best Regards,

[Ibrahim Siripe]

Hi,

Could you please re-attach your screenshot or add a link?

Best Regards,

Hi mert.sincan,
picture re-upload, you can see it now in my previous message.

Thank you very much

[mert.sincan]

Hi,

Thanks a lot for the screenhot! Unfortunately, Ultima theme is not compatible with 5.x version for now. We're working on it. We'll get back to you with the new Ultima release asap.

Also, please see our demo that includes custom css;
https://primefaces.org/primereact/showc ... responsive

Best Regards,

[fernandotholl]

I went through the same problem, and I'm not using the indicated theme.

The real problem is in the way PrimeReact formats columns when scrollable is enabled, it uses the colgroup tag and puts width [0-100]%.

To work around the problem, just create two css blocks, the first to leave all cells with width = 0 and the other to leave only the first cell with width = 100%

Code: Select all

.datatable-responsive-demo .p-datatable-scrollable-colgroup col{
     width: 0 !important;
}

.datatable-responsive-demo .p-datatable-scrollable-colgroup col:first-child{
        width: 100% !important;
}