DataTable CSS and responsive structure improvements

[mertsincan]

Details;
primefaces/primeng#12047

Breaking changes are;

• responsiveLayout is now defaults to scroll. The 'stack' mode is deprecated.
• scrollDirection is now obselete
• autoLayout is obselete as table is based on auto layout now, tableStyle="table-layout:fixed" can be used for fixed.

[franmc01]

Please do not remove the stack mode.

I understand that there are issues that mention that mention that they can not coexist together but I use both modes and totally possible with a simple conditional, in my case I have a hook called useMediaquery with which I decide that in web this scroll mode and tablet and lower in stack mode.

[Exodiel]

Like @francmarin98 said, its posible work with that props just using a conditional, its not a big deal

[Vitalii-Pidoprygora]

That is a big drawback that 'stack' mode is deprecated.

[franmc01]

@mertsincan can stack mode be brought back? consider the issue of accessibility, usability, readability and use.

[giovannispd]

@mertsincan and @melloware, the prop tableStyle="table-layout:fixed" solved my problem with table layout and resized columns... but where is documented this setting??? no mention for this in primereact ad primeflex documentation!!
documentation for the latest version is almost very uncomfortable and incomplete for many new features (either for content and layout)

[melloware]

@giovannispd table-layout is not a React or PrimeReact property it is just CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

However there probably should be some sort of showcase example showing fixed columns with this setting.

[giovannispd]

ok... sorry but this is not clear in docs, and in my opinion all these main use cases should be treated.
primereact (and all prime libs) strengths has been always ease of use and great documentation, but lately i have some difficult with docs and backwards compatibility with previous version (6.6 in my case).
anyway thanks always for great support!

[franmc01]

What chance is there that I can get the datatable component separately like it was in version 8.7.3? My company needs that way of presentation.

CC: @melloware @mertsincan

[melloware]

@t1fmarin my only suggestion would be to check out the 8.7.3 tag here in GitHUb and copy the old Datatable component into your project along with any CSS necessary and maintain it as "` or something like that.

[julianomqs]

Hello,

I managed to recreate the responsive datatable with a small custom datatable component and CSS.

You can give it a look here:
https://codesandbox.io/s/responsive-datatable-yyjsp4

The main code is in files datatable.js and datatable.css.

Regards,

Juliano

[melloware]

Very nice @julianomqs

[franmc01]

I still keep wondering why stack mode was deprecated, it was something cool.
@julianomqs good job with that recreation of stack mode, nice.

[enzolry]

Thanks a lot @julianomqs you saved me a lot of trouble !

[mgc90]

Hi!
Im putting in practice the @julianomqs solution (Excellent, thanks!!) in my code.
Im using the products DataTable template and some of my columns got's already the prop body (like body={statusBodyTemplate}). What can I do to applicate boths body properties? ChatGPT toldme that use boths functions in one but thats is not working for me. This is my first real project. Thanks community!

[julianomqs]

Hello @mgc90,

I changed my example to accept a property render, a function that accept four arguments:

• The value of the column;
• The row data;
• The body properties;
• The index of the column.

This is like I do in my company and works well.

In the datatable.js file you can see the change to accept the property render, and in the App.js file where the property render is used to put the column Quantity in bold.

Link:
https://codesandbox.io/p/sandbox/hungry-roman-yyjsp4

Hope this helps.

Regards,

Juliano