Responsive html table, scrolling by column with fixed first row/column

u2624

There is a html table, where are days as columns and groupped users as rows.

Here is a desktop example: https://snipboard.io/VNQWah.jpg

You can show/hide the groups by clicking on group header name.

I need to make it usable on mobile devices like this: When users open the page they see always two columns: the first column as fixed, and with sliding and/or left-right arrows they can move the table columns. Also the first row is fixed and the show/hide group headers should work. I don't need scrollbar and want to move the entire column, like jumping from day to day

Here is a mobile example: Monday: https://snipboard.io/Et6zoF.jpg Tuesday: https://snipboard.io/ijbMYk.jpg

The content is a regular HTML table with colspan group headers but I can refactoring if there is better solution.

The site uses UIkit framework and jQuery. I'm not sure if I can solve it with Datatables, especially the column slide function

colin

You can use rowGroup for the grouping, see example here with collapsible groups.

For the fixed column, you can use the FixedColumn extension. The arrows might be tricky, but you can just scroll as in this example.

Unfortunately, those two extensions aren't compatible, so you would need to choose one.

Colin