Simple table (extension example)

The Simple table code example demonstrates a basic table.

Finding the code examples

In a Qlik Sense Desktop environment, you find the code examples in ...\Users\<UserName>\Documents\Qlik\Examples\Extensions.

In a Qlik Sense environment, you find the code examples in ...\ProgramData\Qlik\Examples\Extensions.

The code examples are not visible in Qlik Sense until you have deployed them. For more information about deploying examples, see Deploying your visualizations.

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 requires 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