Comment on page
useTable
The hook for building a table
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
If you are using Master Items from your Qlik Sense app, your
cols
config will be looking slightly different. See below for an exampleimport 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,
});
//....
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 engineqWidth
specifies the number of columns extracted from the engine. This should not be less than the number of dimensions/measures specified in yourcols
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
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 thedataSet
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 theexpAttr
key
qCondTextFormat: <string>
- Conditional formatting for specific cells, you can input a Qlik Sense expression
- Available in
dataSet
, in theexpAttr
key.
The following options are available in the
sortCriteria
objectqInterColumnSortOrder: 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
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
qData: array<object>
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 thedataKey
object, indataSet
beginSelections: Function
endSelections: Function
selections: Array
- An array of selected element numbers
clearSelections: Function
- Clears all selections for the particular dimension
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
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
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 thecols
definition
state: <string>
- Selection state
elemNumber <number>
- Element number, commonly used to make selections
attrExp <object>
- Additional attributes
- Object returning values from the
qCondBackgroundFormat
andqCondTextFormat
inputs
See our Table Examples below.
Last modified 2yr ago