Release v6.1.0

Gruntfile.js

@@ -95,7 +95,7 @@ module.exports = function(grunt) {
       watch: {
           src: {
             // rebuild if files in src changes
-            files: ['src/**', 'docs/**'],
+            files: ['src/**'],
             tasks: ['build'],
             options: {
               livereload: {

README.md

@@ -88,7 +88,9 @@ You can initalize the table without writing any JavaScript, just like Bootstrap.
 ```html
 <script>
    $(function() {
-      $('#myTableWrapper').responsiveTable({options});
+      $('#myTableWrapper').responsiveTable({{
+        sortable: true // example option
+    }});
    });
 </script>
 ```
@@ -99,9 +101,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   <thead>
    <tr>
      <th>Name</th>
-     <th>type</th>
-     <th>default</th>
-     <th>description</th>
+     <th>Type</th>
+     <th>Default</th>
+     <th>Description</th>
    </tr>
   </thead>
   <tbody>
@@ -114,6 +116,61 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
        <p><strong>Tips:</strong> When initalizing via JavaScript, add <code>data-pattern=""</code> to responsive tables you wan't to exclude.</p>
      </td>
    </tr>
+   <tr>
+      <td>sortable</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+        <p>
+            Makes the table sortable by columns. Simply click a header to sort it. Reversed toggling if shiftKey is active.
+        </p>
+        <p>
+            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.
+        </p>
+        <p>
+            <strong>Tip: </strong>You can also trigger a sort like this:
+        </p>
+        <pre><code>$(function() {
+  $('#myTableWrapper).responsiveTable(
+    'sortColumn, // name of function to trigger
+    [ // args array
+      pos-x, // x position of column
+      dir // sort direction (-1|1|0)
+    ]
+  );
+});</code></pre>
+        <p>
+            <strong>Note:</strong> Default is set to <code class="text-danger">false</code>, i.e. the feature is opt-in, to avoid potential click-event conflicts.
+        </p>
+      </td>
+    </tr>
+   <tr>
+   <tr>
+      <td>compareFunction</td>
+      <td>function</td>
+     <td>
+       <pre class="mb-0"><code>function(a, b, dir) {
+  return a[0].localeCompare(
+    b[0], 
+    undefined, 
+    { numeric: true }
+  ) < 0 ? -dir : dir;
+}</code></pre>
+     </td>
+     <td>
+        <p>
+            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).
+        </p>
+        <p>
+            The function should take a (string), b (string) and dir (-1|1) as arguments and return -1, 0 or 1.
+        </p>
+        <p class="mb-0">
+            <strong>Note:</strong> localeCompare is still highly recommended to base the function on.
+        </p>
+     </td>
+</tr>
    <tr>
      <td>stickyTableHeader</td>
      <td>boolean</td>
@@ -154,11 +211,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
    <tr>
      <td>i18n</td>
      <td>object</td>
-     <td>{
-           focus : 'Focus',
-           display : 'Display',
-           displayAll : 'Display all'
-         }
+     <td><pre><code>{
+  focus : 'Focus',
+  display : 'Display',
+  displayAll : 'Display all'
+}</code></pre>
      </td>
      <td>
          Used to translate the buttons (only works if you initialize via JavaScript).

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "RWD-Table-Patterns",
   "description": "This is an awesome solution for responsive tables with complex data.",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "keywords": [
     "RWD",
     "responsive",

dist/css/rwd-table.css

@@ -1,5 +1,5 @@
 /*!
- * Responsive Tables v6.0.2 (http://gergeo.se/RWD-Table-Patterns)
+ * Responsive Tables v6.1.0 (http://gergeo.se/RWD-Table-Patterns)
  * This is an awesome solution for responsive tables with complex data.
  * Authors: Nadan Gergeo <[email protected]> (www.blimp.se), Lucas Wiener <[email protected]> & "Maggie Wachs (www.filamentgroup.com)"
  * Licensed under MIT (https://github.com/nadangergeo/RWD-Table-Patterns/blob/master/LICENSE-MIT)
@@ -109,6 +109,14 @@
 .table-responsive[data-pattern="priority-columns"] > .table {
   margin-bottom: 0;
 }
+.table-responsive[data-pattern="priority-columns"] > .table > thead > tr > th,
+.table-responsive[data-pattern="priority-columns"] > .table > tbody > tr > th,
+.table-responsive[data-pattern="priority-columns"] > .table > tfoot > tr > th,
+.table-responsive[data-pattern="priority-columns"] > .table > thead > tr > td,
+.table-responsive[data-pattern="priority-columns"] > .table > tbody > tr > td,
+.table-responsive[data-pattern="priority-columns"] > .table > tfoot > tr > td {
+  position: relative;
+}
 .table-responsive[data-pattern="priority-columns"] > .table-tighten > thead > tr > th,
 .table-responsive[data-pattern="priority-columns"] > .table-tighten > tbody > tr > th,
 .table-responsive[data-pattern="priority-columns"] > .table-tighten > tfoot > tr > th,
@@ -378,6 +386,7 @@ table.focus-on tfoot tr.focused td {
 .sticky-table-header > .table > tbody > tr > td,
 .sticky-table-header > .table > tfoot > tr > td {
   border-color: var(--bs-border-color);
+  position: relative;
 }
 .sticky-table-header > .table-tighten > thead > tr > th,
 .sticky-table-header > .table-tighten > tbody > tr > th,
@@ -412,3 +421,25 @@ table.focus-on tfoot tr.focused td {
 .sticky-table-header > .table-bordered > tfoot > tr:last-child > td {
   border-bottom: 0;
 }
+.table-responsive[data-sorting-active=true] thead th:not([colSpan]),
+.table-responsive[data-sorting-active=true] thead th[colSpan="1"] {
+  cursor: pointer;
+  padding-right: 1.5rem;
+}
+.table-responsive[data-sorting-active=true] thead th:not([colSpan])[data-sorted]:after,
+.table-responsive[data-sorting-active=true] thead th[colSpan="1"][data-sorted]:after {
+  display: block;
+  width: auto;
+  height: auto;
+  position: absolute;
+  right: 5px;
+  bottom: 0.5rem;
+}
+.table-responsive[data-sorting-active=true] thead th:not([colSpan])[data-sorted="asc"]:after,
+.table-responsive[data-sorting-active=true] thead th[colSpan="1"][data-sorted="asc"]:after {
+  content: '↑';
+}
+.table-responsive[data-sorting-active=true] thead th:not([colSpan])[data-sorted="desc"]:after,
+.table-responsive[data-sorting-active=true] thead th[colSpan="1"][data-sorted="desc"]:after {
+  content: '↓';
+}