Repository navigation
DataTable CSS and responsive structure improvements #4078
Description
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.
Reacted by Matías Correa and bernhardkircher
Reacted by Francisco, Jipson Saad, Castro Maciel, balazsiisti, Giovanni, rama, Álef Duarte, Penihel Roosewelt, Dmitri, Enzo and 7 more
Metadata
Metadata
Assignees
Labels
No labels
Activity
[-]Table CSS and responsive structure Improvements[/-][+]DataTable CSS and responsive structure improvements[/+]Refactor #4078
Refactor #4078
franmc01 commentedon Mar 22, 2023
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 commentedon Mar 22, 2023
Like @francmarin98 said, its posible work with that props just using a conditional, its not a big deal
Vitalii-Pidoprygora commentedon Mar 24, 2023
That is a big drawback that 'stack' mode is deprecated.
franmc01 commentedon May 2, 2023
@mertsincan can stack mode be brought back? consider the issue of accessibility, usability, readability and use.
giovannispd commentedon May 19, 2023
@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 commentedon May 19, 2023
@giovannispd
table-layoutis not a React or PrimeReact property it is just CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layoutHowever there probably should be some sort of showcase example showing fixed columns with this setting.
giovannispd commentedon May 19, 2023
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 commentedon Sep 16, 2023
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 commentedon Sep 17, 2023
@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 commentedon Oct 7, 2023
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 commentedon Oct 7, 2023
Very nice @julianomqs
franmc01 commentedon Oct 8, 2023
I still keep wondering why stack mode was deprecated, it was something cool.
@julianomqs good job with that recreation of stack mode, nice.
enzolry commentedon Nov 3, 2023
Thanks a lot @julianomqs you saved me a lot of trouble !
mgc90 commentedon Apr 19, 2024
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 commentedon Apr 19, 2024
Hello @mgc90,
I changed my example to accept a property render, a function that accept four arguments:
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