This is an experimental awesome solution for responsive tables with complex data. It's a fork based on Filament Group's repo with a more complete solutions and some new features.
For demo: http://gergeo.se/RWD-Table-Patterns/
####Made for Twitter Bootstrap
Designed to be used with Bootstrap 3. If you don't want to use bootstrap, just fork the repo and customize it to your needs!
####Mobile first
Built with mobile first in mind. As a bonus, the tables won't break on old browsers :)
####Graceful JS fallback
In browsers without JavaScript, the tables will still be scrollable. I.e. there's still some responsiveness.
####Easy to use
You only need to include one JS-file, one CSS-file and one line of JavaScript and your tables are responsive.
Dependencies: jQuery and Twitter Bootstrap 3.
####0. Protip: Install using Bower
bower install RWD-Table-Patterns####1. Add CSS file to the <head>
<link rel="stylesheet" href="css/rwd-table.min.css">####2. Add JavaScript either to the <head>, or to the bottom of <body>
<script type="text/javascript" src="js/rwd-table.js"></script>
<script>
$(function() {
$('.table-complex').responsiveTable({
adddisplayallbtn: true,
addfocusbtn: true,
fixednavbar: '#navbar'//In case you have a fixed navbar.
})
});
</script>#####You also need to add the dependencies
- jQuery (>=1.11.0)
- Twitter Bootstrap 3 (>=3.1.1)
####3. HTML Classes
For better IE support, you need to have IE classes. Replace <html> with:
<!--[if lt IE 7 ]> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js lt-ie10"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->####4. Markup
Add the classes .table, .table-complex to the tables and wrap them in .table-responsive
You also need to give the table a unique id.
The table is also compatible with Twitter Bootstrap's .table-striped and .table-bordered classes.
<div class="table-responsive">
<table id="example-table" class="table table-complex table-bordered table-striped">
...
</table>
</div>####5. Setup your table with data-priority attributes for each <th>
| Attribute | Description/Breakpoint |
|---|---|
| data-priority="" | Always visible and not hideable from dropdown |
| data-priority="1" | Always visible (but hidable from dropdown) |
| data-priority="2" | Visible when (min-width: 480px) |
| data-priority="3" | (min-width: 640px) |
| data-priority="4" | (min-width: 800px) |
| data-priority="5" | (min-width: 960px) |
| data-priority="6" | (min-width: 1120px) |