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:

🐦 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!

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

How to use:

1. Installation

Install using NPM

npm i 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 5 (>=5.2)

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

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.

<div class="table-responsive" data-pattern="priority-columns">
      ...
</div>

Alternative 2: Initialize via JavaScript instead

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

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 } ) < 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	'fa fa-crosshairs'	Icon for the focus btn specified with classes.
i18n	object	`{ focus : 'Focus', display : 'Display', displayAll : 'Display all' }`	Used to translate the buttons (only works if you initialize via JavaScript).

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

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

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

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

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Tablesaw	5,520	95	7	5 months ago	54	March 19, 2019		mit	JavaScript
A group of plugins for responsive tables.
Rwd Table Patterns	751	1		20 days ago	14	July 05, 2022	11	mit	JavaScript
This is an awesome solution for responsive tables with complex data.
React Super Responsive Table	399	32	10	2 days ago	64	June 06, 2022	3	mit	JavaScript
Turn the tables on unresponsive data!
Ember Light Table	313	70	15	2 months ago	61	July 29, 2020	109	mit	JavaScript
Lightweight, contextual component based table for Ember
Datatables Responsive	219	6		7 years ago		February 22, 2021	18	other	JavaScript
Responsive Datatables Helper
Restable	186	1		a year ago		June 25, 2015			JavaScript
🌈 jQuery plugin that makes tables responsive converting them to HTML lists on small viewports.
React Sticky Table	178	33	1	2 years ago	42	October 17, 2020	9	mit	JavaScript
Responsive and dynamically-sized fixed headers and columns for tables
Stickers	157			5 days ago			5	mit	Go
Building blocks for charmbracelet/lipgloss 👾
Responsive	135	2	2	10 days ago	8	October 25, 2018	25	other	JavaScript
Responsive extension for DataTables, providing support for complex tables on all device screen sizes
Basictable	115	1		20 days ago	6	January 30, 2021	7	mit	JavaScript
Basic Table jQuery or Vanilla JS plugin for simple responsive tables.

Rwd Table Patterns