useTable
The hook for building a table

Basic Example

The below example extracts data from the Qlik engine and renders it using the semantic-ui-react library.
1
import React from 'react'
2
import { Table } from 'semantic-ui-react'
3
import { useTable } from '@motor-js/engine'
4
5
const TableExample = () => {
6
7
const cols = [
8
{
9
qField: 'country',
10
dataKey: 'country',
11
qLabel: 'Country'
12
},
13
{
14
qField: 'province',
15
dataKey: 'province',
16
qLabel: 'Province'
17
}];
18
19
const { dataSet, headerGroup } = useTable({
20
cols,
21
});
22
23
24
return (
25
<div>
26
{dataSet &&
27
<Table compact celled striped>
28
<Table.Header>
29
<Table.Row>
30
{headerGroup.map((d,i) => (
31
<Table.HeaderCell key={i}>{d.title}</Table.HeaderCell>
32
))}
33
</Table.Row>
34
</Table.Header>
35
36
<Table.Body>
37
{dataSet.map((d, i) => (
38
<Table.Row key={i}>
39
<Table.Cell>{d.country.text}</Table.Cell>
40
<Table.Cell>{d.province.text}</Table.Cell>
41
</Table.Row>
42
))}
43
</Table.Body>
44
</Table>
45
}
46
</div>
47
)
48
}
49
50
export default TableExample
Copied!

Master Items Example

If you are using Master Items from your Qlik Sense app, your cols config will be looking slightly different. See below for an example
1
import React from 'react'
2
import { Table } from 'semantic-ui-react'
3
import { useTable } from '@motor-js/engine'
4
5
const TableExample = () => {
6
7
const cols = [
8
{
9
qField: "[OrderDateMonth]",
10
qLabel: "Order Date",
11
},
12
{
13
qField: "",
14
qLibraryId: "dWHamW",
15
qType: "measure",
16
}];
17
18
const { dataSet, headerGroup } = useTable({
19
cols,
20
});
21
22
//....
23
Copied!

Table Options

The following options can be passed into the hook
    cols: Object
      Required
      The dimensions and measures in your Qlik application from which you are extracting data for
      This can be either an array or an object. See the Cols Options below for more details
      If using an array, you can only pass the names of the columns to be returned
      Include an '=' before the name of your measure. See above for an example of this
    qPage: Object
      Optional
      Must be an object in the following structure: { qTop: num, qLeft: num, qWidth: num, qHeight: num }
      Size of the extracted data from the engine. Maximum Column x Row size of 10,000.
      qHeight specifies the number of rows extracted from the engine
      qWidth specifies the number of columns extracted from the engine. This should not be less than the number of dimensions/measures specified in your cols array/object.
      qTop specifies the position from the top, Corresponds to the first row.
      qLeft specifies the position from the left. Corresponds to the first column.
    qTitle: String
      Returns a title. Can be a Qlik Sense expression
    qCalcCondition: Object
      Must be an object in the following structure:{ qCond: string, qMsg: string }
      Condition to be met in order to render data from the hook.
      Can be a Qlik Sense expression
      The return message from the engine is available in the qLayout object
    sortCriteria: Object
      An object containing parameters to change the sort order of your table
      See sortCriteria Options for more details
    qSuppressZero: boolean
      Remove zero values
    qSuppressMissing: boolean
      Remove missing values

Cols Options

The following options are available to pass into the cols object.
    qField: <string> | <array>
      Required
      Dimension or Measure name from your Qlik Sense data model
      Pass an array to use a drill down group
    dataKey: <string>
      Required
      Key to map your field values to the returned dataKey object names in each instance of the dataSet array
    qLibraryId: <string>
      Use to refer to a Master Item created in your app
      Must refer to the id of your Master Item
    qType: <"dimension" | "measure">
      Use along with qLibraryId, if you are using Master Items from your Qlik Sense data model
      Required to label your qLibraryId as a dimension or measure
    qLabel: <string>
      Label of your dimension / measure. This will be available in the headerGroup object to use as your table's title
    qGrouping: <oneOf>
      N or GRP_NX_NONE
      H or GRP_NX_HIEARCHY
      C or GRP_NX_COLLECTION
      Use H for a drill down group
    qNumType: <oneOf>
      U or UNKNOWN
      A or ASCII
      I or INTEGER
      R or REAL
      F or FIX
      M or MONEY
      D or DATE
      T or TIME
      TS or TIMESTAMP
      IV or INTERVAL
      To set the number type of the returned text
    qNumFmt: <string>
      Format of number e.g. '$#,##0'
    qCondBackgroundFormat: <string>
      Conditional formatting for specific cells, you can input a Qlik Sense expression
      Available in dataSet, in the expAttr key
    qCondTextFormat: <string>
      Conditional formatting for specific cells, you can input a Qlik Sense expression
      Available in dataSet, in the expAttr key.

Sort Criteria Options

The following options are available in the sortCriteria object
    qInterColumnSortOrder: Array
      Defines the sort order of the columns in the hypercube.
      Column numbers are separated by a comma.
      Example: [1,0,2] means that the first column to be sorted should be the column 1, followed by the column 0 and the column 2

useTable Properties

The following properties are returned from the hook.
    dataSet: array<object>
      An array of objects containing the data returned from the hypercube.
      For details of the object see Data properties.
    headerGroup: array<object>
      An array of objects containing table header data
      For details of the object see headerGroup properties.
    qLayout: object
      Layout of the generic object as defined here.
    qData: array<object>
      Unformatted data returned from the Hypercube. See here for details.
    handlePageChange(number): Function
      A function to be called to change the page of your table
      Pass in a page number
    handleSortChange(headerGroup<object>): Function
      Function to dynamically change the sorting of your table
      Pass the headerGroup object into the function
    incrementPage: Function
      A function to be called to increment the page of your table
    decrementPage: Function
      A function to be called to decrement the page of your table
    page: number
      The current page number
    pageSize: number
      The size of each page
    pages: number
      The number of pages
    select: Function(column, [elemNumber], toggle)
      A function to apply selections against the Qlik engine
      You need to pass:
        Column to apply selection against Needs to be an array of the element numbers you wish to select
        An array of element numbers to select
        Whether to toggle selections, optional parameter, default set to false
      Element numbers are equivalent to the elemNumber in the dataKey object, in dataSet
    beginSelections: Function
      A function to begin the selections mode, equivalent to this Qlik method
    endSelections: Function
      A function to end the selections mode, equivalent to this Qlik method
    selections: Array
      An array of selected element numbers
    clearSelections: Function
      Clears all selections for the particular dimension

headerGroup Properties

The following properties are returned in each instance of the headerGroup array.
    title: string
      Column header title
    qColumnType: string (dim or meas)
      Column type, either a dimension or measure
    qGrandTotals: object
      Object containing the grand totals of the measures
    qInterColumnIndex: number
      The index number of the column
    qPath: string
      HyperCube Path to the dimension / measure

Data Properties

These properties are available in each instance of the mData array. Each object is named
    [dataKey]: <object>
      Each item passed into the cols array is available as a named object within mData. See the Basic Example which demonstrates this.
      For details of this object see the dataKey properties
    key: <number>
      Unique key for each instance of the mData array

dataKey Properties

These properties are available in each dataKey instance.
    value: <text> | <num>
      The value returned from the HyperCube.
      Can be either text or a number depending on the useFormatting input in the cols definition
    state: <string>
      Selection state
    elemNumber <number>
      Element number, commonly used to make selections
    attrExp <object>
      Additional attributes
      Object returning values from the qCondBackgroundFormat and qCondTextFormat inputs

Examples

See our Table Examples below.

Semantic UI Example:

Last modified 1mo ago