0

I'm trying to present a table on my site. The table is incredibly data heavy and can differ product to product.

The table needs to work in a responsive manner but still remain legible.

Can anybody recommend a best practice or examples of how they may have presented such data in the past? I've seen ZURB's responsive tables but I don't feel it's the best option...

enter image description here

1

Try switching format below a specific viewport size, and allow users to manage columns/data for what's most important to their context of use.

It seems like you have plenty of columns as is in the desktop view. For that view, you could use a First/last frozen column pattern, which is useful if you have actions that you need to perform per each row without needing to drill into a detail view:

For desktop and larger viewports: 1st and last frozen columns

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Pro

  • Freeze column (or columns) depending on the must-see / do info
  • Expands to larger viewports
  • Managing columns allows users to tailor to their most important info

Con

  • Scrolling as always is a trade off
  • Users may forget which columns are hidden (maybe a visual indicator to show how many columns are available

For mobile and smaller views: stacking card tables

This card stack: stackable.js is one option I've used in the past, and hacked to display larger cards in a style I reformatted that worked for our requirements. Since a user can't see all the columns, it changes to a label / value pair. It's repetitive for a purpose.enter image description here

Pro

  • Each card repeats the label, so value is always in context
  • Cards can stretch to accomodate data which is highest priority
  • You can add an 'Actions' icon persistent to mobile in the top right of each card (If that's your use case)

Con

  • Cards, unlike a grid make it difficult to see values across multiple items for comparision (although you could still add sort controls above the cards)
0

A few tips:

  • Do you really need to show all of that data at once? can you show the most important columns first and hide the rest under an option to "show all fields"?
  • I would recommend right-aligning numbers
  • Consider conditional formatting, like Excel offers- different colors in the background to visually communicate relative values, horizontal shaded bars for a "histogram" effect, or icons to highlight notable/interesting values

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