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:

Last updated