Sync column header widths with body

Fixes #34
charlespockert · Jul 20, 2015 · b0e4019 · b0e4019
1 parent 6342d00
commit b0e4019
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 87 deletions.
diff --git a/dist/amd/grid/grid.html b/dist/amd/grid/grid.html
@@ -3,7 +3,7 @@
     <div>
         <div class="grid-container" show.bind="!showNoRowsMessage || (showNoRowsMessage && count > 0)">
             <!-- Header table -->
-<!--             <table class="table table-hover table-striped table-responsive grid-header-table">
+            <table class="table table-hover table-striped table-responsive grid-header-table">
                 <thead>
                     <tr if.bind="showColumnFilters">
                         <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
@@ -24,28 +24,9 @@
                     </tr>
                 </thead>
             </table>
- -->            <!-- Content table -->
+            <!-- Content table -->
             <div class="grid-content-container">
                 <table class="table table-hover table-striped table-responsive selectable" show.bind="!showNoRowsMessage || (showNoRowsMessage && count > 0)">
-                <thead>
-                    <tr if.bind="showColumnFilters">
-                        <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
-                            <input if.bind="$column.showFilter" class="form-control" value.bind="$column.filterValue" input.delegate="$parent.updateFilters()"></input>
-                        </th>
-                    </tr>
-                    <tr role="button">
-                        <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
-                            <a if.bind="$column.nosort == false && $parent.sortable" click.trigger="$parent.sortChanged($column.field)">${ $column.heading }</a>
-                            <span if.bind="$column.nosort == true || !$parent.sortable">${ $column.heading }</span>
-                            <svg if.bind="$parent.sorting[$column.field] === 'desc'" height="8" width="10">
-                                <polygon class="grid-sort-arrow" points="0,0 8,0 4,8" />
-                            </svg>
-                            <svg if.bind="$parent.sorting[$column.field] === 'asc'" height="8" width="10">
-                                <polygon class="grid-sort-arrow" points="0,8 8,8 4,0" />
-                            </svg>
-                        </th>
-                    </tr>
-                </thead>
                     <tbody>
                         <tr role="button" click.delegate="$parent.select($item)">
                         </tr>

diff --git a/dist/amd/grid/grid.js b/dist/amd/grid/grid.js
@@ -78,6 +78,7 @@ define(['exports', 'aurelia-framework', './grid-column', 'gooy/aurelia-compiler'
 			this.data = [];
 			this.count = 0;
 			this.unbinding = false;
+			this.scrollBarWidth = 16;
 
 			this.element = element;
 			this.compiler = compiler;
@@ -208,6 +209,8 @@ define(['exports', 'aurelia-framework', './grid-column', 'gooy/aurelia-compiler'
 				this.updatePager();
 
 				this.watchForChanges();
+
+				setTimeout(this.syncColumnHeadersWithColumns.bind(this), 0);
 			}
 		}, {
 			key: 'applyPage',
@@ -409,7 +412,6 @@ define(['exports', 'aurelia-framework', './grid-column', 'gooy/aurelia-compiler'
 		}, {
 			key: 'gridHeightChanged',
 			value: function gridHeightChanged() {
-
 				var cont = this.element.querySelector('.grid-content-container');
 
 				if (this.gridHeight > 0) {
@@ -418,6 +420,32 @@ define(['exports', 'aurelia-framework', './grid-column', 'gooy/aurelia-compiler'
 					cont.removeAttribute('style');
 				}
 			}
+		}, {
+			key: 'syncColumnHeadersWithColumns',
+			value: function syncColumnHeadersWithColumns() {
+				var headers = this.element.querySelectorAll('table>thead>tr:first-child>th');
+				var filters = this.element.querySelectorAll('table>thead>tr:last-child>th');
+
+				var cells = this.element.querySelectorAll('table>tbody>tr:first-child>td');
+
+				for (var i = headers.length - 1; i >= 0; i--) {
+					var header = headers[i];
+					var filter = filters[i];
+					var cell = cells[i];
+					var overflow = this.isBodyOverflowing();
+
+					var tgtWidth = cell.offsetWidth + (i == headers.length - 1 && overflow ? this.scrollBarWidth : 0);
+
+					header.setAttribute('style', 'width: ' + tgtWidth + 'px');
+					filter.setAttribute('style', 'width: ' + tgtWidth + 'px');
+				};
+			}
+		}, {
+			key: 'isBodyOverflowing',
+			value: function isBodyOverflowing() {
+				var body = this.element.querySelector('.grid-content-container');
+				return body.offsetHeight < body.scrollHeight || body.offsetWidth < body.scrollWidth;
+			}
 		}, {
 			key: 'gridHeight',
 			decorators: [_aureliaFramework.bindable],

diff --git a/dist/commonjs/grid/grid.html b/dist/commonjs/grid/grid.html
@@ -3,7 +3,7 @@
     <div>
         <div class="grid-container" show.bind="!showNoRowsMessage || (showNoRowsMessage && count > 0)">
             <!-- Header table -->
-<!--             <table class="table table-hover table-striped table-responsive grid-header-table">
+            <table class="table table-hover table-striped table-responsive grid-header-table">
                 <thead>
                     <tr if.bind="showColumnFilters">
                         <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
@@ -24,28 +24,9 @@
                     </tr>
                 </thead>
             </table>
- -->            <!-- Content table -->
+            <!-- Content table -->
             <div class="grid-content-container">
                 <table class="table table-hover table-striped table-responsive selectable" show.bind="!showNoRowsMessage || (showNoRowsMessage && count > 0)">
-                <thead>
-                    <tr if.bind="showColumnFilters">
-                        <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
-                            <input if.bind="$column.showFilter" class="form-control" value.bind="$column.filterValue" input.delegate="$parent.updateFilters()"></input>
-                        </th>
-                    </tr>
-                    <tr role="button">
-                        <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
-                            <a if.bind="$column.nosort == false && $parent.sortable" click.trigger="$parent.sortChanged($column.field)">${ $column.heading }</a>
-                            <span if.bind="$column.nosort == true || !$parent.sortable">${ $column.heading }</span>
-                            <svg if.bind="$parent.sorting[$column.field] === 'desc'" height="8" width="10">
-                                <polygon class="grid-sort-arrow" points="0,0 8,0 4,8" />
-                            </svg>
-                            <svg if.bind="$parent.sorting[$column.field] === 'asc'" height="8" width="10">
-                                <polygon class="grid-sort-arrow" points="0,8 8,8 4,0" />
-                            </svg>
-                        </th>
-                    </tr>
-                </thead>
                     <tbody>
                         <tr role="button" click.delegate="$parent.select($item)">
                         </tr>

diff --git a/dist/commonjs/grid/grid.js b/dist/commonjs/grid/grid.js
@@ -85,6 +85,7 @@ var Grid = (function () {
 		this.data = [];
 		this.count = 0;
 		this.unbinding = false;
+		this.scrollBarWidth = 16;
 
 		this.element = element;
 		this.compiler = compiler;
@@ -215,6 +216,8 @@ var Grid = (function () {
 			this.updatePager();
 
 			this.watchForChanges();
+
+			setTimeout(this.syncColumnHeadersWithColumns.bind(this), 0);
 		}
 	}, {
 		key: 'applyPage',
@@ -416,7 +419,6 @@ var Grid = (function () {
 	}, {
 		key: 'gridHeightChanged',
 		value: function gridHeightChanged() {
-
 			var cont = this.element.querySelector('.grid-content-container');
 
 			if (this.gridHeight > 0) {
@@ -425,6 +427,32 @@ var Grid = (function () {
 				cont.removeAttribute('style');
 			}
 		}
+	}, {
+		key: 'syncColumnHeadersWithColumns',
+		value: function syncColumnHeadersWithColumns() {
+			var headers = this.element.querySelectorAll('table>thead>tr:first-child>th');
+			var filters = this.element.querySelectorAll('table>thead>tr:last-child>th');
+
+			var cells = this.element.querySelectorAll('table>tbody>tr:first-child>td');
+
+			for (var i = headers.length - 1; i >= 0; i--) {
+				var header = headers[i];
+				var filter = filters[i];
+				var cell = cells[i];
+				var overflow = this.isBodyOverflowing();
+
+				var tgtWidth = cell.offsetWidth + (i == headers.length - 1 && overflow ? this.scrollBarWidth : 0);
+
+				header.setAttribute('style', 'width: ' + tgtWidth + 'px');
+				filter.setAttribute('style', 'width: ' + tgtWidth + 'px');
+			};
+		}
+	}, {
+		key: 'isBodyOverflowing',
+		value: function isBodyOverflowing() {
+			var body = this.element.querySelector('.grid-content-container');
+			return body.offsetHeight < body.scrollHeight || body.offsetWidth < body.scrollWidth;
+		}
 	}, {
 		key: 'gridHeight',
 		decorators: [_aureliaFramework.bindable],

diff --git a/dist/es6/grid/grid.html b/dist/es6/grid/grid.html
@@ -3,7 +3,7 @@
     <div>
         <div class="grid-container" show.bind="!showNoRowsMessage || (showNoRowsMessage && count > 0)">
             <!-- Header table -->
-<!--             <table class="table table-hover table-striped table-responsive grid-header-table">
+            <table class="table table-hover table-striped table-responsive grid-header-table">
                 <thead>
                     <tr if.bind="showColumnFilters">
                         <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
@@ -24,28 +24,9 @@
                     </tr>
                 </thead>
             </table>
- -->            <!-- Content table -->
+            <!-- Content table -->
             <div class="grid-content-container">
                 <table class="table table-hover table-striped table-responsive selectable" show.bind="!showNoRowsMessage || (showNoRowsMessage && count > 0)">
-                <thead>
-                    <tr if.bind="showColumnFilters">
-                        <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
-                            <input if.bind="$column.showFilter" class="form-control" value.bind="$column.filterValue" input.delegate="$parent.updateFilters()"></input>
-                        </th>
-                    </tr>
-                    <tr role="button">
-                        <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
-                            <a if.bind="$column.nosort == false && $parent.sortable" click.trigger="$parent.sortChanged($column.field)">${ $column.heading }</a>
-                            <span if.bind="$column.nosort == true || !$parent.sortable">${ $column.heading }</span>
-                            <svg if.bind="$parent.sorting[$column.field] === 'desc'" height="8" width="10">
-                                <polygon class="grid-sort-arrow" points="0,0 8,0 4,8" />
-                            </svg>
-                            <svg if.bind="$parent.sorting[$column.field] === 'asc'" height="8" width="10">
-                                <polygon class="grid-sort-arrow" points="0,8 8,8 4,0" />
-                            </svg>
-                        </th>
-                    </tr>
-                </thead>
                     <tbody>
                         <tr role="button" click.delegate="$parent.select($item)">
                         </tr>

diff --git a/dist/es6/grid/grid.js b/dist/es6/grid/grid.js
@@ -76,6 +76,10 @@ export class Grid {
 	// Subscription handling
 	unbinding = false;
 
+	// Visual
+	// TODO: calc scrollbar width using browser
+	scrollBarWidth = 16;
+
 	constructor(element, compiler, observerLocator) {
 		this.element = element;
 		this.compiler = compiler;
@@ -225,6 +229,8 @@ export class Grid {
 		this.updatePager();
 
 		this.watchForChanges();
+
+		setTimeout(this.syncColumnHeadersWithColumns.bind(this), 0);
 	}
 
 	applyPage(data) {
@@ -454,6 +460,7 @@ export class Grid {
 
 	gridHeightChanged() {
 
+		// TODO: Make this a one off
 		var cont = this.element.querySelector(".grid-content-container");
 
 		if(this.gridHeight > 0) {
@@ -463,5 +470,32 @@ export class Grid {
 		}
 	}
 
+	/* === Visual === */
+	syncColumnHeadersWithColumns() {
+		// Get the header row
+		var headers = this.element.querySelectorAll("table>thead>tr:first-child>th");
+		var filters = this.element.querySelectorAll("table>thead>tr:last-child>th");
+
+		// Get the first row from the data if there is one...
+		var cells = this.element.querySelectorAll("table>tbody>tr:first-child>td");
+
+		for (var i = headers.length - 1; i >= 0; i--) {
+			var header = headers[i];
+			var filter = filters[i];
+			var cell = cells[i];
+			var overflow = this.isBodyOverflowing();
+
+			var tgtWidth = cell.offsetWidth + (i == headers.length - 1 && overflow ? this.scrollBarWidth : 0);
+
+			// Make the header the same width as the cell...
+			header.setAttribute("style", "width: " + tgtWidth + "px");
+			filter.setAttribute("style", "width: " + tgtWidth + "px");
+		};
+	}
+
+	isBodyOverflowing() {
+		var body = this.element.querySelector(".grid-content-container");
+		return body.offsetHeight < body.scrollHeight || body.offsetWidth < body.scrollWidth;
+	}
 }
 
diff --git a/dist/system/grid/grid.html b/dist/system/grid/grid.html
@@ -3,7 +3,7 @@
     <div>
         <div class="grid-container" show.bind="!showNoRowsMessage || (showNoRowsMessage && count > 0)">
             <!-- Header table -->
-<!--             <table class="table table-hover table-striped table-responsive grid-header-table">
+            <table class="table table-hover table-striped table-responsive grid-header-table">
                 <thead>
                     <tr if.bind="showColumnFilters">
                         <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
@@ -24,28 +24,9 @@
                     </tr>
                 </thead>
             </table>
- -->            <!-- Content table -->
+            <!-- Content table -->
             <div class="grid-content-container">
                 <table class="table table-hover table-striped table-responsive selectable" show.bind="!showNoRowsMessage || (showNoRowsMessage && count > 0)">
-                <thead>
-                    <tr if.bind="showColumnFilters">
-                        <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
-                            <input if.bind="$column.showFilter" class="form-control" value.bind="$column.filterValue" input.delegate="$parent.updateFilters()"></input>
-                        </th>
-                    </tr>
-                    <tr role="button">
-                        <th repeat.for="$column of columns" class="${ $column.class !== '' ? $column.class : '' }">
-                            <a if.bind="$column.nosort == false && $parent.sortable" click.trigger="$parent.sortChanged($column.field)">${ $column.heading }</a>
-                            <span if.bind="$column.nosort == true || !$parent.sortable">${ $column.heading }</span>
-                            <svg if.bind="$parent.sorting[$column.field] === 'desc'" height="8" width="10">
-                                <polygon class="grid-sort-arrow" points="0,0 8,0 4,8" />
-                            </svg>
-                            <svg if.bind="$parent.sorting[$column.field] === 'asc'" height="8" width="10">
-                                <polygon class="grid-sort-arrow" points="0,8 8,8 4,0" />
-                            </svg>
-                        </th>
-                    </tr>
-                </thead>
                     <tbody>
                         <tr role="button" click.delegate="$parent.select($item)">
                         </tr>

diff --git a/dist/system/grid/grid.js b/dist/system/grid/grid.js
@@ -89,6 +89,7 @@ System.register(['aurelia-framework', './grid-column', 'gooy/aurelia-compiler',
 					this.data = [];
 					this.count = 0;
 					this.unbinding = false;
+					this.scrollBarWidth = 16;
 
 					this.element = element;
 					this.compiler = compiler;
@@ -219,6 +220,8 @@ System.register(['aurelia-framework', './grid-column', 'gooy/aurelia-compiler',
 						this.updatePager();
 
 						this.watchForChanges();
+
+						setTimeout(this.syncColumnHeadersWithColumns.bind(this), 0);
 					}
 				}, {
 					key: 'applyPage',
@@ -420,7 +423,6 @@ System.register(['aurelia-framework', './grid-column', 'gooy/aurelia-compiler',
 				}, {
 					key: 'gridHeightChanged',
 					value: function gridHeightChanged() {
-
 						var cont = this.element.querySelector('.grid-content-container');
 
 						if (this.gridHeight > 0) {
@@ -429,6 +431,32 @@ System.register(['aurelia-framework', './grid-column', 'gooy/aurelia-compiler',
 							cont.removeAttribute('style');
 						}
 					}
+				}, {
+					key: 'syncColumnHeadersWithColumns',
+					value: function syncColumnHeadersWithColumns() {
+						var headers = this.element.querySelectorAll('table>thead>tr:first-child>th');
+						var filters = this.element.querySelectorAll('table>thead>tr:last-child>th');
+
+						var cells = this.element.querySelectorAll('table>tbody>tr:first-child>td');
+
+						for (var i = headers.length - 1; i >= 0; i--) {
+							var header = headers[i];
+							var filter = filters[i];
+							var cell = cells[i];
+							var overflow = this.isBodyOverflowing();
+
+							var tgtWidth = cell.offsetWidth + (i == headers.length - 1 && overflow ? this.scrollBarWidth : 0);
+
+							header.setAttribute('style', 'width: ' + tgtWidth + 'px');
+							filter.setAttribute('style', 'width: ' + tgtWidth + 'px');
+						};
+					}
+				}, {
+					key: 'isBodyOverflowing',
+					value: function isBodyOverflowing() {
+						var body = this.element.querySelector('.grid-content-container');
+						return body.offsetHeight < body.scrollHeight || body.offsetWidth < body.scrollWidth;
+					}
 				}, {
 					key: 'gridHeight',
 					decorators: [bindable],