Collapse datatables by rows

[Deleted User]

Hi there,

I'm looking for a sample code or a plugin to achieve this result:

https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100

with datatables.

My goal is to change a table like this:

+-------------+---------------+
| TITLE A | TITLE B |
+-------------+---------------+
| ITEM 1 | OBJECT X |
+-------------+---------------+
| ITEM 2 | OBJECT Y |
+-------------+---------------+

into one like this on mobile only:

+-------------+---------------+
| TITLE A | ITEM 1 |
+-------------+---------------+
| TITLE B | OBJECT X |
+-------------+---------------+
+-------------+---------------+
| TITLE A | ITEM 2 |
+-------------+---------------+
| TITLE B | OBJECT Y |
+-------------+---------------+

The table of course is very big and I want to avoid scrolling on small screens.
Can someone give some advice?

Many thanks
Cheers,
Francesco

colin

Hi @francians ,

It would be worth looking at the Responsive plugin for DataTables, as that may be able to give you what you want. For example, this example here shows how the table cells can automatically be pushed out as child rows once the table's size starts to reduce.

Hope that helps,

Cheers,

Colin

[Deleted User]

@colin Hi, thanks for the prompt reply!
It's exactly what I meant!
Best,
Francesco