├── .gitignore
├── package.json
├── LICENSE
├── README.md
├── table-saw.js
└── demo.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@zachleat/table-saw",
 3 |   "version": "1.0.7",
 4 |   "description": "A small web component for responsive <table> elements.",
 5 |   "main": "table-saw.js",
 6 |   "scripts": {
 7 |     "start": "npx http-server ."
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/zachleat/table-saw.git"
12 |   },
13 |   "license": "MIT",
14 |   "publishConfig": {
15 |     "access": "public"
16 |   },
17 |   "bugs": {
18 |     "url": "https://github.com/zachleat/table-saw/issues"
19 |   },
20 |   "author": {
21 |     "name": "Zach Leatherman",
22 |     "email": "zachleatherman@gmail.com",
23 |     "url": "https://zachleat.com/"
24 |   },
25 |   "homepage": "https://github.com/zachleat/table-saw#readme"
26 | }
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Zach Leatherman @zachleat
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # `table-saw`
 2 | 
 3 | A small structural-only zero-dependency Web Component for responsive `<table>` elements. Heavily inspired by [Filament Group’s Tablesaw Stack jQuery plugin](https://github.com/filamentgroup/tablesaw).
 4 | 
 5 | ## [Demo](https://zachleat.github.io/table-saw/demo.html)
 6 | 
 7 | ## Examples
 8 | 
 9 | ```html
10 | <!-- Note: requires `type="module"` -->
11 | <script type="module" src="table-saw.js"></script>
12 | 
13 | <!-- stacks below 640px viewport -->
14 | <table-saw>
15 | 	<table><!-- some HTML omitted for brevity --></table>
16 | </table-saw>
17 | 
18 | <!-- stacks below 400px viewport -->
19 | <table-saw breakpoint="(max-width: 24.9375em)">
20 | 	<table><!-- … --></table>
21 | </table-saw>
22 | 
23 | <!-- stack columns are 50% and 50% width -->
24 | <table-saw ratio="1/1">
25 | 	<table><!-- … --></table>
26 | </table-saw>
27 | 
28 | <!-- Remove left/right padding on table cells when stacked -->
29 | <table-saw zero-padding>
30 | 	<table><!-- … --></table>
31 | </table-saw>
32 | 
33 | <!-- Force left-aligned text when stacked -->
34 | <table-saw text-align>
35 | 	<table><!-- … --></table>
36 | </table-saw>
37 | 
38 | <!-- Use your own text-align value when stacked -->
39 | <table-saw text-align="right">
40 | 	<table><!-- … --></table>
41 | </table-saw>
42 | ```
43 | 
44 | * Use `breakpoint` attribute to set the breakpoint (default:`(max-width: 39.9375em)`).
45 | * Use `type="container"` attribute to use container queries instead of viewport-based media queries (default: `type="media"`).
46 | * Use `ratio` attribute to override the small viewport column ratio (default: `1/2`).
47 | * Use `zero-padding` attribute to remove small viewport padding on table cells.
48 | * Use `text-align` attribute to force column text alignment at small viewport.
49 | 
50 | ## Installation
51 | 
52 | You have a few options (choose one of these):
53 | 
54 | 1. Install via [npm](https://www.npmjs.com/package/@zachleat/table-saw): `npm install @zachleat/table-saw`
55 | 1. [Download the source manually from GitHub](https://github.com/zachleat/table-saw/tags) into your project.
56 | 1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
57 | 
58 | ### Usage
59 | 
60 | Make sure you include the `<script>` in your project (choose one of these):
61 | 
62 | 
63 | ```html
64 | <!-- Host yourself -->
65 | <script type="module" src="table-saw.js"></script>
66 | ```
67 | 
68 | ```html
69 | <!-- 3rd party CDN, not recommended for production use -->
70 | <script type="module" src="https://www.unpkg.com/@zachleat/table-saw@1.0.2/table-saw.js"></script>
71 | ```
72 | 
73 | ```html
74 | <!-- 3rd party CDN, not recommended for production use -->
75 | <script type="module" src="https://esm.sh/@zachleat/table-saw@1.0.2"></script>
76 | ```
77 | 
78 | ## Features
79 | 
80 | * Supports one or many `<table>` child elements.
81 | * Works with viewport media queries or container queries.
82 | * Uses CSS grid for small viewport alignment.
83 | * Falls back to regular table before or without JavaScript.
84 | * Cuts the mustard on [`CSSStyleSheet.prototype.replaceSync`](https://caniuse.com/mdn-api_cssstylesheet_replacesync)
85 | 


--------------------------------------------------------------------------------
/table-saw.js:
--------------------------------------------------------------------------------
  1 | class Tablesaw extends HTMLElement {
  2 | 	static dupes = {};
  3 | 
  4 | 	constructor() {
  5 | 		super();
  6 | 
  7 | 		this.autoOffset = 50;
  8 | 		this._needsStylesheet = true;
  9 | 
 10 | 		this.attrs = {
 11 | 			breakpoint: "breakpoint",
 12 | 			breakpointBackwardsCompat: "media",
 13 | 			type: "type",
 14 | 			ratio: "ratio",
 15 | 			label: "data-tablesaw-label",
 16 | 			zeropad: "zero-padding",
 17 | 			forceTextAlign: "text-align"
 18 | 		};
 19 | 
 20 | 		this.defaults = {
 21 | 			breakpoint: '(max-width: 39.9375em)', // same as Filament Group’s Tablesaw
 22 | 			ratio: '1fr 2fr',
 23 | 		};
 24 | 
 25 | 		this.classes = {
 26 | 			wrap: "tablesaw-wrap"
 27 | 		}
 28 | 
 29 | 		this.props = {
 30 | 			ratio: "--table-saw-ratio",
 31 | 			bold: "--table-saw-header-bold",
 32 | 		};
 33 | 	}
 34 | 
 35 | 	generateCss(breakpoint, type) {
 36 | 		return `
 37 | table-saw.${this._id} {
 38 | 	display: block;
 39 | 	${type === "container" ? "container-type: inline-size;" : ""}
 40 | }
 41 | 
 42 | @${type} ${breakpoint} {
 43 | 	table-saw.${this._id} thead :is(th, td) {
 44 | 		position: absolute;
 45 | 		height: 1px;
 46 | 		width: 1px;
 47 | 		overflow: hidden;
 48 | 		clip: rect(1px, 1px, 1px, 1px);
 49 | 	}
 50 | 	table-saw.${this._id} :is(tbody, tfoot) tr {
 51 | 		display: block;
 52 | 	}
 53 | 	table-saw.${this._id} :is(tbody, tfoot) :is(th, td):before {
 54 | 		font-weight: var(${this.props.bold});
 55 | 		content: attr(${this.attrs.label});
 56 | 	}
 57 | 	table-saw.${this._id} :is(tbody, tfoot) :is(th, td) {
 58 | 		display: grid;
 59 | 		gap: 0 1em;
 60 | 		grid-template-columns: var(${this.props.ratio}, ${this.defaults.ratio});
 61 | 	}
 62 | 	table-saw.${this._id}[${this.attrs.forceTextAlign}] :is(tbody, tfoot) :is(th, td) {
 63 | 		text-align: ${this.getAttribute(this.attrs.forceTextAlign) || "left"};
 64 | 	}
 65 | 	table-saw.${this._id}[${this.attrs.zeropad}] :is(tbody, tfoot) :is(th, td) {
 66 | 		padding-left: 0;
 67 | 		padding-right: 0;
 68 | 	}
 69 | }`;
 70 | 	}
 71 | 
 72 | 	connectedCallback() {
 73 | 		// Cut-the-mustard
 74 | 		// https://caniuse.com/mdn-api_cssstylesheet_replacesync
 75 | 		if(!("replaceSync" in CSSStyleSheet.prototype)) {
 76 | 			return;
 77 | 		}
 78 | 
 79 | 		this.addHeaders();
 80 | 		this.setRatio();
 81 | 
 82 | 		if(!this._needsStylesheet) {
 83 | 			return;
 84 | 		}
 85 | 
 86 | 		let sheet = new CSSStyleSheet();
 87 | 		let breakpoint = this.getAttribute(this.attrs.breakpoint) || this.getAttribute(this.attrs.breakpointBackwardsCompat) || this.defaults.breakpoint;
 88 | 		let type = this.getAttribute(this.attrs.type) || "media";
 89 | 
 90 | 		this._id = `ts_${type.slice(0, 1)}${breakpoint.replace(/[^a-z0-9]/gi, "_")}`;
 91 | 		this.classList.add(this._id);
 92 | 
 93 | 		if(!Tablesaw.dupes[this._id]) {
 94 | 			let css = this.generateCss(breakpoint, type);
 95 | 			sheet.replaceSync(css);
 96 | 
 97 | 			let root = this.getRootNode();
 98 | 			root.adoptedStyleSheets.push(sheet);
 99 | 
100 | 			// only add to global de-dupe if not a shadow root
101 | 			if(root.host && root !== root.host.shadowRoot) {
102 | 				Tablesaw.dupes[this._id] = true;
103 | 			}
104 | 		}
105 | 	}
106 | 
107 | 	addHeaders() {
108 | 		let headerCells = this.querySelectorAll("thead th");
109 | 		let labels = Array.from(headerCells).map((cell, index) => {
110 | 			// Set headers to be bold (if headers are bold)
111 | 			if(index === 0) {
112 | 				let styles = window.getComputedStyle(cell);
113 | 				if(styles) {
114 | 					// Copy other styles?
115 | 					let bold = styles.getPropertyValue("font-weight");
116 | 					this.setBold(bold);
117 | 				}
118 | 			}
119 | 
120 | 			let label = cell.innerText.trim();
121 | 			if (label === "") {
122 | 				label = cell.textContent.trim();
123 | 			}
124 | 
125 | 			return label;
126 | 		});
127 | 
128 | 		if(labels.length === 0) {
129 | 			this._needsStylesheet = false;
130 | 			console.error("No `<th>` elements found:", this);
131 | 			return;
132 | 		}
133 | 
134 | 		let cells = this.querySelectorAll("tbody :is(td, th)");
135 | 		for(let cell of cells) {
136 | 			if(!labels[cell.cellIndex]) {
137 | 				continue;
138 | 			}
139 | 
140 | 			cell.setAttribute(this.attrs.label, labels[cell.cellIndex]);
141 | 
142 | 			let nodeCount = 0;
143 | 			for(let n of cell.childNodes) {
144 | 				// text or element node
145 | 				if(n.nodeType === 3 || n.nodeType === 1) {
146 | 					nodeCount++;
147 | 				}
148 | 			}
149 | 
150 | 			// wrap if this cell has child nodes for correct grid alignment
151 | 			if(nodeCount > 1) {
152 | 				let wrapper = document.createElement("div");
153 | 				wrapper.classList.add(this.classes.wrap);
154 | 				while(cell.firstChild) {
155 | 					wrapper.appendChild(cell.firstChild);
156 | 				}
157 | 				cell.appendChild(wrapper);
158 | 			}
159 | 		}
160 | 	}
161 | 
162 | 	setBold(bold) {
163 | 		if(bold || bold === "") {
164 | 			this.style.setProperty(this.props.bold, bold);
165 | 		}
166 | 	}
167 | 
168 | 	setRatio() {
169 | 		let ratio = this.getAttribute(this.attrs.ratio);
170 | 		if(ratio) {
171 | 			let ratioString = ratio.split("/").join("fr ") + "fr";
172 | 			this.style.setProperty(this.props.ratio, ratioString);
173 | 		}
174 | 	}
175 | }
176 | 
177 | if("customElements" in window) {
178 | 	window.customElements.define("table-saw", Tablesaw);
179 | }
180 | 
181 | export { Tablesaw };
182 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8" />
  5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 | 		<meta name="description" content="" />
  7 | 		<title>table-saw Web Component Demo</title>
  8 | 		<style>
  9 | 		/* Demo styles */
 10 | 		td {
 11 | 			padding: .3em;
 12 | 		}
 13 | 		.demo-numeric {
 14 | 			text-align: right;
 15 | 		}
 16 | 		resize-asaurus {
 17 | 			outline: 2px solid #ddd;
 18 | 			background-color: #f2f2f2;
 19 | 		}
 20 | 		</style>
 21 | 
 22 | 		<!-- tablesaw -->
 23 | 		<script type="module" src="table-saw.js"></script>
 24 | 
 25 | 		<!-- resizer via 3rd party CDN, not recommended for production use -->
 26 | 		<script type="module" src="https://esm.sh/@zachleat/resizeasaurus@4.0.0"></script>
 27 | 	</head>
 28 | 	<body>
 29 | 		<header>
 30 | 			<h1>table-saw Web Component Demo</h1>
 31 | 			<p>Source code available at <a href="https://github.com/zachleat/table-saw/"><code>https://github.com/zachleat/table-saw/</code></a></p>
 32 | 		</header>
 33 | 		<main>
 34 | 			<h2>Using media queries (viewport based)</h2>
 35 | 			<table-saw breakpoint="(max-width: 30em)" ratio="1/1" zero-padding>
 36 | 				<table>
 37 | 					<thead>
 38 | 						<tr>
 39 | 							<th scope="col">Movie Title</th>
 40 | 							<th scope="col">Rank</th>
 41 | 							<th scope="col">Year</th>
 42 | 							<th scope="col"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
 43 | 							<th scope="col">Gross</th>
 44 | 						</tr>
 45 | 					</thead>
 46 | 					<tbody>
 47 | 						<tr>
 48 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
 49 | 							<td>1</td>
 50 | 							<td>2009</td>
 51 | 							<td>83%</td>
 52 | 							<td>$2.7B</td>
 53 | 						</tr>
 54 | 						<tr>
 55 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
 56 | 							<td>2</td>
 57 | 							<td>1997</td>
 58 | 							<td>88%</td>
 59 | 							<td>$2.1B</td>
 60 | 						</tr>
 61 | 						<tr>
 62 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
 63 | 							<td>3</td>
 64 | 							<td>2012</td>
 65 | 							<td>92%</td>
 66 | 							<td>$1.5B</td>
 67 | 						</tr>
 68 | 						<tr>
 69 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
 70 | 							<td>4</td>
 71 | 							<td>2011</td>
 72 | 							<td>96%</td>
 73 | 							<td>$1.3B</td>
 74 | 						</tr>
 75 | 						<tr>
 76 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
 77 | 							<td>5</td>
 78 | 							<td>2013</td>
 79 | 							<td>89%</td>
 80 | 							<td>$1.2B</td>
 81 | 						</tr>
 82 | 						<tr>
 83 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
 84 | 							<td>6</td>
 85 | 							<td>2013</td>
 86 | 							<td>78%</td>
 87 | 							<td>$1.2B</td>
 88 | 						</tr>
 89 | 						<tr>
 90 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
 91 | 							<td>7</td>
 92 | 							<td>2011</td>
 93 | 							<td>36%</td>
 94 | 							<td>$1.1B</td>
 95 | 						</tr>
 96 | 						<tr>
 97 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
 98 | 							<td>8</td>
 99 | 							<td>2003</td>
100 | 							<td>95%</td>
101 | 							<td>$1.1B</td>
102 | 						</tr>
103 | 						<tr>
104 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
105 | 							<td>9</td>
106 | 							<td>2012</td>
107 | 							<td>92%</td>
108 | 							<td>$1.1B</td>
109 | 						</tr>
110 | 						<tr>
111 | 							<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
112 | 							<td>10</td>
113 | 							<td>2014</td>
114 | 							<td>18%</td>
115 | 							<td>$1.0B</td>
116 | 						</tr>
117 | 					</tbody>
118 | 				</table>
119 | 			</table-saw>
120 | 
121 | 			<h2>Using container queries</h2>
122 | 			<resize-asaurus>
123 | 				<table-saw breakpoint="(max-width: 30em)" type="container" ratio="1/1" zero-padding text-align>
124 | 					<table>
125 | 						<thead>
126 | 							<tr>
127 | 								<th scope="col">Movie Title</th>
128 | 								<th scope="col">Rank</th>
129 | 								<th scope="col" class="demo-numeric">Year</th>
130 | 								<th scope="col"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
131 | 								<th scope="col">Gross</th>
132 | 							</tr>
133 | 						</thead>
134 | 						<tbody>
135 | 							<tr>
136 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
137 | 								<td>1</td>
138 | 								<td>2009</td>
139 | 								<td>83%</td>
140 | 								<td>$2.7B</td>
141 | 							</tr>
142 | 							<tr>
143 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
144 | 								<td>2</td>
145 | 								<td class="demo-numeric">1997</td>
146 | 								<td><!-- test -->88%</td>
147 | 								<td>$2.1B <a href="">Link</a> test</td>
148 | 							</tr>
149 | 							<tr>
150 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
151 | 								<td>3</td>
152 | 								<td class="demo-numeric">2012</td>
153 | 								<td><!-- test --><span>92%</span></td>
154 | 								<td>$1.5B</td>
155 | 							</tr>
156 | 							<tr>
157 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
158 | 								<td>4</td>
159 | 								<td class="demo-numeric">2011</td>
160 | 								<td>96%</td>
161 | 								<td>$1.3B</td>
162 | 							</tr>
163 | 							<tr>
164 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
165 | 								<td>5</td>
166 | 								<td class="demo-numeric">2013</td>
167 | 								<td>89%</td>
168 | 								<td>$1.2B</td>
169 | 							</tr>
170 | 							<tr>
171 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
172 | 								<td>6</td>
173 | 								<td class="demo-numeric">2013</td>
174 | 								<td>78%</td>
175 | 								<td>$1.2B</td>
176 | 							</tr>
177 | 							<tr>
178 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
179 | 								<td>7</td>
180 | 								<td class="demo-numeric">2011</td>
181 | 								<td>36%</td>
182 | 								<td>$1.1B</td>
183 | 							</tr>
184 | 							<tr>
185 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
186 | 								<td>8</td>
187 | 								<td class="demo-numeric">2003</td>
188 | 								<td>95%</td>
189 | 								<td>$1.1B</td>
190 | 							</tr>
191 | 							<tr>
192 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
193 | 								<td>9</td>
194 | 								<td class="demo-numeric">2012</td>
195 | 								<td>92%</td>
196 | 								<td>$1.1B</td>
197 | 							</tr>
198 | 							<tr>
199 | 								<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
200 | 								<td>10</td>
201 | 								<td class="demo-numeric">2014</td>
202 | 								<td>18%</td>
203 | 								<td>$1.0B</td>
204 | 							</tr>
205 | 						</tbody>
206 | 					</table>
207 | 				</table-saw>
208 | 			</resize-asaurus>
209 | 
210 | 			<h2>Multiple child tables in one &lt;table-saw&gt;</h2>
211 | 			<table-saw breakpoint="(max-width: 43.6875em)">
212 | 				<h3>First table</h3>
213 | 				<table>
214 | 					<thead>
215 | 						<tr>
216 | 							<th scope="col">Pricing Strategies</th>
217 | 							<th scope="col">Hourly-based</th>
218 | 							<th scope="col">Project-based</th>
219 | 							<th scope="col">Value-based</th>
220 | 							<th scope="col">Retainer-based</th>
221 | 							<th scope="col">Tier-based</th>
222 | 						</tr>
223 | 					</thead>
224 | 					<tbody>
225 | 						<tr>
226 | 							<td><strong>Overview</strong></td>
227 | 							<td>Pricing per hour.</td>
228 | 							<td>Fixed price per project.</td>
229 | 							<td>Fixed price based on value delivered.</td>
230 | 							<td>Fixed price for a set number of hours.</td>
231 | 							<td>Fixed price packages at different price points.</td>
232 | 						</tr>
233 | 						<tr>
234 | 							<td><strong>Benefits</strong></td>
235 | 							<td>Straightforward and easy to calculate.</td>
236 | 							<td>Ensures budget predictability, and encourages efficiency.</td>
237 | 							<td>
238 | 								Higher earnings when the impact is significant. Emphasizes
239 | 								results.
240 | 							</td>
241 | 							<td>
242 | 								Ensures a steady and predictable income stream. Builds longterm
243 | 								business relationships.
244 | 							</td>
245 | 							<td>
246 | 								Caters to various client needs and budgets. Simplifies clients’
247 | 								decision-making.
248 | 							</td>
249 | 						</tr>
250 | 						<tr>
251 | 							<td><strong>Challenges</strong></td>
252 | 							<td>
253 | 								May incentivize slower work. Emphasizes hours worked rather than
254 | 								value of work.
255 | 							</td>
256 | 							<td>
257 | 								Unforeseen changes or requests can lead to scope creep, and
258 | 								threaten profitability.
259 | 							</td>
260 | 							<td>
261 | 								Dependent on ability to communicate the value delivered
262 | 								effectively.
263 | 							</td>
264 | 							<td>Dependent on client’s trust.</td>
265 | 							<td>
266 | 								Lack of transparency in terms and pricing may cause confusion.
267 | 							</td>
268 | 						</tr>
269 | 						<tr>
270 | 							<td><strong>Ideal projects or clients</strong></td>
271 | 							<td>
272 | 								Small projects, or projects subject to change due to timelines
273 | 								or requirements.
274 | 							</td>
275 | 							<td>Projects with clear expectations and scope.</td>
276 | 							<td>Clients with clear pain points and business goals.</td>
277 | 							<td>Repeat and ongoing client projects.</td>
278 | 							<td>Client roster with widely varying needs and budgets.</td>
279 | 						</tr>
280 | 					</tbody>
281 | 				</table>
282 | 				<h3>Second table</h3>
283 | 				<table>
284 | 					<thead>
285 | 						<tr>
286 | 							<th scope="col">Pricing Strategies</th>
287 | 							<th scope="col">Hourly-based</th>
288 | 							<th scope="col">Project-based</th>
289 | 							<th scope="col">Value-based</th>
290 | 							<th scope="col">Retainer-based</th>
291 | 							<th scope="col">Tier-based</th>
292 | 						</tr>
293 | 					</thead>
294 | 					<tbody>
295 | 						<tr>
296 | 							<td><strong>Overview</strong></td>
297 | 							<td>Pricing per hour.</td>
298 | 							<td>Fixed price per project.</td>
299 | 							<td>Fixed price based on value delivered.</td>
300 | 							<td>Fixed price for a set number of hours.</td>
301 | 							<td>Fixed price packages at different price points.</td>
302 | 						</tr>
303 | 						<tr>
304 | 							<td><strong>Benefits</strong></td>
305 | 							<td>Straightforward and easy to calculate.</td>
306 | 							<td>Ensures budget predictability, and encourages efficiency.</td>
307 | 							<td>
308 | 								Higher earnings when the impact is significant. Emphasizes
309 | 								results.
310 | 							</td>
311 | 							<td>
312 | 								Ensures a steady and predictable income stream. Builds longterm
313 | 								business relationships.
314 | 							</td>
315 | 							<td>
316 | 								Caters to various client needs and budgets. Simplifies clients’
317 | 								decision-making.
318 | 							</td>
319 | 						</tr>
320 | 						<tr>
321 | 							<td><strong>Challenges</strong></td>
322 | 							<td>
323 | 								May incentivize slower work. Emphasizes hours worked rather than
324 | 								value of work.
325 | 							</td>
326 | 							<td>
327 | 								Unforeseen changes or requests can lead to scope creep, and
328 | 								threaten profitability.
329 | 							</td>
330 | 							<td>
331 | 								Dependent on ability to communicate the value delivered
332 | 								effectively.
333 | 							</td>
334 | 							<td>Dependent on client’s trust.</td>
335 | 							<td>
336 | 								Lack of transparency in terms and pricing may cause confusion.
337 | 							</td>
338 | 						</tr>
339 | 						<tr>
340 | 							<td><strong>Ideal projects or clients</strong></td>
341 | 							<td>
342 | 								Small projects, or projects subject to change due to timelines
343 | 								or requirements.
344 | 							</td>
345 | 							<td>Projects with clear expectations and scope.</td>
346 | 							<td>Clients with clear pain points and business goals.</td>
347 | 							<td>Repeat and ongoing client projects.</td>
348 | 							<td>Client roster with widely varying needs and budgets.</td>
349 | 						</tr>
350 | 					</tbody>
351 | 				</table>
352 | 			</table-saw>
353 | 
354 | 			<h2>Console logs an error when missing `th` elements</h2>
355 | 			<table-saw breakpoint="(max-width: 43.6875em)">
356 | 				<table>
357 | 					<thead>
358 | 						<tr>
359 | 							<td>Pricing Strategies</td>
360 | 							<td>Hourly-based</td>
361 | 							<td>Project-based</td>
362 | 						</tr>
363 | 					</thead>
364 | 					<tbody>
365 | 						<tr>
366 | 							<td><strong>Ideal projects or clients</strong></td>
367 | 							<td>
368 | 								Small projects, or projects subject to change due to timelines
369 | 								or requirements.
370 | 							</td>
371 | 							<td>Projects with clear expectations and scope.</td>
372 | 						</tr>
373 | 					</tbody>
374 | 				</table>
375 | 			</table-saw>
376 | 
377 | 			<h2>Hidden in details</h2>
378 | 			<details>
379 | 				<summary>Expand to show</summary>
380 | 				<table-saw breakpoint="(max-width: 30em)">
381 | 					<table>
382 | 						<thead>
383 | 							<tr>
384 | 								<th>Pricing Strategies</th>
385 | 								<th>Hourly-based</th>
386 | 								<th>Project-based</th>
387 | 							</tr>
388 | 						</thead>
389 | 						<tbody>
390 | 							<tr>
391 | 								<td><strong>Ideal projects or clients</strong></td>
392 | 								<td>
393 | 									Small projects, or projects subject to change due to timelines
394 | 									or requirements.
395 | 								</td>
396 | 								<td>Projects with clear expectations and scope.</td>
397 | 							</tr>
398 | 						</tbody>
399 | 					</table>
400 | 				</table-saw>
401 | 			</details>
402 | 
403 | 			<h2>Shadow root</h2>
404 | 			<script type="module">
405 | 			const host = document.querySelector("#myHost");
406 | 			const shadow = host.attachShadow({ mode: "open" });
407 | 			const div = document.createElement("div");
408 | 			div.innerHTML = `<table-saw breakpoint="(max-width: 30em)">
409 | 				<table>
410 | 					<thead>
411 | 						<tr>
412 | 							<th>Pricing Strategies</th>
413 | 							<th>Hourly-based</th>
414 | 							<th>Project-based</th>
415 | 						</tr>
416 | 					</thead>
417 | 					<tbody>
418 | 						<tr>
419 | 							<td><strong>Ideal projects or clients</strong></td>
420 | 							<td>
421 | 								Small projects, or projects subject to change due to timelines
422 | 								or requirements.
423 | 							</td>
424 | 							<td>Projects with clear expectations and scope.</td>
425 | 						</tr>
426 | 					</tbody>
427 | 				</table>
428 | 			</table-saw>`;
429 | 			shadow.appendChild(div);
430 | 			</script>
431 | 			<div id="myHost"></div>
432 | 		</main>
433 | 	</body>
434 | </html>
435 | 


--------------------------------------------------------------------------------