How to use

Install using Bower

bower install RWD-Table-Patterns

Add CSS file to the <head>

<link rel="stylesheet" href="css/rwd-table.min.css">

Add JavaScript file either to the <head> or to the bottom of <body>

<script type="text/javascript" src="js/rwd-table.js"></script>

You also need to add the dependencies

jQuery (>=1.11.0)

Bootstrap 3 (>=3.1.1) normalize.less buttons.less button-groups.less dropdowns (.less & .js) tables.less glyphicons needed for default focusBtnIcon option.



Markup

Add the classes .table to the tables and wrap them in .table-responsive , as usual when using Bootstrap. If the table has complex data and many columns you can give it the class .table-small-font (highly recommended). The table can also utilize Bootstrap's table classes, such as .table-striped and .table-bordered .

<div class="table-responsive"> <table class="table table-small-font table-bordered table-striped"> ... </table> </div>

Alternative 1: Initialize via data attributes

You can initalize the table without writing any JavaScript, just like Bootstrap. Just add the attribute data-pattern="priority-columns" to the .table-responsive div.

<div class="table-responsive" data-pattern="priority-columns"> ... </div>

Alternative 2: Initialize via JavaScript

<script> $(function() { $('.table-responsive').responsiveTable({options}); }); </script>

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data- with hyphens instead of camelCase, as in data-add-focus-btn="" .

Name type default description pattern string 'priority-columns' What responsive table pattern to use. For now, 'priority-columns' is the only pattern available. Tips: When initalizing via JavaScript, add data-pattern="" to responsive tables you wan't to exclude. stickyTableHeader boolean true Makes the table header persistent. fixedNavbar string '.navbar-fixed-top' Is there a fixed navbar? The sticky table header needs to know about it! The option is the selector used to find the navbar. Don't worry about the default value if you don't have a fixed navbar. Example: '#navbar' addDisplayAllBtn boolean true Add 'Display all' button to the toolbar above the table. addFocusBtn boolean true Add 'Focus' toggle button to the toolbar above the table. focusBtnIcon string 'glyphicon glyphicon-screenshot' Icon for the focus button specified with classes. i18n object { focus : 'Focus', display : 'Display', displayAll: 'Display all' } Used to translate the buttons (only works if you initialize via JavaScript).

Setup your table with data-priority attributes for each <th>

Attribute Description/Breakpoint data-priority="-1" Hidden and and not togglable from dropdown data-priority="0" Hidden per default (but togglable from dropdown) 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)

Setup your table toolbar with data-responsive-table-toolbar attribute

Attribute Description/Usage data-responsive-table-toolbar="table-id" Designates DOM element as toolbar for table with id of table-id Default: A new <div> toolbar element is appended to element with table wrapper class responsive-table .

Dynamic content? Call Update()!

There is an update method which you can call when the content in tbody/tfoot has changed. The method will in turn call the private method setupBodyRows() which sets up rows that has not been setup, as well as update the sticky table header (to accommodate for any changes in columns widths).

You can call the method like this:

$('.table-responsive').responsiveTable('update');

or perhaps like this, if you want to select by id:

$('#the_id_to_the_table_responsive_wrapper').responsiveTable('update');

The API is inspired by Bootstrap's programmatic API. If you are curious about how the hell the method call is being done, see the following lines of code: rwd-table.js#L692-L694

HTML Classes

For better IE support, you need to have IE classes. Replace <html> with:

<!--[if lt IE 7 ]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7 ]> <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8 ]> <html class="no-js lt-ie10 lt-ie9"> <![endif]--> <!--[if IE 9 ]> <html class="no-js lt-ie10"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->