Responsive Tables

by @nadangergeo & @wnr

This is an experimental awesome solution for responsive tables with complex data.

Download GitHub Repo

Features

Made for 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 & PE

Built with mobile first and progressive enhancement in mind. Also built with love and with the help of a fair amount of coffee.

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 add one JS-file, one CSS-file and some minimal setup to make the tables responsive.

Dependencies: jQuery and Bootstrap 3.

Demo

Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est Lorem Ipsum
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning


# Date Text Bank (1930) Eget kapital John Doe (2010) Eget kapital Jane Doe (2020) Utgående moms 25 % (2610) Moms varuförvärv EU 25 % (2615) Ingående moms 25 % (2640) Ingående moms utland (2645) Moms redovisningskonto (2650) Momspliktiga intäkter (3000) Inköp varor EU 25 % (4056) Förbrukningsinventarier (5400) Kontorsmaterial och trycksaker (6100) Övriga externa tjänster (6500) Bankavgifter (6570) Årets resultat (8999)
Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit
1 2014-01-11 Office stuff 100 SEK 25 SEK 75 SEK
2 2014-02-12 iPad 5000 SEK 1250 SEK 3750 SEK
3 2014-03-20 Office stuff 100 SEK 25 SEK 75 SEK
4 2014-04-19 iPhone 7000 SEK 1750 SEK 5250 SEK
5 2014-05-14 Office stuff 100 SEK 25 SEK 75 SEK
6 2014-06-02 Speakers 5000 SEK 1250 SEK 3750 SEK
7 2014-07-20 Office stuff 300 SEK 75 SEK 225 SEK
8 2014-08-24 Display 10000 SEK 2500 SEK 7500 SEK
9 2014-09-03 Office stuff 300 SEK 25 SEK 75 SEK
10 2014-10-12 MacBook Air 12000 SEK 3000 SEK 9000 SEK
11 2014-11-20 Office stuff 200 SEK 50 SEK 150 SEK
12 2014-12-11 iMac 15000 SEK 3750 SEK 11 250 SEK
55100 SEK 13725 SEK 40500 SEK 675 SEK


# Group A Group B Group C Group D Group E Group F Group G Group H Group I
# Column A.1 Column A.2 Column B.1 Column B.2 Column C.1 Column C.2 Column D.1 Column D.2 Column E.1 Column E.2 Column F.1 Column F.2 Column G.1 Column G.2 Column H.1 Column H.2 Column I.1 Column I.2
1 Column A.1 Column A.2 Column B.1 Column B.1 Column C.1 Column C.2 Column D.1 Column D.2 Column E.1 Column E.2 Column F.1 Column F.2 Column G.1 Column G.2 Column H.1 Column H.2 Column I.1 Column I.2
2 Column A Column A Column B Column B Column C Column C Column D Column D Column E Column E Column F Column F Column G Column G Column H Column H Column I Column I
3 Column A Column A Column B Column B Column C Column C Column D Column D Column E Column E Column F Column F Column G Column G Column H Column H Column I Column I
4 Column A Column A Column B Column B Column C Column C Column D Column D Column E Column E Column F Column F Column G Column G Column H Column H Column I Column I

How to use

Install using NPM

npm i RWD-Table-Patterns@bs3

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

Markup

  1. Add the classes .table to the tables and wrap them in .table-responsive, as usual when using Bootstrap.
  2. If the table has complex data and many columns you can give it the class table-small-font and table-tighten (highly recommended).
  3. 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-tighten 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 3: Initialize via JavaScript (selecting with ID)

<script>
   $(function() {
      $('#myTableWrapper').responsiveTable({
        sortable: true // example option
    });
   });
</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.
sortable boolean false

Makes the table sortable by columns. Simply click a header to sort it. Reversed toggling if shift key is active.

The sort function uses the attribute 'data-value' on a cell if it exists, otherwise it uses the 'innerText' prop (the content of the cell). Useful if you want the value presented in a certain format, and the sort based on the value in another format.

Tip: You can also trigger a sort like this: 

$(function() {
    $('#myTableWrapper').responsiveTable(
        'sortColumn', // name of function to trigger
        [ // args array
            pos-x, // x position of column
            dir // sort direction (-1|1|0)
        ]
    );
});

Note: Default is set to false, i.e. the feature is opt-in, to avoid potential click-event conflicts.

compareFunction function 
function(a, b, dir) {
  return a[0].localeCompare(
    b[0], 
    undefined, 
    { numeric: true }
  ) < 0 ? -dir : dir;
}

The default compare function uses String.prototype.localeCompare to sort the table columns. But you can also pass your own custom compare function for sorting, when initializing via JavaScript. This is in case the built in compare function does not work for you (depends a lot on how the data is formatted).

The function should take a (string), b (string) and dir (-1|1) as arguments and return -1, 0 or 1.

Note: localeCompare is still highly recommended to base the function on.

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

no-js class

The no-js class is used to determine if the browser does not have JavaScript support or if JavaScript is disabled. The class is not used right now, but you should consider adding it anyway in case a future release has a patch that depends on it.