0

I have a list of applications (~120 items).

Each application on the list has the same features (logo, name, OS name, price range, short product info), so basically this is a table with 120 rows and 5 columns.

Currently it's displayed as non-responsive data grid with sorting options (table with sorting on header click).

How to display the items in a usable way in responsive manner? (With good usability on both narrow mobile and wide desktop).

I've been looking for any templates, but they are ok just for few features with tick marks.

Any solution for responsive data grid with images and text?

1

I would suggest getting outside of the concept of a table (not famous for responsiveness).

A great way to arrange data on a responsive grid are cards. They can display data nicely, are easily sorted (or filtered), and super nice to work with responsively.

enter image description here https://dribbble.com/shots/3740552-Course-grid

You can not only re-arrange them, but also change their size, shape and details (amount and layout of featured info, ...) to best fit the different devices and screens:

enter image description here https://getflywheel.com/layout/card-layout-css-grid-layout-how-to/

0

I see this being broken down into two issues:

1.) Display of the information

2.) Sorting/filtering of the information once the presentation has been adapted to device


DISPLAY

There are a number of ways to accomplish this using either CSS (flexbox) or by using one of many existing javascript-based tools for this. Responsive tables have been a source for questions for a long time, so it's definitely worth spending some quality time with Google to evaluate solutions based on your use case.

However, going off what you've stated (e.g. since you have so many rows), I'd suggest you find a way to make this easier to scroll through on a mobile device -- maybe by collapsing rows into accordions or something. A 10x10 table is one thing... but with 150 records being displayed, you should think about making the user do any extra work. You don't want them being forced to swipe like a crazy person to traverse the data. In essence, you would be hiding the columns and allowing the user to expose them. (Note: As I state below, this isn't the best approach if the table is meant for comparison use, e.g. comparing values between two rows.)

With that said, Accessible, Simple, Responsive Tables by Davide Rizzo is probably a great starting point for you. I like this approach because it retains accessibility.

Here is an important excerpt (in case the link ever 404's):

Approaches for Responsive Tables Let's think about the different ways a table could behave responsively:

  1. Squash: If columns have little content they might squash horizontally with no issues on a mobile screen so not changing the layout needs to be a valid option.
  2. Vertical scroll: If the layout and content is exact and critical, a user could scroll to the left or right. This is trivial in CSS with an overflow="auto" wrapper.
  3. Collapse by rows: Split each row into its own single column mini-table on small screens. Switching display:table into display:block will cause this with normal table markup.
  4. Collapse by columns: This is where things get tricky. You can't do this with normal table markup in pure CSS because the code order is by rows and the wrappers lock it in. We either have to change the markup or start manipulating with JavaScript.

Since you have many columns, collapsing by row (i.e. no scrolling) is what you are looking for. So:

Responsive tables with flexbox

1a) For row-oriented tables...

  1. Order markup exactly how a mobile or screen reader should read it, use semantic headers and content.
  2. Abandon all concept of 'row' wrappers.
  3. Set the width of each cell as a percentage based on number of columns or rows.
  4. Auto sizing column widths is not possible.

Once you have your layout fixed, you need to style it for clarity (zebra stripe, etc.):

Style to help make connections

  1. Style cells individually in any pattern you require.
  2. Fix cell border duplication with negative margins.

However, if you need to have support for legacy browsers, this is an important thing to keep in mind when using a flexbox approach:

IE9 and below does not support flexbox. For older browsers, you can detect flexbox (with Modernizer) and show the mobile version, which is a good example of graceful degradation.

You can then further enhance this by collapsing to tabs (not really appropriate for your situation) or accordions (far more suitable -- links shows codepen example). This is only useful if the data isn't being visually compared, as it will hide the content and force a user to expose the information manually by opening each "row" (accordion).

This approach certainly makes it easier to move around the page, though. It's a lot cleaner looking, too -- and you can use javascript/jQ to rearrange the accordions as needed when sorting.


SORTING

Once you have your data collapsing properly, you can resort to javascript/jQ to rearrange the DOM elements as per the user's choice. You can trigger this either with links (like the table headers) or via one or more dropdowns (that you can expose in mobile view only). This part should be relatively trivial if you are using classes or IDs in your rows/accordions.

You can find a code examples here:

Sorting elements with jQuery (github source)

jQuery Plugin For Reordering and Filtering Html Elements - filter.js

I think those will help. If not, it's time to read up on manipulating the DOM tree.


TL;DR: Make friends with flexbox, but prepare to degrade if flexbox isn't available. If the data is too "long" for mobile view, find a way to collapse each row (accordions, perhaps). Then use javascript/jQ to push the elements around as needed (you can likely re-use whatever filtering/sorting method you are currently using as long as your content is ID'd properly).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.