Responsive tables

飞鹰飞龙飞天 2014-11-17

展开全文

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)

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>

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 btn specified with classes.

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.