Grid SPF: Add table header to menugrid demo

Author: jzaefferer

grid-spf/menugrid.html

@@ -68,6 +68,7 @@
 	});
 	</script>
 	<style>
+	thead td { text-align: center; }
 	thead th {
 		cursor: default;
 	}
@@ -94,6 +95,9 @@
 <h2>Movies! Click headers to sort, use inputs for filtering, pager for paging</h2>
 <table id="movies">
 	<thead>
+		<tr>
+			<td colspan="5" class="ui-widget-header">Developers Grid</td>
+		</tr>
 		<tr>
 			<th width="600" data-property="Name" data-type="string">Name</th>
 			<th width="100" data-property="ReleaseYear" data-type="number">Release Year</th>

grid-spf/menugrid.js

@@ -15,9 +15,9 @@ $.widget("spf.menugrid", {
 		}).append( '<span class="ui-icon-asc ui-icon ui-icon-carat-1-n"></span><span class="ui-icon-desc ui-icon ui-icon-carat-1-s"></span>' );
 
 		var thead = this.element.find( "thead" );
-		var inputs = thead.children()
+		var inputs = thead.children(":has(th)")
 			.clone()
-			.insertAfter( thead )
+			.appendTo( thead )
 			.find( "th" )
 				.removeAttr("tabindex")
 				.each(function() {