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.
http://gergeo.se/RWD-Table-Patterns/
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!
Built with mobile first and progressive enhancement in mind. Also built with love and with the help of a fair amount of coffee.
In browsers without JavaScript, the tables will still be scrollable. I.e. there's still some responsiveness.
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.
npm i RWD-Table-Patterns<link rel="stylesheet" href="css/rwd-table.min.css"><script type="text/javascript" src="js/rwd-table.js"></script>- jQuery (>=1.11.0)
- Bootstrap 5 (>=5.2)
- Add the classes
tableto the tables and wrap them intable-responsive, as usual when using Bootstrap. - If the table has complex data and many columns you can give it the class
table-small-fontandtable-tighten(highly recommended). - The table can also utilize Bootstrap's table classes, such as
table-stripedandtable-bordered.
<div class="table-responsive">
<table id="example-table" class="table table-small-font table-tighten table-bordered table-striped">
...
</table>
</div>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><script>
$(function() {
$('.table-responsive').responsiveTable({options});
});
</script><script>
$(function() {
$('#myTableWrapper').responsiveTable({{
sortable: true // example option
}});
});
</script>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, Tips: When initalizing via JavaScript, add |
| 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:
Note: Default is set to |
| compareFunction | function |
|
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: |
| 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 | |
Used to translate the buttons (only works if you initialize via JavaScript). |
| 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) |
| Attribute | Description/Usage |
|---|---|
data-responsive-table-toolbar="table-id" |
Designates DOM element as toolbar for table with id of
Default:
A new |
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
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]-->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.