Table

Table Component. Display data in a tabular format.

Table Gif

Usage

import { Table } from @motor-js/core
//...
<Table
border='none'
bandedRows
grandTotalsFlag
columns={[
{
dimensions: [
{
qField: '[Product Group Desc]',
qLabel: 'Country',
width: '20%',
} ,
{
qField: "Month",
qLabel: "Month",
width: "20%"
},
],
measures: [
{
qField: '=sum([Sales Amount])',
qLabel: 'Sales',
qNumType: "M",
qNumFmt: '£#,##0',
qCondBackgroundFormat:'',
qCondTextFormat:'',
width: '20%',
},
{
qField: '=sum([Sales Margin Amount])',
qNumType: "M",
qNumFmt: "£#,##0",
qCondBackgroundFormat:'if(sum([Sales Margin Amount])<0, red())',
qCondTextFormat: 'if(sum([Sales Margin Amount])<0, white())',
qLabel: 'Margin',
width: '20%',
}
]
},
]}
/>

This can get more complex by setting various other propertes within the cols property which will allow for the naming of columns and the ability to sort the data.

A more advanced version demonstrating this is displayed below.

Props

PropDescriptionOptions / Example
columnsAn array of objects to define the data to be used in the component. The columns need a dimension and / or measure object.
See "Column Definition" below for the detailed object properties
array
[{ dimensions :
[ { qField: 'country',
qLabel: 'Country',
width: '10%', }, ], },
]
columnOrderAn array of integers (starting from 0), set the order of your table columns.
Default order is as defined in the columns prop, with dimensions listed first and then measures.
array
calcConditionCalculated condition to be met before chart can be displayed.object
{
qCond: "=Avg([Case Duration Time])> 5",
qMsg: "Calculation condition has not been met",
}
columnSortOrderOrder of the columns on which the returned dat shoud be sorted.array
[1,0]
grandTotalsFlagSet to true to show a grand totals row at the top of the table object.bool
marginThe amount of margin around the componentstring
'5px'
heightTable height in percentage or value as pixels.string
'100%'
'200px'
wrapperWidthWidth of the outer wrapper around the table object.
If this is smaller than the table width, a horizontal scrollbar will enable you to view all columns.
string
'100%'
'200px'
tableWidthTable width.string
'100%'
'200px'
sizeSize of the text used in the tableoneOf
'tiny'
'small'
'medium'
'large'
'xlarge'
pageHeightNumber of records to be returned per page of the table.
Note that increasing this will have a performance impact.
number
30
tableLayoutDefines the algorithm used to lay out table cells, rows and columns. For more information regarding the impact, please see https://www.w3schools.com/cssref/pr_tab_table-layout.asp.oneOf
'fixed'
'auto'
headerAlignmentAlignment of header row.oneOf
'left'
'center'
'right'
'leftRight'
bodyAlignmentAlignment of header row.oneOf
'left'
'center'
'right'
'leftRight'
headerBackgroundColorHeader background color.string
headerFontColorHeader font color.string
interactiveSortToggle interactive sorting icon in table header.bool
false
gridAdd or remove the table grid.bool
false
bandedRowsAdd or remove banded row color.bool
false
highlightOnSelectionHighlight cells on selection. If false, selected items will be boldbool
false
allowSelectionsTo allow or disable selections.bool
true

Column Definition

Below props are for use in the dimensions and measures array, within columns. An example of this can also be seen below.

Props within columnsDescriptionOptions / Exampledimensions or measures array?
qFieldField name from your Qlik appstring
'[Product Group Desc]'
both
qLabelLabel of your dimension or measurestring
'Product Group'
both
qCondBackgroundFormatConditional background colorstring
'Product Group'
both
qCondTextFormatConditional text colorstring
'Product Group'
both
qSortCriteriaSort criteriaNot available in beta releaseNot available in beta release
widthColumn width, in pixels of a percentstring
'10%'
both
qNumTypeNumber typeoneOf
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
measure
qNumFmtNumber formatstring
'#,##0'
measure

Example

Simple Example

import { Table } from @motor-js/core
//...
<Table
columns={[
{
dimensions: [
{
qField: 'country',
qLabel: 'Country',
width: '20%',
},
{
qField: "province",
qLabel: "Province",
qCondBackgroundFormat:'',
qCondTextFormat:'',
width: "20%"
},
],
measures: [
{
qField: 'sum(price)',
qLabel: 'Total Price',
width: '20%',
}
]
},
]}
/>

Kitchen Sink Example

function TableDemo() {
return (
<Motor config={config}>
<Table
columns={[
{
dimensions: [
{
qField: "[Product Group Desc]",
qLabel: "Product Group",
qCondBackgroundFormat: "",
qCondTextFormat: "",
width: "10%",
},
{
qField: "[Product Sub Group Desc]",
qLabel: "Product Sub Group",
qCondBackgroundFormat: "",
qCondTextFormat: "",
width: "10%",
},
],
measures: [
{
qField: "=Sum([Sales Quantity])",
qLabel: "Total Sales",
qCondBackgroundFormat: "",
qCondTextFormat: "",
width: "10%",
qNumType: "M",
qNumFmt: "£#,##0",
},
],
},
]}
grid
bandedRows
grandTotalsFlag
headerBackgroundColor="brand"
headerFontColor="white"
/>
</Motor>
);
}

Theme API

table

e.g. pie.main.otherTotalSpec = {{qOtherLabel: 'Other', qOtherCount: '5'}}

SettingDescriptionOptions / Example
colortable.color
selectedselected color string
null
selectedFontselected font colorstring
'white'
headerBackgroundheader background colorstring
'white'
bodyBackgroundbody background colorstring
'white'
selectedBackgroundselected background colorstring
'brand'
oddRowsodd row color when the banded rows prop is setstring
'white'
evenRowseven row color when the banded rows prop is setstring
'altGray1'
hoverrow hover colorstring
'#f2f2f2'
wrappertable.wrapper
borderColorwrapper border colorstring
'altGray5'
headertable.header
borderColorheader border colorstring
'altGray5'
paddingheader paddingstring
"0.4rem 0.7em"
totalstable.totals
borderColortotals border colorstring
'altGray5'
paddingtotals paddingstring
"0.4rem 0.7em"
cellstable.cells
borderColorcells border colorstring
'altGray5'
paddingcells paddingstring
"0.2rem 0.7em"