Angular Table Template

When choosing "Angular Table template"

by Nathaniel Anderson

HTML

<div qv-extension style="height: 100%; position: relative; overflow: auto;">
	<table>
		<thead>
		<tr>
			<th ng-repeat="head in table.headers track by $index" qva-activate="head.orderBy()">{{head.qFallbackTitle}}</th>
		</tr>
		</thead>
		<tbody>
		<tr ng-repeat="row in table.rows track by $index">
			<td ng-repeat="cell in row.cells track by $index" class="selectable" ng-class="{'selected':cell.selected,'numeric':cell.qNum}" qva-activate="cell.select($event)">{{cell.qText}}</td>
		</tr>
		</tbody>
	</table>
	<button ng-if="table.rowCount>table.rows.length" qva-activate="table.getMoreData()" class="lui-button more">More...</button>
</div>

CSS

.qv-object-test-angular-table-template div.qv-object-content-container {
	overflow: auto;
}
.qv-object-test-angular-table-template td,
.qv-object-test-angular-table-template th {
	border-top: 0px solid #fff;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	cursor: default;
	font-size: 12px;
}
.qv-object-test-angular-table-template td.numeric {
	text-align: right;
}
.qv-object-test-angular-table-template button {
	width: 100%;
}


{
	"name": "test-angular-table-template",
	"description": "Table visualization template based on angular.js",
	"icon": "table",
	"type": "visualization",
	"version": "1.0.0",
	"author": "",
	"homepage": "",
	"keywords": "qlik-sense, visualization",
	"license": "",
	"repository": "",
	"dependencies": {
		"qlik-sense": ">=3.0.x"
	}
}

JavaScript

define( ["qlik","jquery", "text!./style.css", "text!./template.html"], function (qlik, $, cssContent, template ) {'use strict';
    $("<style>").html(cssContent).appendTo("head");
	return {
       template: template,
       initialProperties : {
			qHyperCubeDef : {
				qDimensions : [],
				qMeasures : [],
				qInitialDataFetch : [{
					qWidth : 10,
					qHeight : 50
				}]
			}
		},
		definition : {
			type : "items",
			component : "accordion",
			items : {
				dimensions : {
					uses : "dimensions",
					min : 1
				},
				measures : {
					uses : "measures",
					min : 0
				},
				sorting : {
					uses : "sorting"
				},
				settings : {
					uses : "settings",
					items : {
						initFetchRows : {
							ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",
							label : "Initial fetch rows",
							type : "number",
							defaultValue : 50
						}
					}
				}
			}
		},
		support : {
			snapshot: true,
			export: true,
			exportData : true
		},
		paint: function ( ) {
			//setup scope.table
			if ( !this.$scope.table ) {
				this.$scope.table = qlik.table( this );
			}
			return qlik.Promise.resolve();
		},
		controller: ['$scope', function (/*$scope*/) {
		}]
	};

} );