RWD-Table-Patterns

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

How to use:

1. Installation

Install using NPM

npm i RWD-Table-Patterns

Add CSS file to the ``````

Add JavaScript file either to the , or to the bottom of

You also need to add the dependencies

• jQuery (>=1.11.0)
• Bootstrap 5 (>=5.2)

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

3. Initialize

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.

Alternative 2: Initialize via JavaScript instead

Alternative 3: Initialize via JavaScript (selecting with ID)

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

 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 shiftKey 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 } ) ``` with:

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.