basictable 2.0.1 → 2.0.3

package/README.md

@@ -16,6 +16,41 @@ The jQuery version remains the same as 1.0.0. While the source remains unchanged
 
 These changes should have no impact on the way it functions in comparison with 1.x.
 
+## Getting Started
+
+### jQuery
+
+Include the CSS and jQuery library in the `<head>` of your page.
+
+```
+<link rel="stylesheet" type="text/css" href="basictable.min.css" />
+
+<script src="jquery.min.js"></script>
+<script type="text/javascript" src="jquery.basictable.min.js"></script>
+```
+
+Initiate on any table(s) with:
+
+```
+$('table').basictable();
+```
+
+### Vanilla JS
+
+Include the CSS and basictable library in the `<head>` of your page.
+
+```
+<link rel="stylesheet" type="text/css" href="basictable.min.css" />
+
+<script type="text/javascript" src="basictable.min.js"></script>
+```
+
+Initiate on any table(s) with:
+
+```
+new basictable('table');
+```
+
 ## Options
 
 Options are applicable to both the jQuery and Vanilla JS.

package/dist/js/basictable.js

@@ -46,9 +46,9 @@ class basictable {
         } else if (table.querySelectorAll("tbody tr th").length) {
           format = "tbody tr th";
         } else if (table.querySelectorAll("th").length) {
-          format = "tr:first th";
+          format = "tr:first-of-type th";
         } else {
-          format = "tr:first td";
+          format = "tr:first-of-type td";
         }
         table.querySelectorAll(format).forEach((heading => {
           const colspan = parseInt(heading.getAttribute("colspan"), 10) || 1;
@@ -132,7 +132,6 @@ class basictable {
     }
   }
   _resize(table) {
-    console.log("resize");
     this.tables.forEach((table => {
       if (table.getAttribute("data-bt-active")) {
         this._check(table);
@@ -179,4 +178,3 @@ class basictable {
     }
   }
 }
-

package/dist/js/basictable.min.js

@@ -1,4 +1,4 @@
 /*
  * @license Basictable - Vanilla JS | MIT | Jerry Low | https://www.github.com/jerrylow/basictable
  */
-"use strict";class basictable{constructor(t,e={}){this.tableSel=t,this.options={breakpoint:null,containerBreakpoint:null,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1,header:!0,...e},null===this.options.breakpoint&&null===this.options.containerBreakpoint&&(this.options.breakpoint=568),this._getTables(),this._setup()}_getTables(){this.tables=document.querySelectorAll(this.tableSel)}_setup(){this.tables.forEach((t=>{t.setAttribute("data-bt-active",!0);const e=[];if(this.options.tableWrap){const e=document.createElement("div");e.classList.add("bt-wrapper"),t.parentNode.insertBefore(e,t),e.appendChild(t)}if(this.options.header){let s="";s=t.querySelectorAll("thead tr th").length?"thead th":t.querySelectorAll("tbody tr th").length?"tbody tr th":t.querySelectorAll("th").length?"tr:first th":"tr:first td",t.querySelectorAll(s).forEach((t=>{const s=parseInt(t.getAttribute("colspan"),10)||1,i=t.closest("tr"),o=[].indexOf.call(i.parentElement.children,i);e[o]||(e[o]=[]);for(let i=0;i<s;i++)e[o].push(t)})),t.querySelectorAll("tbody tr").forEach((t=>this._setupRow(t,e))),t.querySelectorAll("tfoot tr").forEach((t=>this._setupRow(t,e)))}this.options.noResize||this._check(t)})),this.options.noResize||(this._tableResizeEvent=()=>this._resize(),window.addEventListener("resize",this._tableResizeEvent))}_setupRow(t,e){t.querySelectorAll(":scope > *").forEach((t=>{if(""!==t.innerHTML.trim()&&"&nbsp;"!==t.innerHTML||!this.options.showEmptyCells){const s=[].indexOf.call(t.parentElement.children,t);let i="";for(let t=0;t<e.length;t++){0!==t&&(i+=": ");i+=e[t][s].textContent}t.setAttribute("data-th",i);const o=document.createElement("span");if(o.classList.add("bt-content"),this.options.contentWrap&&t.firstChild!==o)for(t.appendChild(o);t.firstChild!==o;)o.appendChild(t.firstChild)}else t.classList("bt-hide")}))}_check(t){if(this.options.forceResponsive)null!==this.options.breakpoint&&window.innerWidth<=this.options.breakpoint||null!==this.options.containerBreakpoint&&t.parentElement.offsetWidth<=this.options.containerBreakpoint?this._start(t):this._end(t);else{t.classList.remove("bt");t.getBoundingClientRect().left+t.offsetWidth>t.parentElement.offsetWidth?this._start(t):this._end(t)}}_start(t){t.classList.add("bt"),this.options.header||t.classList.add("bt--no-header"),this.options.tableWrap&&t.closest(".bt-wrapper").classList.add("active")}_end(t){t.classList.remove("bt","bt--no-header"),this.options.tableWrap&&t.closest(".bt-wrapper").classList.remove("active")}_resize(t){console.log("resize"),this.tables.forEach((t=>{t.getAttribute("data-bt-active")&&this._check(t)}))}start(){this.tables.forEach((t=>{this._start(t)}))}stop(){this.tables.forEach((t=>{this._end(t)}))}restart(){this.destroy(),this._getTables(),this._setup()}destroy(){this.tables.forEach((t=>{if(t.getAttribute("data-bt-active")){t.classList.remove("bt","bt--no-header"),t.removeAttribute("data-bt-active");const e=t.querySelectorAll("td");e.forEach((t=>t.removeAttribute("data-th"))),this.options.contentWrap&&e.forEach((t=>{const e=t.querySelector(".bt-content");e&&(t.innerHTML=e.innerHTML)})),this.options.tableWrap&&(t.parentNode.outerHTML=t.parentNode.innerHTML)}})),this.options.noResize||window.removeEventListener("resize",this._tableResizeEvent)}}
+"use strict";class basictable{constructor(t,e={}){this.tableSel=t,this.options={breakpoint:null,containerBreakpoint:null,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1,header:!0,...e},null===this.options.breakpoint&&null===this.options.containerBreakpoint&&(this.options.breakpoint=568),this._getTables(),this._setup()}_getTables(){this.tables=document.querySelectorAll(this.tableSel)}_setup(){this.tables.forEach((t=>{t.setAttribute("data-bt-active",!0);const e=[];if(this.options.tableWrap){const e=document.createElement("div");e.classList.add("bt-wrapper"),t.parentNode.insertBefore(e,t),e.appendChild(t)}if(this.options.header){let s="";s=t.querySelectorAll("thead tr th").length?"thead th":t.querySelectorAll("tbody tr th").length?"tbody tr th":t.querySelectorAll("th").length?"tr:first-of-type th":"tr:first-of-type td",t.querySelectorAll(s).forEach((t=>{const s=parseInt(t.getAttribute("colspan"),10)||1,i=t.closest("tr"),o=[].indexOf.call(i.parentElement.children,i);e[o]||(e[o]=[]);for(let i=0;i<s;i++)e[o].push(t)})),t.querySelectorAll("tbody tr").forEach((t=>this._setupRow(t,e))),t.querySelectorAll("tfoot tr").forEach((t=>this._setupRow(t,e)))}this.options.noResize||this._check(t)})),this.options.noResize||(this._tableResizeEvent=()=>this._resize(),window.addEventListener("resize",this._tableResizeEvent))}_setupRow(t,e){t.querySelectorAll(":scope > *").forEach((t=>{if(""!==t.innerHTML.trim()&&"&nbsp;"!==t.innerHTML||!this.options.showEmptyCells){const s=[].indexOf.call(t.parentElement.children,t);let i="";for(let t=0;t<e.length;t++){0!==t&&(i+=": ");i+=e[t][s].textContent}t.setAttribute("data-th",i);const o=document.createElement("span");if(o.classList.add("bt-content"),this.options.contentWrap&&t.firstChild!==o)for(t.appendChild(o);t.firstChild!==o;)o.appendChild(t.firstChild)}else t.classList("bt-hide")}))}_check(t){if(this.options.forceResponsive)null!==this.options.breakpoint&&window.innerWidth<=this.options.breakpoint||null!==this.options.containerBreakpoint&&t.parentElement.offsetWidth<=this.options.containerBreakpoint?this._start(t):this._end(t);else{t.classList.remove("bt");t.getBoundingClientRect().left+t.offsetWidth>t.parentElement.offsetWidth?this._start(t):this._end(t)}}_start(t){t.classList.add("bt"),this.options.header||t.classList.add("bt--no-header"),this.options.tableWrap&&t.closest(".bt-wrapper").classList.add("active")}_end(t){t.classList.remove("bt","bt--no-header"),this.options.tableWrap&&t.closest(".bt-wrapper").classList.remove("active")}_resize(t){this.tables.forEach((t=>{t.getAttribute("data-bt-active")&&this._check(t)}))}start(){this.tables.forEach((t=>{this._start(t)}))}stop(){this.tables.forEach((t=>{this._end(t)}))}restart(){this.destroy(),this._getTables(),this._setup()}destroy(){this.tables.forEach((t=>{if(t.getAttribute("data-bt-active")){t.classList.remove("bt","bt--no-header"),t.removeAttribute("data-bt-active");const e=t.querySelectorAll("td");e.forEach((t=>t.removeAttribute("data-th"))),this.options.contentWrap&&e.forEach((t=>{const e=t.querySelector(".bt-content");e&&(t.innerHTML=e.innerHTML)})),this.options.tableWrap&&(t.parentNode.outerHTML=t.parentNode.innerHTML)}})),this.options.noResize||window.removeEventListener("resize",this._tableResizeEvent)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basictable",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Basic Table jQuery and Vanilla JS plugin for simple responsive tables.",
   "main": "jquery.basictable.js",
   "scripts": {
@@ -8,7 +8,7 @@
     "compile-js": "terser src/js/basictable.js --output dist/js/basictable.min.js -c -m --comments && terser src/js/basictable.js --output dist/js/basictable.js -b indent_level=2",
     "compile-jquery": "terser src/js/jquery.basictable.js --output dist/js/jquery.basictable.min.js -c -m --comments && terser src/js/jquery.basictable.js --output dist/js/jquery.basictable.js -b indent_level=2",
     "compile-css": "uglifycss src/css/basictable.css > dist/css/basictable.min.css --ugly-comments && beautify-css src/css/basictable.css dist/css/basictable.css",
-    "compile": "yarn compile-js && yarn compile-jquery && compile-css",
+    "compile": "yarn compile-js && yarn compile-jquery && yarn compile-css",
     "lint": "yarn standard src/js/*.js"
   },
   "repository": {

package/src/js/basictable.js

@@ -54,9 +54,9 @@ class basictable { // eslint-disable-line no-unused-vars
         } else if (table.querySelectorAll('tbody tr th').length) {
           format = 'tbody tr th'
         } else if (table.querySelectorAll('th').length) {
-          format = 'tr:first th'
+          format = 'tr:first-of-type th'
         } else {
-          format = 'tr:first td'
+          format = 'tr:first-of-type td'
         }
 
         table.querySelectorAll(format).forEach(heading => {