Best practices for presenting table data on a Mobile Web Applications

We are developing mobile web apps that present tabular data.  Obviously the data is fine on larger screens, but as we size down the columns hide.  Are there any best practices or examples where we present table data on mobile web apps?  

I'd like to do something like the movable option in the below link or the collapse (freeze pane) method.

https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122

Our tables have 10 - 20 columns (all of which are needed data).  To expand and collapse is tedious.  We'd like to just scroll or swipe.

Hello Nate,


Have you tried using the horizontal scroll? Place your table inside of it then you can accomplish the side scrolling that you want.

Something to note is that the scroll does not work on the emulator, and you have to deploy it, at the minimum via OutSystems Now, to a mobile device.

Also, if in case you encounter some problem try adding this in CSS:

.horizontal-scroll {
    overflow: auto;
    width: 100%;
}

Reference: https://www.outsystems.com/forums/discussion/44740/the-horizontal-scroll-pattern-is-not-working-in-outsystems-11/


Hope this helps!

- Emman

PS: I tried using horizontal scroll without the CSS, and it still works fine now. Just added it in case you encounter it.

Nate Tierney wrote:

We are developing mobile web apps that present tabular data.  Obviously the data is fine on larger screens, but as we size down the columns hide.  Are there any best practices or examples where we present table data on mobile web apps?  

I'd like to do something like the movable option in the below link or the collapse (freeze pane) method.

https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122

Our tables have 10 - 20 columns (all of which are needed data).  To expand and collapse is tedious.  We'd like to just scroll or swipe.

Hi Nate,

To achieve this 

You need to add the class "NoResponsive" to the table Records.

Cheers


Pankaj