Responsive tables made simple

Responsive UI isn't hard. Unless it's a huge table of statistical data which should be easy to consume regardless the size of the screen. Mintos.com statistics section contains quite detailed statistics table about the marketplace's performance. Therefore we created a hybrid solution of fixed-label-column and mobile-cards UI.

Responsive table in action

There's no single solution for omniscreens

Regular table on large screen

Fixed label column

Scrollable table with scroll hint on medium size screen

Mobile cards

Cards UI on small screens

Enough with pictures, let's see the code

HTML
Here we have created the table using DIVs. Yes, it doesn't follow the principles of semantic markup and the best practices of accessibility. That's something for future improvements.

But what’s done here is:

  • A CSS class name is added to headings section so we can hide it based on the browser viewport's width.
  • A data-label attribute with corresponding column title is added to each table cells. This attribute is used on mobile cards to label the content of each cell.

And CSS
The default (also a mobile view in this case) contains just a bare minimum of CSS. First we are hiding the .headings section on smaller screens. And secondly we display data-label attribute (related column’s heading title) in front of each cells content, position it left and aligning the content on right.

For medium and large screens the media query kicks in when browser viewport's width is at least 768px wide. After that multiple styling rules are applied:

  • Horizontal scroll bar for the container of the table is enabled
  • Headings are shown
  • Data labels are set to empty strings and hidden
  • A fixed width of 1170px is applied to row container with left padding of 160px. This space is reserved for fixed label column
  • Table cells are aligned inline
  • And finally we apply absolute positioning and left position to the fixed label column

Conclusion

Writing JS, TS, Vue, #C, and fostering teams to release customer value n-times a day. Creator of billid.app and writer on abrickis.me

Writing JS, TS, Vue, #C, and fostering teams to release customer value n-times a day. Creator of billid.app and writer on abrickis.me