Namespace: qlik.table
The Table API is a way for developers to create a table using dimensions and metrics, which are returned in a standard table format of rows and columns. Unlike the qHyperCube format, which returns the data in object format, the Table API can simply be leveraged to, for example, do the following:
- Prepare extracts to Excel
- Render simple tabular information in an Angular template
The qlik.app.createTable method is the entry point to the Table API. It creates a table object that wraps the qHyperCube and returns a table object of type QTable.
The properties of a QTable object are as follows:
Name |
Type |
Description |
rows |
Array.QRow |
Data rows |
headers |
Array.QHeader |
Header information |
totals |
Array.QMeasureCell |
Total information for measures |
rowCount |
Number |
Total number of rows for the qHyperCube, including rows not fetched from the server |
colCount |
Number |
Total number of columns for the qHyperCube |
It is initially empty but will eventually contain data. The table object will be updated when selection state changes, and a notification is sent when data is available and will be triggered by each update. To receive a notification, bind a listener on OnData of the QTable instance.
The following is an example of creating a table and rendering it using a simple AngularJS template, as it's optimal for rendering dynamic tables on the screen:
Step 1: Create the table and add a listener to it:
var table = app.createTable(["FirstName", "LastName"], ["Count(Case Id)"],{rows:200});
var listener = function() {
var rowCount = table.rowCount;
var colCount = table.colCount;
table.OnData.unbind( listener ); //unregister the listener when no longer notification is needed.
};
table.OnData.bind( listener ); //bind the listener
Step 2: Add the following code snippet to the main controller script:
if ( !this.$scope.table ) {
var app = qlik.currApp();
this.$scope.table = app.createTable(["FirstName", "LastName"], ["Count(Case Id)"],{rows:200});
}
Step 3: Define the AngularJS template using the following HTML code:
<tr ng-repeat="row in table.rows">//Render rows
<td ng-repeat="cell in row.cells"> {{cell.qText}} </td>; //Render cells within row
</tr>