basictable 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +6 -2
  2. package/dist/js/basictable.js +1 -178
  3. package/dist/js/basictable.min.js +1 -1
  4. package/package.json +1 -1
  5. package/src/js/basictable.js +12 -4
package/README.md CHANGED
@@ -20,9 +20,11 @@ These changes should have no impact on the way it functions in comparison with 1
20
20
 
21
21
  ### jQuery
22
22
 
23
- Include the jQuery library in the `<head>` of your page.
23
+ Include the CSS and jQuery library in the `<head>` of your page.
24
24
 
25
25
  ```
26
+ <link rel="stylesheet" type="text/css" href="basictable.min.css" />
27
+
26
28
  <script src="jquery.min.js"></script>
27
29
  <script type="text/javascript" src="jquery.basictable.min.js"></script>
28
30
  ```
@@ -35,9 +37,11 @@ $('table').basictable();
35
37
 
36
38
  ### Vanilla JS
37
39
 
38
- Include the basictable library in the `<head>` of your page.
40
+ Include the CSS and basictable library in the `<head>` of your page.
39
41
 
40
42
  ```
43
+ <link rel="stylesheet" type="text/css" href="basictable.min.css" />
44
+
41
45
  <script type="text/javascript" src="basictable.min.js"></script>
42
46
  ```
43
47
 
package/dist/js/basictable.js CHANGED
@@ -1,181 +1,4 @@
1
1
  /*
2
2
  * @license Basictable - Vanilla JS | MIT | Jerry Low | https://www.github.com/jerrylow/basictable
3
3
  */
4
- "use strict";
5
-
6
- class basictable {
7
- constructor(tableSel, options = {}) {
8
- const _defaultOptions = {
9
- breakpoint: null,
10
- containerBreakpoint: null,
11
- contentWrap: true,
12
- forceResponsive: true,
13
- noResize: false,
14
- tableWrap: false,
15
- showEmptyCells: false,
16
- header: true
17
- };
18
- this.tableSel = tableSel;
19
- this.options = {
20
- ..._defaultOptions,
21
- ...options
22
- };
23
- if (this.options.breakpoint === null && this.options.containerBreakpoint === null) {
24
- this.options.breakpoint = 568;
25
- }
26
- this._getTables();
27
- this._setup();
28
- }
29
- _getTables() {
30
- this.tables = document.querySelectorAll(this.tableSel);
31
- }
32
- _setup() {
33
- this.tables.forEach((table => {
34
- table.setAttribute("data-bt-active", true);
35
- const headings = [];
36
- if (this.options.tableWrap) {
37
- const tableWrapper = document.createElement("div");
38
- tableWrapper.classList.add("bt-wrapper");
39
- table.parentNode.insertBefore(tableWrapper, table);
40
- tableWrapper.appendChild(table);
41
- }
42
- if (this.options.header) {
43
- let format = "";
44
- if (table.querySelectorAll("thead tr th").length) {
45
- format = "thead th";
46
- } else if (table.querySelectorAll("tbody tr th").length) {
47
- format = "tbody tr th";
48
- } else if (table.querySelectorAll("th").length) {
49
- format = "tr:first th";
50
- } else {
51
- format = "tr:first td";
52
- }
53
- table.querySelectorAll(format).forEach((heading => {
54
- const colspan = parseInt(heading.getAttribute("colspan"), 10) || 1;
55
- const parentRow = heading.closest("tr");
56
- const row = [].indexOf.call(parentRow.parentElement.children, parentRow);
57
- if (!headings[row]) {
58
- headings[row] = [];
59
- }
60
- for (let i = 0; i < colspan; i++) {
61
- headings[row].push(heading);
62
- }
63
- }));
64
- table.querySelectorAll("tbody tr").forEach((row => this._setupRow(row, headings)));
65
- table.querySelectorAll("tfoot tr").forEach((row => this._setupRow(row, headings)));
66
- }
67
- if (!this.options.noResize) {
68
- this._check(table);
69
- }
70
- }));
71
- if (!this.options.noResize) {
72
- this._tableResizeEvent = () => this._resize();
73
- window.addEventListener("resize", this._tableResizeEvent);
74
- }
75
- }
76
- _setupRow(row, headings) {
77
- row.querySelectorAll(":scope > *").forEach((cell => {
78
- if ((cell.innerHTML.trim() === "" || cell.innerHTML === "&nbsp;") && this.options.showEmptyCells) {
79
- cell.classList("bt-hide");
80
- } else {
81
- const cellIndex = [].indexOf.call(cell.parentElement.children, cell);
82
- let headingText = "";
83
- for (let j = 0; j < headings.length; j++) {
84
- if (j !== 0) {
85
- headingText += ": ";
86
- }
87
- const heading = headings[j][cellIndex];
88
- headingText += heading.textContent;
89
- }
90
- cell.setAttribute("data-th", headingText);
91
- const cellInnerWrapper = document.createElement("span");
92
- cellInnerWrapper.classList.add("bt-content");
93
- if (this.options.contentWrap && cell.firstChild !== cellInnerWrapper) {
94
- cell.appendChild(cellInnerWrapper);
95
- while (cell.firstChild !== cellInnerWrapper) {
96
- cellInnerWrapper.appendChild(cell.firstChild);
97
- }
98
- }
99
- }
100
- }));
101
- }
102
- _check(table) {
103
- if (!this.options.forceResponsive) {
104
- table.classList.remove("bt");
105
- const tableSize = table.getBoundingClientRect().left + table.offsetWidth;
106
- if (tableSize > table.parentElement.offsetWidth) {
107
- this._start(table);
108
- } else {
109
- this._end(table);
110
- }
111
- } else {
112
- if (this.options.breakpoint !== null && window.innerWidth <= this.options.breakpoint || this.options.containerBreakpoint !== null && table.parentElement.offsetWidth <= this.options.containerBreakpoint) {
113
- this._start(table);
114
- } else {
115
- this._end(table);
116
- }
117
- }
118
- }
119
- _start(table) {
120
- table.classList.add("bt");
121
- if (!this.options.header) {
122
- table.classList.add("bt--no-header");
123
- }
124
- if (this.options.tableWrap) {
125
- table.closest(".bt-wrapper").classList.add("active");
126
- }
127
- }
128
- _end(table) {
129
- table.classList.remove("bt", "bt--no-header");
130
- if (this.options.tableWrap) {
131
- table.closest(".bt-wrapper").classList.remove("active");
132
- }
133
- }
134
- _resize(table) {
135
- this.tables.forEach((table => {
136
- if (table.getAttribute("data-bt-active")) {
137
- this._check(table);
138
- }
139
- }));
140
- }
141
- start() {
142
- this.tables.forEach((table => {
143
- this._start(table);
144
- }));
145
- }
146
- stop() {
147
- this.tables.forEach((table => {
148
- this._end(table);
149
- }));
150
- }
151
- restart() {
152
- this.destroy();
153
- this._getTables();
154
- this._setup();
155
- }
156
- destroy() {
157
- this.tables.forEach((table => {
158
- if (table.getAttribute("data-bt-active")) {
159
- table.classList.remove("bt", "bt--no-header");
160
- table.removeAttribute("data-bt-active");
161
- const cells = table.querySelectorAll("td");
162
- cells.forEach((td => td.removeAttribute("data-th")));
163
- if (this.options.contentWrap) {
164
- cells.forEach((td => {
165
- const content = td.querySelector(".bt-content");
166
- if (content) {
167
- td.innerHTML = content.innerHTML;
168
- }
169
- }));
170
- }
171
- if (this.options.tableWrap) {
172
- table.parentNode.outerHTML = table.parentNode.innerHTML;
173
- }
174
- }
175
- }));
176
- if (!this.options.noResize) {
177
- window.removeEventListener("resize", this._tableResizeEvent);
178
- }
179
- }
180
- }
181
-
4
+ "use strict";class basictable{constructor(tableSel,options={}){const _defaultOptions={breakpoint:null,containerBreakpoint:null,contentWrap:true,forceResponsive:true,noResize:false,tableWrap:false,showEmptyCells:false,header:true};this.tableSel=tableSel;this.options={..._defaultOptions,...options};if(this.options.breakpoint===null&&this.options.containerBreakpoint===null){this.options.breakpoint=568}this._getTables();this._setup()}_getTables(){this.tables=document.querySelectorAll(this.tableSel)}_setup(){this.tables.forEach((table=>{table.setAttribute("data-bt-active",true);const headings=[];if(this.options.tableWrap){const tableWrapper=document.createElement("div");tableWrapper.classList.add("bt-wrapper");table.parentNode.insertBefore(tableWrapper,table);tableWrapper.appendChild(table)}if(this.options.header){let format="";if(table.querySelectorAll("thead tr th").length){format="thead th"}else if(table.querySelectorAll("tbody tr th").length){format="tbody tr th"}else if(table.querySelectorAll("th").length){format="tr:first-of-type th"}else{format="tr:first-of-type td"}table.querySelectorAll(format).forEach((heading=>{const colspan=parseInt(heading.getAttribute("colspan"),10)||1;const parentRow=heading.closest("tr");const row=[].indexOf.call(parentRow.parentElement.children,parentRow);if(!headings[row]){headings[row]=[]}for(let i=0;i<colspan;i++){headings[row].push(heading)}}));table.querySelectorAll("tbody tr").forEach((row=>this._setupRow(row,headings)));table.querySelectorAll("tfoot tr").forEach((row=>this._setupRow(row,headings)))}if(!this.options.noResize){this._check(table)}}));if(!this.options.noResize){this._tableResizeEvent=()=>this._resize();window.addEventListener("resize",this._tableResizeEvent)}}_setupRow(row,headings){row.querySelectorAll(":scope > *").forEach((cell=>{if((cell.innerHTML.trim()===""||cell.innerHTML==="&nbsp;")&&this.options.showEmptyCells){cell.classList("bt-hide")}else{const cellIndex=[].indexOf.call(cell.parentElement.children,cell);let headingText="";for(let j=0;j<headings.length;j++){if(j!==0){headingText+=": "}const heading=headings[j][cellIndex];headingText+=heading.textContent}cell.setAttribute("data-th",headingText);const cellInnerWrapper=document.createElement("span");cellInnerWrapper.classList.add("bt-content");if(this.options.contentWrap&&cell.firstChild!==cellInnerWrapper){cell.appendChild(cellInnerWrapper);while(cell.firstChild!==cellInnerWrapper){cellInnerWrapper.appendChild(cell.firstChild)}}}}))}_getInnerWidth(el){const computedStyle=window.getComputedStyle(el);const border=parseFloat(computedStyle.borderLeft)+parseFloat(computedStyle.borderRight);const padding=parseFloat(computedStyle.paddingLeft)+parseFloat(computedStyle.paddingRight);return parseFloat(computedStyle.width)-(border+padding)}_check(table){if(!this.options.forceResponsive){table.classList.remove("bt");const tableSize=table.offsetWidth;if(tableSize>this._getInnerWidth(table.parentElement)){this._start(table)}else{this._end(table)}}else{if(this.options.breakpoint!==null&&window.innerWidth<=this.options.breakpoint||this.options.containerBreakpoint!==null&&table.parentElement.offsetWidth<=this.options.containerBreakpoint){this._start(table)}else{this._end(table)}}}_start(table){table.classList.add("bt");if(!this.options.header){table.classList.add("bt--no-header")}if(this.options.tableWrap){table.closest(".bt-wrapper").classList.add("active")}}_end(table){table.classList.remove("bt","bt--no-header");if(this.options.tableWrap){table.closest(".bt-wrapper").classList.remove("active")}}_resize(table){this.tables.forEach((table=>{if(table.getAttribute("data-bt-active")){this._check(table)}}))}start(){this.tables.forEach((table=>{this._start(table)}))}stop(){this.tables.forEach((table=>{this._end(table)}))}restart(){this.destroy();this._getTables();this._setup()}destroy(){this.tables.forEach((table=>{if(table.getAttribute("data-bt-active")){table.classList.remove("bt","bt--no-header");table.removeAttribute("data-bt-active");const cells=table.querySelectorAll("td");cells.forEach((td=>td.removeAttribute("data-th")));if(this.options.contentWrap){cells.forEach((td=>{const content=td.querySelector(".bt-content");if(content){td.innerHTML=content.innerHTML}}))}if(this.options.tableWrap){table.parentNode.outerHTML=table.parentNode.innerHTML}}}));if(!this.options.noResize){window.removeEventListener("resize",this._tableResizeEvent)}}}
package/dist/js/basictable.min.js CHANGED
@@ -1,4 +1,4 @@
1
1
  /*
2
2
  * @license Basictable - Vanilla JS | MIT | Jerry Low | https://www.github.com/jerrylow/basictable
3
3
  */
4
- "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)}}
4
+ "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")}))}_getInnerWidth(t){const e=window.getComputedStyle(t),s=parseFloat(e.borderLeft)+parseFloat(e.borderRight),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight);return parseFloat(e.width)-(s+i)}_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.offsetWidth>this._getInnerWidth(t.parentElement)?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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "basictable",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "description": "Basic Table jQuery and Vanilla JS plugin for simple responsive tables.",
5
5
  "main": "jquery.basictable.js",
6
6
  "scripts": {
package/src/js/basictable.js CHANGED
@@ -54,9 +54,9 @@ class basictable { // eslint-disable-line no-unused-vars
54
54
  } else if (table.querySelectorAll('tbody tr th').length) {
55
55
  format = 'tbody tr th'
56
56
  } else if (table.querySelectorAll('th').length) {
57
- format = 'tr:first th'
57
+ format = 'tr:first-of-type th'
58
58
  } else {
59
- format = 'tr:first td'
59
+ format = 'tr:first-of-type td'
60
60
  }
61
61
 
62
62
  table.querySelectorAll(format).forEach(heading => {
@@ -125,14 +125,22 @@ class basictable { // eslint-disable-line no-unused-vars
125
125
  })
126
126
  }
127
127
 
128
+ _getInnerWidth (el) {
129
+ const computedStyle = window.getComputedStyle(el);
130
+ const border = parseFloat(computedStyle.borderLeft) + parseFloat(computedStyle.borderRight);
131
+ const padding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
132
+
133
+ return parseFloat(computedStyle.width) - (border + padding);
134
+ }
135
+
128
136
  _check (table) {
129
137
  // Only change when table is larger than parent if force
130
138
  // responsive is turned off.
131
139
  if (!this.options.forceResponsive) {
132
140
  table.classList.remove('bt')
133
- const tableSize = table.getBoundingClientRect().left + table.offsetWidth
141
+ const tableSize = table.offsetWidth;
134
142
 
135
- if (tableSize > table.parentElement.offsetWidth) {
143
+ if (tableSize > this._getInnerWidth(table.parentElement)) {
136
144
  this._start(table)
137
145
  } else {
138
146
  this._end(table)