Responsive with auto-expand all rows

Responsive with auto-expand all rows

MazecMazec Posts: 48Questions: 2Answers: 0

Hello, please advise if datatables somehow allows to set a responsive table, but the whole one, see my screenshot and URL: https://css-tricks.com/responsive-data-tables/

I do NOT want the hybrid I found with the stupid green info expander. See the second screenshot, I don't want that. I need all information to be visible. i.e. expand all.

Is it okay please?

Thanks for the information.

Answers

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    You can follow the CSS trick you quoted. That should get you there.

    You might as well consider this:
    https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

  • MazecMazec Posts: 48Questions: 2Answers: 0

    This too is a nasty and confusing hybrid between what I want and how datatables.responsive works.

    It is not clear at all, to the point of being unusable.

    If there is no other usage, I will use the CSS trick from my link. However, datatables is a brilliant framework, I believe that it must somehow be turned on directly in the system.

    I'll try to wait to see if someone comes up with another solution, your solution is already very close, but it can't be used. That's not it yet. It's missing something. But thanks for the idea.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited August 2022

    You can create a custom renderer to display the child data as you wish. See this example.

    Combine that with the Immediate Show example.

    Kevin

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406
    edited August 2022

    I think what Kevin recommends is spot on. You show the child rows immediately without having a parent row (or with having an empty parent row - whatever you want to call it).

    I'd be interested in your final solution, @Mazec
    Please share.

  • MazecMazec Posts: 48Questions: 2Answers: 0

    I can't do that. I don't understand how it works. I was hoping it would have a simpler solution. But thank you all for your help anyway.

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    https://datatables.net/extensions/responsive/examples/column-control/classes
    class "none" can be used to force all columns into the child row. This should result in an empty parent row which I am sure you can make disappear using some CSS.
    In conjunction with this example you should get what you require:
    https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

Sign In or Register to comment.