Skip to main content
Home / Articles /

Responsive Multi Column Data Tables

Direct Link →

Maggie Costello Wachs from Filament Group shares the best approach to responsive data tables I've seen yet. Remember the problem: exploring a large data table on small screen devices means a bunch of horizontal and vertical scrolling, which sucks. Her solution involves marking columns as "essential" and "optional" with CSS classes and hiding the optional ones with media queries at smaller screen sizes. Then to keep all the data accessible, providing a (dynamically created) dropdown of checkboxes to reveal the hidden optional columns.

Update: changing the link to Filament Groups "Tablesaw" which is a collection of plugins that handles lots of different responsive table techniques.

icon-link icon-logo-star icon-search icon-star