responsive table

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/css/app.css": "/css/app.css?id=83fc199f637fc65b6c43",
-    "/js/all.js": "/js/all.js?id=cf0a313d21a29fcdf5a9",
-    "/css/all.css": "/css/all.css?id=098cec257f4ea12aa151",
+    "/css/app.css": "/css/app.css?id=203ee2798cb9fe99d1fe",
+    "/js/all.js": "/js/all.js?id=bdfd5f1305a1fd88f3dc",
+    "/css/all.css": "/css/all.css?id=381a04e1646c64b8d829",
     "/semantic/semantic.min.css": "/semantic/semantic.min.css?id=bb64c8534ddf680548a8"
 }

resources/js/components/basictable.js

@@ -0,0 +1,223 @@
+/*
+ * @license jQuery Basictable | MIT | Jerry Low | https://www.github.com/jerrylow/basictable
+ */
+
+(function ($) {
+  $.fn.basictable = function (options) {
+
+    var setup = function (table, data) {
+      var headings = [];
+
+      if (data.tableWrap) {
+        table.wrap('<div class="bt-wrapper"></div>');
+      }
+
+      // Table Header
+      if (data.header) {
+        var format = '';
+
+        if (table.find('thead tr th').length) {
+          format = 'thead th';
+        } else if (table.find('tbody tr th').length) {
+          format = 'tbody tr th';
+        } else if (table.find('th').length) {
+          format = 'tr:first th';
+        } else {
+          format = 'tr:first td';
+        }
+
+        $.each(table.find(format), function () {
+          var $heading = $(this);
+          var colspan = parseInt($heading.attr('colspan'), 10) || 1;
+          var row = $heading.closest('tr').index();
+
+          if (!headings[row]) {
+            headings[row] = [];
+          }
+
+          for (var i = 0; i < colspan; i++) {
+            headings[row].push($heading);
+          }
+        });
+      }
+
+      // Table Body
+      $.each(table.find('tbody tr'), function () {
+        setupRow($(this), headings, data);
+      });
+
+      // Table Footer
+      $.each(table.find('tfoot tr'), function () {
+        setupRow($(this), headings, data);
+      });
+    };
+
+    var setupRow = function ($row, headings, data) {
+      $row.children().each(function () {
+        var $cell = $(this);
+
+        if (($cell.html() === '' || $cell.html() === '&nbsp;') && (!data.showEmptyCells)) {
+          $cell.addClass('bt-hide');
+        } else {
+          var cellIndex = $cell.index();
+
+          var headingText = '';
+
+          for (var j = 0; j < headings.length; j++) {
+            if (j != 0) {
+              headingText += ': ';
+            }
+
+            var $heading = headings[j][cellIndex];
+            headingText += $heading.text();
+          }
+
+          $cell.attr('data-th', headingText);
+
+          if (data.contentWrap && !$cell.children().hasClass('bt-content')) {
+            $cell.wrapInner('<span class="bt-content" />');
+          }
+        }
+      });
+    };
+
+    var unwrap = function (table) {
+      $.each(table.find('td'), function () {
+        var $cell = $(this);
+        var content = $cell.children('.bt-content').html();
+        $cell.html(content);
+      });
+    };
+
+    var check = function (table, data) {
+      // Only change when table is larger than parent if force
+      // responsive is turned off.
+      if (!data.forceResponsive) {
+        if (table.removeClass('bt').outerWidth() > table.parent().width()) {
+          start(table, data);
+        } else {
+          end(table, data);
+        }
+      } else {
+        if ((data.breakpoint !== null && $(window).width() <= data.breakpoint) || (data.containerBreakpoint !== null && table.parent().width() <= data.containerBreakpoint)) {
+          start(table, data);
+        } else {
+          end(table, data);
+        }
+      }
+    };
+
+    var start = function (table, data) {
+      table.addClass('bt');
+
+      if (!data.header) {
+        table.addClass('bt--no-header');
+      }
+
+      if (data.tableWrap) {
+        table.parent('.bt-wrapper').addClass('active');
+      }
+    };
+
+    var end = function (table, data) {
+      table.removeClass('bt bt--no-header');
+
+      if (data.tableWrap) {
+        table.parent('.bt-wrapper').removeClass('active');
+      }
+    };
+
+    var destroy = function (table, data) {
+      table.removeClass('bt bt--no-header');
+      table.find('td').removeAttr('data-th');
+
+      if (data.tableWrap) {
+        table.unwrap();
+      }
+
+      if (data.contentWrap) {
+        unwrap(table);
+      }
+
+      table.removeData('basictable');
+    };
+
+    var resize = function (table) {
+      if (table.data('basictable')) {
+        check(table, table.data('basictable'));
+      }
+    };
+
+    // Get table.
+    this.each(function () {
+      var table = $(this);
+
+      // If table has already executed.
+      if (table.length === 0 || table.data('basictable')) {
+        if (table.data('basictable')) {
+          var data = table.data('basictable')
+          // Destroy basic table.
+          if (options === 'destroy') {
+            destroy(table, data);
+          } else if (options === 'restart') {
+            destroy(table, data);
+            table.data('basictable', data);
+            setup(table, data);
+            check(table, data);
+          }
+          // Start responsive mode.
+          else if (options === 'start') {
+            start(table, data);
+          } else if (options === 'stop') {
+            end(table, data);
+          } else {
+            check(table, data);
+          }
+        }
+        return false;
+      }
+
+      // Extend Settings.
+      var settings = $.extend({}, $.fn.basictable.defaults, options);
+
+      var vars = {
+        breakpoint: settings.breakpoint,
+        containerBreakpoint: settings.containerBreakpoint,
+        contentWrap: settings.contentWrap,
+        forceResponsive: settings.forceResponsive,
+        noResize: settings.noResize,
+        tableWrap: settings.tableWrap,
+        showEmptyCells: settings.showEmptyCells,
+        header: settings.header
+      };
+      // Maintain the original functionality/defaults
+      if (vars.breakpoint === null && vars.containerBreakpoint === null) {
+        vars.breakpoint = 568;
+      }
+
+      // Initiate
+      table.data('basictable', vars);
+
+      setup(table, table.data('basictable'));
+
+      if (!vars.noResize) {
+        check(table, table.data('basictable'));
+
+        $(window).bind('resize.basictable', function () {
+          resize(table);
+        });
+      }
+    });
+  };
+
+  $.fn.basictable.defaults = {
+    breakpoint: null,
+    containerBreakpoint: null,
+    contentWrap: true,
+    forceResponsive: true,
+    noResize: false,
+    tableWrap: false,
+    showEmptyCells: false,
+    header: true
+  };
+})(jQuery);

resources/js/init/ui.js

@@ -1,5 +1,7 @@
 $(function () {
 
+    $('table.unstackable').basictable();
+
     $('.ui.checkbox').checkbox();
 
     $('.ui.dropdown:not(.tag)').dropdown({

resources/sass/app.scss

@@ -6,6 +6,7 @@
 @import "helpers/visibility";
 
 @import "components/animation";
+@import "components/basictable";
 @import "components/calendar";
 @import "components/flash";
 @import "components/flash-dark";

resources/sass/components/_basictable.scss

@@ -0,0 +1,80 @@
+/*
+ * jQuery Basic Table
+ * Author: Jerry Low
+ */
+
+.ui.table.bt {
+  tr {
+    &:first-child {
+      td {
+        border-top: 1px solid rgba(34, 36, 38, .1);
+        &:first-child {
+          border-top: none;
+        }
+      }
+    }
+  }
+  .numbering {
+    text-align: left;
+    font-weight: bold;
+    &:before {
+      margin-right: 1em;
+      width: auto;
+    }
+  }
+}
+table.bt thead,
+table.bt tbody th {
+  display: none;
+}
+
+table.bt tfoot th,
+table.bt tfoot td,
+table.bt tbody td {
+  border: none;
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  vertical-align: top;
+
+  /* IE 9 */
+  float: left \9;
+  width: 100% \9;
+}
+
+table.bt tfoot th::before,
+table.bt tfoot td::before,
+table.bt tbody td::before {
+  content: attr(data-th) " ";
+  display: inline-block;
+  -webkit-flex-shrink: 0;
+  -ms-flex-shrink: 0;
+  flex-shrink: 0;
+  font-weight: bold;
+  width: 6.5em;
+}
+
+table.bt tfoot th.bt-hide,
+table.bt tfoot td.bt-hide,
+table.bt tbody td.bt-hide {
+  display: none;
+}
+
+table.bt tfoot th .bt-content,
+table.bt tfoot td .bt-content,
+table.bt tbody td .bt-content {
+  vertical-align: top;
+}
+
+.bt-wrapper.active {
+  max-height: 310px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+table.bt.bt--no-header tfoot td::before,
+table.bt.bt--no-header tbody td::before {
+  display: none;
+}

webpack.mix.js

@@ -16,6 +16,7 @@ mix.scripts([
     './node_modules/jquery/dist/jquery.min.js',
     './public/semantic/semantic.min.js',
     './node_modules/simplebar/dist/simplebar.js',
+    'resources/js/components/basictable.js',
     'resources/js/components/calendar.js',
     'resources/js/components/flash.js',
     'resources/js/components/keymaster.js',