Simple table

The Simple table example demonstrates a basic table.

Finding the examples

Qlik Sense Desktop: ...\Users\<UserName>\Documents\Qlik\Examples\Extensions.
Qlik Sense: ...\ProgramData\Qlik\Examples\Extensions.

Full code example

{
	"name" : "Simple table",
	"description" : "Simple table Extension Example",
	"icon" : "table",
	"type" : "visualization",
	"version": "1.0",
	"preview" : "table",
	"author": "QlikTech International AB"
}

define(["jquery", "text!./simpletable.css"], function($, cssContent) {'use strict';
	$("<style>").html(cssContent).appendTo("head");
	return {
		initialProperties : {
			version : 1.0,
			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
						},
					}
				}
			}
		},
		snapshot : {
			canTakeSnapshot : true
		},
		paint : function($element) {
			var html = "<table><thead><tr>", self = this, lastrow = 0, morebutton = false, dimcount = this.backendApi.getDimensionInfos().length;
			//render titles
			$.each(this.backendApi.getDimensionInfos(), function(key, value) {
				html += '<th>' + value.qFallbackTitle + '</th>';
			});
			$.each(this.backendApi.getMeasureInfos(), function(key, value) {
				html += '<th>' + value.qFallbackTitle + '</th>';
			});
			html += "</tr></thead><tbody>";
			//render data
			this.backendApi.eachDataRow(function(rownum, row) {
				lastrow = rownum;
				html += '<tr>';
				$.each(row, function(key, cell) {
					if(cell.qIsOtherCell) {
						cell.qText = self.backendApi.getDimensionInfos()[key].othersLabel;
					}
					html += "<td class='";
					if(!isNaN(cell.qNum)) {
						html += "numeric ";
					}
					//negative elementnumbers are not selectable
					if(key < dimcount && cell.qElemNumber > -1) {
						html += "selectable' data-value='" + cell.qElemNumber + "' data-dimension='" + key + "'";
					} else {
						html += "'";
					}
					html += '>' + cell.qText + '</td>';
				});
				html += '</tr>';
			});
			html += "</tbody></table>";
			//add 'more...' button
			if(this.backendApi.getRowCount() > lastrow + 1) {
				html += "<button id='more'>More...</button>";
				morebutton = true;
			}
			$element.html(html);
			if(morebutton) {
				var requestPage = [{
					qTop : lastrow + 1,
					qLeft : 0,
					qWidth : 10, //should be # of columns
					qHeight : Math.min(50, this.backendApi.getRowCount() - lastrow)
				}];
				$element.find("#more").on("qv-activate", function() {
					self.backendApi.getData(requestPage).then(function(dataPages) {
						self.paint($element);
					});
				});
			}
			$element.find('.selectable').on('qv-activate', function() {
				if(this.hasAttribute("data-value")) {
					var value = parseInt(this.getAttribute("data-value"), 10), dim = parseInt(this.getAttribute("data-dimension"), 10);
					self.selectValues(dim, [value], true);
					$element.find("[data-dimension='"+ dim +"'][data-value='"+ value+"']").toggleClass("selected");
				}
			});
		}
	};
});

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

Code example breakdown

Edit the applicable fields of the QEXT file to set a default title, description, icon and type.
Implement paint method.
Define properties. In this code example, properties are defined inside the main JavaScript file.
Add styling to separate CSS file:

It is good programming practice to keep your styling in a separate CSS file. Qlik Sense set the CSS class qv-object-[extension name] on your extensions. You should prefix your CSS rules with that. You then load your CSS file with RequireJS and add its content to the HTML page:
```
define(["jquery", "text!./simpletable.css"], function($, cssContent) {'use strict';
	$("<style>").html(cssContent).appendTo("head");
```

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here