RWD-Table-Patterns NPM

RWD-Table-Patterns

This is an ~~experimental~~ awesome solution for responsive tables with complex data. It was originally based on Filament Group's experimental repo, but has during the years grown up to be a more complete solution with new features.

Demo:

http://gergeo.se/RWD-Table-Patterns/

Features:

:bird: 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!

:iphone: 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.

:coffee: Graceful JS fallback

In browsers without JavaScript, the tables will still be scrollable. I.e. there's still some responsiveness.

:thumbsup: 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.

How to use:

Install using NPM

npm i RWD-Table-Patterns@5.4.0

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 id="example-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>

Alternative 3: Initialize via JavaScript (selecting with ID)

<script>
   $(function() {
      $('#myTableWrapper').responsiveTable({{
        sortable: true // example option
    }});
   });
</script>

4. 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="".

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

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.

RWD responsive tables mobile-first bootstrap

@infinitebrahmanuniverse/nolb-rw @everything-registry/sub-chunk-1083

6 months ago

6 months ago

1 year ago

1 year ago

1 year ago