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:

PrevioususeSelections NextuseVariable

Last updated 2 years ago