diff --git a/demo.html b/demo.html index 68d8300..7c26fc7 100644 --- a/demo.html +++ b/demo.html @@ -137,7 +137,7 @@

Using container queries

2 1997 88% - $2.1B + $2.1B Link test The Avengers diff --git a/table-saw.js b/table-saw.js index 526863e..828fcfe 100644 --- a/table-saw.js +++ b/table-saw.js @@ -12,6 +12,8 @@ class Tablesaw extends HTMLElement { breakpointBackwardsCompat: "media", type: "type", ratio: "ratio", + label: "data-tablesaw-label", + zeropad: "zero-padding" }; this.defaults = { @@ -20,8 +22,8 @@ class Tablesaw extends HTMLElement { }; this.classes = { - active: "active", - }; + wrap: "tablesaw-wrap" + } this.props = { ratio: "--table-saw-ratio", @@ -47,22 +49,19 @@ table-saw.${this._identifier} { display: block; margin-bottom: 1em; } + table-saw.${this._identifier} :is(tbody, tfoot) :is(th, td):before { + font-weight: bold; + content: attr(${this.attrs.label}); + } table-saw.${this._identifier} :is(tbody, tfoot) :is(th, td) { display: grid; gap: 0 1em; grid-template-columns: var(--table-saw-ratio, ${this.defaults.ratio}); } - table-saw.${this._identifier}[zero-padding] :is(tbody, tfoot) :is(th, td) { + table-saw.${this._identifier}[${this.attrs.zeropad}] :is(tbody, tfoot) :is(th, td) { padding-left: 0; padding-right: 0; } - - table-saw.${this._identifier} .table-saw-label { - display: none; - } - table-saw.${this._identifier} .table-saw-label { - display: revert !important; - } }`; } @@ -105,20 +104,19 @@ table-saw.${this._identifier} { return; } - let nodes = []; - for(let label of labels) { - let l = document.createElement("b"); - l.classList.add("table-saw-label"); - l.setAttribute("aria-hidden", true); - l.style.display = "none"; // defensive in case the stylesheet insertion fails - l.innerText = label; - - nodes.push(l); - } - let cells = this.querySelectorAll("tbody td"); for(let cell of cells) { - cell.prepend(nodes[cell.cellIndex].cloneNode(true)); + cell.setAttribute(this.attrs.label, labels[cell.cellIndex]); + + // wrap if this cell has child nodes for correct grid alignment + if(cell.firstElementChild) { + let wrapper = document.createElement("div"); + wrapper.classList.add(this.classes.wrap); + while(cell.firstChild) { + wrapper.appendChild(cell.firstChild); + } + cell.appendChild(wrapper); + } } }