basictable 2.0.2 → 2.0.3

package/README.md

@@ -20,9 +20,11 @@ These changes should have no impact on the way it functions in comparison with 1
 
 ### jQuery
 
-Include the jQuery library in the `<head>` of your page.
+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>
 ```
@@ -35,9 +37,11 @@ $('table').basictable();
 
 ### Vanilla JS
 
-Include the basictable library in the `<head>` of your page.
+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>
 ```
 

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;
@@ -178,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){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.2",
+  "version": "2.0.3",
   "description": "Basic Table jQuery and Vanilla JS plugin for simple responsive tables.",
   "main": "jquery.basictable.js",
   "scripts": {

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 => {