Responsive with 2 Fixed Columns and Others to Row Layout

silkspin

I was wondering if it is possible to edit the responsive layout. Instead of individual columns turning into rows as the screen width narrows. I wanted to fixed the first 2 columns so they are always columns, but once the screen width isn't wide enough I'd like all the other columns to turn into rows at once. I've experimented with trying to fix the widths of the first 2 columns but that didn't work.

Normally [1] [2] [3] [4] [5] would start to wrap to the following as the screen narrows...

[1] [2] [3] [4]
[5]

then...

[1] [2] [3]
[4]
[5]

I would like to fix the first 2 columns so that [1] [2] [3] [4] [5] goes straight to...

[1] [2]
[3]
[4]
[5]

allan

There is some control over this using the class logic, but there isn't a way to dynamically have columns 3, 4 and 5 all collapse at once I'm afraid.

Allan

silkspin

Thanks @allan. Is that also the case for all columns > all rows in one go too? Like the collapse by rows example here... https://css-tricks.com/accessible-simple-responsive-tables/

silkspin

Actually the class logic works pretty well using min-desktop and then stacking the rows.

allan

Awesome .

I never really gave much thought to folding down multiple columns at the same time before, but I can see that it might be useful.

Allan

silkspin

In cases where multiple similar values, like prices or dates are still in the main row, it can be a bit hard to keep track of what is what. The rows that have folded say what the data is in the left cell so it's easier to keep track. The good thing about your class logic advice is that you don't need to stick to the same order of the full desktop datatable.

For example I can now change the order for responsive like...

[1] [5]
[2]
[3]
[4]

So thanks for pointing that out!