Tuesday, August 28, 2018

overflow - How should large table columns be handled on a responsive design?


Related to This Question, I'm interested in what I should do with a responsive design theme where the users have control over the columns which are displayed in a tabular, data rich page. Users are able to manipulate which columns are displayed, so I can't just limit the data to a few columns, as the other question's answers suggest. A potential work-around is to have a custom "mobile" query set up with pre-defined columns which I design for, but I can't control whether the users use this view or not.


Right now, I just have each column in each row stacking on top of each other and centered. I think this is not a very good design, as it wastes space and doesn't look organized. How should I best tackle this problem?


I have a redmine server here that exemplifies my problem, and here are some screenshots:


Desktop:


enter image description here


Mobile View:


enter image description here




Answer



Good question! As always when it comes to small screen experiences you will have to focus on the core functionality. Ask yourself which columns could be removed and still present a meningful table and let the user select the additional columns that he is interested in.


This solution might help you: A Responsive Design Approach for Complex, Multicolumn Data Tables.


It essentially recommends what has already been said: use only essential columns...


tables on responsive design


...and give the user the option to decide which columns to show.


tables on responsive design


The good thing about the article is they throw in some code.


UPDATE: CSS-Tricks has published a Responsive Data Table Roundup article.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...