I have a requirement to design a portal that has large tables with select delete requirement and numerous columns. The client needs a responsive table that would scale based on the size of the screen. How do I handle this request? Do I use a Scrollable table with few fixed columns or a collapsible table grid? Appreciate any references and examples.
3 Answers
Ok, maybe you are already past this stage and the requirement is definitive. But even if this is not the answer you are looking for, I find suitable to make the statement:
Don’t make it responsive, make it adaptive!
The responsive design pattern isn’t very practical for large tables, using the adaptive design pattern would be a better idea. This gives the opportunity to think about what the user really needs when the screen scales. Providing just the information that the user would need on the device they are working on at that moment makes a huge difference in how effective the application is in any situation.
In other words; Tables with lots of columns are mostly meant to process and compare lots of data. This is work that probably is done best on a large screen. Making it responsive doesn’t necessarily make it easy to do the same work on a mobile phone for example. But probably they don’t want to do that kind of work when they are in the situation where the mobile phone is the only available device by hand.
If you can: design layout and visuals for the content and design the content for the user and the right context.
I was stuck with a similar situation once and the thing that worked best for us in that situation was a responsive layout which was as below:
On larger screens we used the table layout which let us fit a lot of information on a single row
On smaller screens we used a card layout which let us present the exact same information as on the larger screen but in a more structured manner and better suited for the screen size and device capabilities such as touch.
While doing both the above layouts information that is of utmost importance on each screen size can be bubbled up.
I think there are a few of ways to handle the table:
- Depending on the size of the column, you can collapse the rows so they fall under one another.
- Again depending on size, collapse the columns so they fall under one another.
- Do what you said and make them scrollable.
- Make each row into an accordion.
With the select element to select/delete columns I think this may be easier to do the scrollable grid approach (3) or accordion approach (4) as it will be easier to digest the information that could potentially be added or removed if its placed at the start or end column.
The others will incrementally place it every 'X' amount of rows which could make it look a bit odd and be confusing.
See here for examples: https://css-tricks.com/accessible-simple-responsive-tables/
