Add text-align feature

zachleat · Oct 4, 2023 · 0e9b7cf · 0e9b7cf
1 parent a6e5b28
commit 0e9b7cf
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -29,12 +29,23 @@ A small structural-only zero-dependency Web Component for responsive `<table>` e
 <table-saw zero-padding>
 	<table><!-- … --></table>
 </table-saw>
+
+<!-- Force left-aligned text when stacked -->
+<table-saw text-align>
+	<table><!-- … --></table>
+</table-saw>
+
+<!-- Use your own text-align value when stacked -->
+<table-saw text-align="right">
+	<table><!-- … --></table>
+</table-saw>
 ```
 
 * Use `breakpoint` attribute to set the breakpoint (default:`(max-width: 39.9375em)`).
 * Use `type="container"` attribute to use container queries instead of viewport-based media queries (default: `type="media"`).
 * Use `ratio` attribute to override the small viewport column ratio (default: `1/2`).
 * Use `zero-padding` attribute to remove small viewport padding on table cells.
+* Use `force-align` attribute to force column text alignment at small viewport.
 
 ## Installation
 

diff --git a/demo.html b/demo.html
@@ -10,6 +10,9 @@
 		td {
 			padding: .3em;
 		}
+		.demo-numeric {
+			text-align: right;
+		}
 		</style>
 
 		<!-- tablesaw -->
@@ -113,13 +116,13 @@ <h2>Using media queries (viewport based)</h2>
 
 			<h2>Using container queries</h2>
 			<resize-asaurus>
-				<table-saw breakpoint="(max-width: 30em)" type="container" ratio="1/1" zero-padding>
+				<table-saw breakpoint="(max-width: 30em)" type="container" ratio="1/1" zero-padding text-align>
 					<table>
 						<thead>
 							<tr>
 								<th scope="col">Movie Title</th>
 								<th scope="col">Rank</th>
-								<th scope="col">Year</th>
+								<th scope="col" class="demo-numeric">Year</th>
 								<th scope="col"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
 								<th scope="col">Gross</th>
 							</tr>
@@ -135,63 +138,63 @@ <h2>Using container queries</h2>
 							<tr>
 								<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
 								<td>2</td>
-								<td>1997</td>
+								<td class="demo-numeric">1997</td>
 								<td>88%</td>
 								<td>$2.1B <a href="">Link</a> test</td>
 							</tr>
 							<tr>
 								<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
 								<td>3</td>
-								<td>2012</td>
+								<td class="demo-numeric">2012</td>
 								<td>92%</td>
 								<td>$1.5B</td>
 							</tr>
 							<tr>
 								<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>
 								<td>4</td>
-								<td>2011</td>
+								<td class="demo-numeric">2011</td>
 								<td>96%</td>
 								<td>$1.3B</td>
 							</tr>
 							<tr>
 								<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
 								<td>5</td>
-								<td>2013</td>
+								<td class="demo-numeric">2013</td>
 								<td>89%</td>
 								<td>$1.2B</td>
 							</tr>
 							<tr>
 								<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
 								<td>6</td>
-								<td>2013</td>
+								<td class="demo-numeric">2013</td>
 								<td>78%</td>
 								<td>$1.2B</td>
 							</tr>
 							<tr>
 								<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
 								<td>7</td>
-								<td>2011</td>
+								<td class="demo-numeric">2011</td>
 								<td>36%</td>
 								<td>$1.1B</td>
 							</tr>
 							<tr>
 								<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>
 								<td>8</td>
-								<td>2003</td>
+								<td class="demo-numeric">2003</td>
 								<td>95%</td>
 								<td>$1.1B</td>
 							</tr>
 							<tr>
 								<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
 								<td>9</td>
-								<td>2012</td>
+								<td class="demo-numeric">2012</td>
 								<td>92%</td>
 								<td>$1.1B</td>
 							</tr>
 							<tr>
 								<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
 								<td>10</td>
-								<td>2014</td>
+								<td class="demo-numeric">2014</td>
 								<td>18%</td>
 								<td>$1.0B</td>
 							</tr>

diff --git a/table-saw.js b/table-saw.js
@@ -13,7 +13,8 @@ class Tablesaw extends HTMLElement {
 			type: "type",
 			ratio: "ratio",
 			label: "data-tablesaw-label",
-			zeropad: "zero-padding"
+			zeropad: "zero-padding",
+			forceTextAlign: "text-align"
 		};
 
 		this.defaults = {
@@ -58,6 +59,9 @@ table-saw.${this._identifier} {
 		gap: 0 1em;
 		grid-template-columns: var(--table-saw-ratio, ${this.defaults.ratio});
 	}
+	table-saw.${this._identifier}[${this.attrs.forceTextAlign}] :is(tbody, tfoot) :is(th, td) {
+		text-align: ${this.getAttribute(this.attrs.forceTextAlign) || "left"};
+	}
 	table-saw.${this._identifier}[${this.attrs.zeropad}] :is(tbody, tfoot) :is(th, td) {
 		padding-left: 0;
 		padding-right: 0;