Best way to present incredibly detailed table? [duplicate]

Question

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...

Answer 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

^{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.

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)

Answer 2

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