Added headerClass, class, footerClass to sortable-column definition t…

…o allow directly setting CSS classes.
stevenrskelton · Mar 18, 2015 · c320d16 · c320d16
1 parent 8821760
commit c320d16
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 6 deletions.
diff --git a/examples/css.html b/examples/css.html
@@ -43,14 +43,28 @@
 			width: 100px;
 			text-align: right;
 		}
+		::shadow .bold {
+			font-weight: bold !important;
+		}
+		::shadow .red {
+			color: DarkRed !important;
+		}
+		::shadow .blue {
+			color: DarkBlue;
+		}
+		::shadow .redBG {
+			background-color: DarkRed !important;
+		}
 	</style>
 </head>
 <body unresolved is="project-docs">
 
 	<h1>CSS</h1>
 
+	<h2>Built-in CSS Classes</h2>
+
 	All columns have CSS classes based on position and their data column's name.<br>
-	Individual columns can be styled using CSS.
+	Individual columns can be styled using CSS via built-in css classes.
 
 	<template is="auto-binding">
 
@@ -94,7 +108,7 @@ <h1>CSS</h1>
 
 	<p>
 
-	<h2>CSS Classes</h2>
+	<h3>CSS Classes</h3>
 
 	<table class="docs">
 		<thead>
@@ -224,5 +238,54 @@ <h2>Info on Column <code>alice</code></h2>
 		});
 		</script>
 	</polymer-element>
+
+	<h2>User Specified CSS Classes</h2>
+
+	Sometimes the column name might not be the easiest way to specify a specific column's CSS.  Column definitions allow header, row, and footer CSS 
+	classes to be set using <code>headerClass</code>, <code>class</code>, <code>footerClass</code> respectivily.
+
+	<p>
+
+	<prism-js language="css" escape="true">	.bold  { font-weight: bold;         }
+	.red   { color: DarkRed;            }
+	.blue  { color: DarkBlue;           }
+	.redRB { background-color: DarkRed; }</prism-js>
+
+	<prism-js language="markup" escape="true">	<sortable-table>
+		<sortable-column>Fruit</sortable-column>
+		<sortable-column headerClass="red bold">Alice</sortable-column>
+		<sortable-column class="blue bold">Bill</sortable-column>
+		<sortable-column footerClass="redBG">Casey</sortable-column>
+	</sortable-table></prism-js>
+
+	<sortable-table id="stable" class="default">
+		<sortable-column cellTemplate="fruitsTemplate" footerTemplate="footerText">Fruit</sortable-column>
+		<sortable-column headerClass="red bold">Alice</sortable-column>
+		<sortable-column class="blue bold">Bill</sortable-column>
+		<sortable-column footerClass="redBG">Casey</sortable-column>
+
+		<template id="fruitsTemplate">
+			<td style="text-align:left;vertical-align:middle;width:250px;">
+				<fruit-icon fruit="{{value}}"></fruit-icon>
+				{{value}}
+			</td>
+		</template>
+		<template id="footerText">
+			<td>Fruits!</td>
+		</template>
+
+		[
+			['apple', 4, 10, 2 ],
+			['banana', 0, 4, 0 ],
+			['grape', 2, 3, 5 ],
+			['pear', 4, 2, 8 ],
+			['strawberry', 0, 14, 0 ],
+			['apple', 5, 6, 4 ],
+			['banana', 3, 9, 2 ],
+			['grape', 8, 3, 0 ],
+			['pear', 0, 7, 4 ],
+			['strawberry', 4, 5, 2 ]
+		]
+	</sortable-table>
 </body>
 </html>
diff --git a/examples/index.html b/examples/index.html
@@ -268,12 +268,24 @@ <h3><a name="user-content-columns" class="anchor" href="#columns" aria-hidden="t
 				<td><code>null</code></td>
 				<td><em>See</em> <a href="#column--celltemplate">Column § cellTemplate</a></td>
 			</tr>
+			<tr>
+				<td><code>class</code></td>
+				<td><em>string</em></td>
+				<td><code></code></td>
+				<td>CSS classes for row cells.</td>
+			</tr>
 			<tr>
 				<td><code>datatype</code></td>
 				<td><em>string</em></td>
 				<td><code>null</code></td>
 				<td>Optional specification of type of data in the column.</td>
 			</tr>
+			<tr>
+				<td><code>footerClass</code></td>
+				<td><em>string</em></td>
+				<td><code></code></td>
+				<td>CSS classes for empty footer cell (if rendered)</td>
+			</tr>
 			<tr>
 				<td><code>footerTemplate</code></td>
 				<td><em>string</em></td>
@@ -286,6 +298,12 @@ <h3><a name="user-content-columns" class="anchor" href="#columns" aria-hidden="t
 				<td><code>null</code></td>
 				<td>Single parameter <code>row</code>, return will override any value for property in <code>data</code>, as well as be used for sorting</td>
 			</tr>
+			<tr>
+				<td><code>headerClass</code></td>
+				<td><em>string</em></td>
+				<td><code></code></td>
+				<td>CSS classes for header cell</td>
+			</tr>
 			<tr>
 				<td><code>headerTemplate</code></td>
 				<td><em>string</em></td>

diff --git a/sortable-table.html b/sortable-table.html
@@ -341,7 +341,7 @@
 				<template repeat="{{column,i in columns}}">
 					<template ref="{{column.headerTemplate || headerTemplate}}" bind>
 						<th
-							class="column-{{column.name}} column-{{i}}
+							class="{{column.headerClass}} column-{{column.name}} column-{{i}}
 								{{sortColumn == column.name && sortDescending ? 'sorted-column-desc' : ''}}
 								{{sortColumn == column.name && !sortDescending ? 'sorted-column-asc' : ''}}"
 							draggable="{{!disableColumnMove && !(rowTemplate || rowEditorTemplate)}}"
@@ -414,7 +414,7 @@
 						<template repeat="{{column in columns}}" bind>
 							<template ref="{{column.cellTemplate || cellTemplate}}" bind="{{record.fields[column.name]}}">
 								<td
-									class="column-{{column.name}}
+									class="{{column.class}} column-{{column.name}}
 										{{sortColumn == column.name && sortDescending ? 'sorted-column-desc' : ''}}
 										{{sortColumn == column.name && !sortDescending ? 'sorted-column-asc' : ''}}"
 								>{{value}}</td>
@@ -433,7 +433,7 @@
 					<template repeat="{{column in columns}}">
 						<template bind="{{templateData in data | selectProperty(column, args, forceFooterRefresh)}}">
 							<template ref="{{column.footerTemplate}}" bind="{{templateData}}">
-								<td></td>
+								<td class="{{column.footerClass}}"></td>
 							</template>
 						</template>
 					</template>
@@ -648,7 +648,10 @@
 				datatype: n.getAttribute('datatype'),
 				cellTemplate: n.getAttribute('cellTemplate'),
 				headerTemplate: n.getAttribute('headerTemplate'),
-				footerTemplate: n.getAttribute('footerTemplate')
+				footerTemplate: n.getAttribute('footerTemplate'),
+				headerClass: n.getAttribute('headerClass') || '',
+				class: n.getAttribute('class') || '',
+				footerClass: n.getAttribute('footerClass') || ''
 			};
 		},
 		/**