Responsive tables for Piwik table reports

[mattab]

The goal of this issue is to implement Responsive tables in Piwik, to better account for the diversity of screen widths when using Piwik. For example the visible columns could automatically increase if there is more screen available.

Reference
Here is a great article that sum up the existing possibility for responsible table:
http://filamentgroup.com/lab/tablesaw.html

Solution 1 - Stack row:

Solution 2 - Toggle columns:

Solution 3 - Page columns:

Tasks

• Discuss and prototype a good generic solution.
• Test it:
  • on datatables in reports,
  • on two-column reports,
  • on widgets in dashboard.
• Check edge cases: truncation, small screens, large screens
• add screenshot tests testing for more screen widths (such as existing mobile use case screenshot in Make theme look great when used in Mobile browser #5029 )

Notes

• See also Column names could stick to the top of screen when scrolling down report tables #3513, Display a new row "Total" showing the sum of values for all DataTable columns #5267
• There are existing jquery plugin, for each solutions. So we can certainly do this in Piwik.
• The table metrics picker is similar to our Graphs Metrics picker function so maybe these could be simplified.

[tassoman]

Well, responsiveness is cool 😎 but is going the opposite direction of accessibility, maybe we could save our souls using WAI-ARIA 👼

[mattab]

@tsteur in Piwik 3 hopefully we will add a "scroll" feature to datatables so that our very wide tables with many columns (or a very long labels #6121) will be visible by scrolling to the right. Moving to 3.0.0 tentatively.

[tsteur]

I assigned myself to #6121 but not to this one. As it won't be truly responsive :)

[username1290]

Can this one be closed too? The UI adapts to the available real estate.

[mattab]

Agreed it's much better now. Not sure if the issue is fully done though. What do you think @tsteur - should we leave this opened or rather create other tickets for specific issues?

[tassoman]

I'd like to ask Mr @jdeyla about performing #a11y tests on 3.x branch ui

[tsteur]

It is better now, although not fully responsive I reckon, and we could close the issue. I presume there is another issue to make row actions work on mobile phones?

[mattab]

I presume there is another issue to make row actions work on mobile phones?

According to quick testing now, the row actions are usable on Android (it was improved/fixed a few months ago)... or is there still a problem/something can be improved with row actions on mobile? @tsteur

Closing issue as the tables are "responsive enough" and quite usable.

@tassoman @jdeyla any a11y suggestion is welcome, please create a new issue with suggestion