Comment on page
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.
import React from 'react'
import { Table } from 'semantic-ui-react'
import { useTable } from '@motor-js/engine'
​
const TableExample = () => {
​
  const cols = [
  {
    qField: 'country',
    dataKey: 'country',
    qLabel: 'Country'
  },
  {
    qField: 'province',
    dataKey: 'province',
    qLabel: 'Province'
  }];
  
  const { dataSet, headerGroup } = useTable({
    cols,
  });
​
​
  return (
    <div>
      {dataSet && 
        <Table compact celled striped>
            <Table.Header>
              <Table.Row>
                {headerGroup.map((d,i) => (
                  <Table.HeaderCell key={i}>{d.title}</Table.HeaderCell>
                ))}
              </Table.Row>
            </Table.Header>
​
            <Table.Body>
            {dataSet.map((d, i) => (
              <Table.Row key={i}>
                <Table.Cell>{d.country.text}</Table.Cell>
                <Table.Cell>{d.province.text}</Table.Cell>
              </Table.Row>
            ))}
            </Table.Body>
        </Table>
      } 
    </div>
  )
}
​
export default TableExample
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
import React from 'react'
import { Table } from 'semantic-ui-react'
import { useTable } from '@motor-js/engine'
​
const TableExample = () => {
​
  const cols = [
  {
    qField: "[OrderDateMonth]",
    qLabel: "Order Date",
  },
  {
    qField: "",
    qLibraryId: "dWHamW",
    qType: "measure",
  }];
  
  const { dataSet, headerGroup } = useTable({
    cols,
  });
​
 //....
 
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:
​
useSelections
useVariable
Last modified 2yr ago