# Responsive tables

### by @nadangergeo & @filamentgroup

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

Download Fork on GitHub

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

## How to use

### Protip: 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

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` (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-bordered table-striped">
          ...
       </table>
    </div>

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

### 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=""` | 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)

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

#### 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.