Test Table Template

"Table template"

by Nathaniel Anderson

HTML

.qv-object-test-test-table-template div.qv-object-content-container {
	overflow: auto;
}
.qv-object-test-test-table-template td,
.qv-object-test-test-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-test-table-template td.numeric {
	text-align: right;
}
.qv-object-test-test-table-template button {
	width: 100%;
}

CSS

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

JavaScript

/*globals define*/
define( ["qlik", "jquery", "text!./style.css"], function ( qlik, $, cssContent ) {
	'use strict';
	$( "<style>" ).html( cssContent ).appendTo( "head" );
	function createRows ( rows, dimensionInfo ) {
		var html = "";
		rows.forEach( function ( row ) {
			html += '<tr>';
			row.forEach( function ( cell, key ) {
				if ( cell.qIsOtherCell ) {
					cell.qText = dimensionInfo[key].othersLabel;
				}
				html += "<td ";
				if ( !isNaN( cell.qNum ) ) {
					html += "class='numeric'";
				}
				html += '>' + cell.qText + '</td>';
			} );
			html += '</tr>';
		} );
		return html;
	}

	return {
		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"
				}
			}
		},
		snapshot: {
			canTakeSnapshot: true
		},
		paint: function ( $element, layout ) {
			var html = "<table><thead><tr>", self = this,
				morebutton = false,
				hypercube = layout.qHyperCube,
				rowcount = hypercube.qDataPages[0].qMatrix.length,
				colcount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length;
			//render titles
			hypercube.qDimensionInfo.forEach( function ( cell ) {
				html += '<th>' + cell.qFallbackTitle + '</th>';
			} );
			hypercube.qMeasureInfo.forEach( function ( cell ) {
				html += '<th>' + cell.qFallbackTitle + '</th>';
			} );
			html += "</tr></thead><tbody>";
			//render data
			html += createRows( hypercube.qDataPages[0].qMatrix, hypercube.qDimensionInfo );
			html += "</tbody></table>";
			//add 'more...' button
			if ( hypercube.qSize.qcy > rowcount ) {
				html += "<button class='more'>More...</button>";
				morebutton = true;
			}
			$element.html( html );
			if (...