Table

Displays large amounts of data in a grid way (rows and columns) that is easy to read and understand. For example - users can display data, such as products and their prices.

The JSON Data for the Table

There are two ways to load the table using data. The first option lets the user pick any pre-built source defined as a query or variable.

{{ [
  {
    "Name": "Ivor Chen",
    "Gender": "Female",
    "Marital Status": "Single",
    "Department": "Accounting"
  },
  {
    "Name": "David Gordon",
    "Gender": "Female",
    "Marital Status": "Married",
    "Department": "Tech Support"
  },
  {
    "Name": "Herman Wiggins",
    "Gender": "Female",
    "Marital Status": "Common-Law",
    "Department": "Human Resources"
  },
  {
    "Name": "Levi Hendricks",
    "Gender": "Male",
    "Marital Status": "Single",
    "Department": "Accounting"
  }
] }}

The other option is keeping the JSON array content that has the raw data or the code to link the data source, like {{queries.getCustomerQA.data}}

Columns

The table component will automatically generate all the required columns when the data is provided in the form of an array of objects. Users can add, edit and remove columns manually using the Columnn property section. It also allows the user to move the columns using the drag and drop feature for the user to rearrange the order as needed.

Column Properties

Property Description

Property	Description
Title	Provide the header text for the column
Data Mapping	When the table data contains more than one column, the user can choose to map the UI column with the data column. The list shows the available columns from the data and the user can choose the column to map.
Column Type	Select the data type from the list of types. It is inclusive of most of the widget types the platform offers - like Text, Number, Select, image, etc. This makes the table have a wide range of data types, not just text and images.
Column Value	Provide a predefined value for the column cell. This can be a static value for the cell, and the user can use JS formula to generate a dynamic value here - for example: `{{currentCell * 5}}` to set the value as 5 times the current cell value.
Show Title	Boolean value to decide if the column's title has to be displayed in the table header.
Editable	Boolean value to decide if the cells under this column must be editable.
Sortable	Sets if the table can be sorted using this column.
Hide	Specifies if the column will be hidden.
Alignment	`Left` - content is aligned to the left side of the cell. `Center` - content is placed at the center of the cell. `Right` - Content is aligned to the right side of the cell.
Fixed Column	`Left` - the column is moved and fixed at the left end of the table. `N/A` - the column is placed in its original place. `Right` - the column is moved and fixed at the right end of the table.
Auto Width	`Auto` - the width of the column can be adjusted. `Fixed` - the width of the column is fixed and cannot be altered.
Width	Provide the width number in the in 'px' terms. This decides the width size of the column.

Title

Provide the header text for the column

Data Mapping

When the table data contains more than one column, the user can choose to map the UI column with the data column. The list shows the available columns from the data and the user can choose the column to map.

Column Type

Select the data type from the list of types. It is inclusive of most of the widget types the platform offers - like Text, Number, Select, image, etc. This makes the table have a wide range of data types, not just text and images.

Column Value

Provide a predefined value for the column cell. This can be a static value for the cell, and the user can use JS formula to generate a dynamic value here - for example: {{currentCell * 5}} to set the value as 5 times the current cell value.

Show Title

Boolean value to decide if the column's title has to be displayed in the table header.

Editable

Boolean value to decide if the cells under this column must be editable.

Sortable

Sets if the table can be sorted using this column.

Hide

Specifies if the column will be hidden.

Alignment

Left - content is aligned to the left side of the cell. Center - content is placed at the center of the cell. Right - Content is aligned to the right side of the cell.

Fixed Column

Left - the column is moved and fixed at the left end of the table. N/A - the column is placed in its original place. Right - the column is moved and fixed at the right end of the table.

Auto Width

Auto - the width of the column can be adjusted. Fixed - the width of the column is fixed and cannot be altered.

Width

Provide the width number in the in 'px' terms. This decides the width size of the column.

Column Style

The set of style properties changes according to the data type that is selected on the 'Column Type' of the table above. Refer to the Style section of the corresponding widget in the Widget Library. section.

Property Description

Property	Description
Background	Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Text	Set the colour of the text. Recommended to set in contrast with the background.
Border Color	Set the colour to the border lines. The border lines will be shown only if that is enabled.
Border Width	Set the thickness of the border of the widget using this value. It is defined using "px" terms.
Border Radius	This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.
Text Size	Set the size of the text in px value - 12px
Text Weight	Increase or decrease the thickness of the font using the list of numbers from 100-800.
Font Family	Type the name of the font family. The reference to the list of font families can be found here: MDN web docs
Font Style	There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.
Text Overflow	Used in the situations when it overflows the element’s box. `Mouseover` - the long string is clipped but the complete string will be displayed when the mouse moves over the text. `Wrap` - the long string is wrapped within the element's box.
Conditional cell color	Dynamically set the colour for the cell based on the cell value which can be retrieved using `curentCell`

Background

Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.

Text

Set the colour of the text. Recommended to set in contrast with the background.

Border Color

Set the colour to the border lines. The border lines will be shown only if that is enabled.

Border Width

Set the thickness of the border of the widget using this value. It is defined using "px" terms.

Border Radius

This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.

Text Size

Set the size of the text in px value - 12px

Text Weight

Increase or decrease the thickness of the font using the list of numbers from 100-800.

Font Family

Type the name of the font family. The reference to the list of font families can be found here: MDN web docs

Font Style

There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.

Text Overflow

Used in the situations when it overflows the element’s box. Mouseover - the long string is clipped but the complete string will be displayed when the mouse moves over the text. Wrap - the long string is wrapped within the element's box.

Conditional cell color

Dynamically set the colour for the cell based on the cell value which can be retrieved using curentCell

Interaction

Event Handlers

Event Description

Event	Description
`Save Changes`	Fired when the user input entry is made and the change is commited.
`Cancel Changes`	Fired when the user cancels the input entry.
`Row Select Change`	Triggered when a row is selected or when the user selects another row shifting from the previously selected row.
`Row Click`	Called when the user clicks on a row.
`Row Expand`	Called when the user expands the row manually.
`Row Shrink`	Called when the user compresses the row manually.
`Column Edited`	Triggered when column cell is edited.
`Search`	Called when the user makes a search using a keyword in the search box.
`Download`	Fired when the user downloads or saves the table data locally.
`Filter Change`	Called when the user alters the filter parameters.
`Sort Change`	Called when the user applies the sorting on a column.
`Page Change`	Fired when the user opens a table page using the page number link.
`Refresh`	Triggered when the refresh happens to reload the table data.

Save Changes

Fired when the user input entry is made and the change is commited.

Cancel Changes

Fired when the user cancels the input entry.

Row Select Change

Triggered when a row is selected or when the user selects another row shifting from the previously selected row.

Row Click

Called when the user clicks on a row.

Row Expand

Called when the user expands the row manually.

Row Shrink

Called when the user compresses the row manually.

Column Edited

Triggered when column cell is edited.

Search

Called when the user makes a search using a keyword in the search box.

Download

Fired when the user downloads or saves the table data locally.

Filter Change

Called when the user alters the filter parameters.

Sort Change

Called when the user applies the sorting on a column.

Page Change

Fired when the user opens a table page using the page number link.

Refresh

Triggered when the refresh happens to reload the table data.

Select Mode

Single - Allows the users to select only a single row at a time. Multiple - Allows the users to select multiple rows at a time. Close - Disables the row selection on the table.

Disable Row if

Enter the condition based on which a row will be disabled on the table when mode is Multiple.

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Loading

It will be useful when there is a process to be carried out, like running a query to fetch data, before the widget is loaded. The loading boolean value can be utilized to show the spinner till the process is complete.

Position

Top - places the toolbar at the top of the table.

Bottom - places the toolbar at the bottom of the table.

Close - Hides the toolbar from the display.

Toolbar Will Be Fixed for Vertically Scrollable Table Based on Position

Show Filter Button

Decides whether the filter feature has to be shown on the toolbar.

Show Refresh Button

Decides whether the refresh button has to be displayed on the toolbar.

Show Download Button

Define the boolean value in the property to enable users with the ability to download the tables content as a CSV or PDF file.

Show Columns Settings Button

Displays the settings icon button on the toolbar for users to work with the settings for the table.

Layout

Table Size

Property	Description
Small	The spacing is very compact - cells are tightly bound
Medium	The spacing is pretty relaxed among the table contents
Large	The large space separates the table components making the table expand bigger

Property

Description

Small

The spacing is very compact - cells are tightly bound

Medium

The spacing is pretty relaxed among the table contents

Large

The large space separates the table components making the table expand bigger

Height

Auto

The height is auto-adjusted for the content

Fixed

The height of the widget is fixed

Property	Description
Fixed Table Header	Header Will Be Fixed for Vertically Scrollable Table
Hide Table Header	Toggle this ON to hide the header row of the table
Column Width Adjusted by User	Enables users with the ability to adjust column width by mouse-drag
Show Resize Handles	Shows the vertical-bar separator between the column headers clearly for users to adjust width.

Property

Description

Fixed Table Header

Header Will Be Fixed for Vertically Scrollable Table

Hide Table Header

Toggle this ON to hide the header row of the table

Column Width Adjusted by User

Enables users with the ability to adjust column width by mouse-drag

Show Resize Handles

Shows the vertical-bar separator between the column headers clearly for users to adjust width.

Pagination

Show Quick Jumper

Displays the input box where users can type in the page number and enter to jump to the page directly.

Hide on Single Page

This property removes the paging section from the table when there is only one page of content loaded into it.

Show Size Changer Button

Displays the dropdown list of numbers which users can pick to set the number of rows per page. This will help serve the contents into page-groups according to the total number of rows.

The grouping numbers can also be altered per need using this property

Total Row Count

The Default value is the number of current data items, which can be obtained from the query, for Example: {{qryCustomers.data[0].count}}

Advanced

Expandable

This feature enables the table to support an additional view upon click of the '+' button on each row. The view will be attached below as the child row and it can be retracted back using the '-' button.

The components for the view can be added to the modal using the 'Configure Expanded View' button. The feature adds a new dimension to the table widget.

Show Spinner During Data Loading

This helps to indicate to the users when a query is processing in the background and loading data onto the table, informing the users about the status.

Use Dynamic Column Setting

Dynamic Column Settings accepts an array of column names. All columns are visible by default. Example: ["id", "name"]

Search Text

It accepts a predefined string and the table is filtered by this value and shows only the filtered data upon table loading.

Table Style

Property	Description
Margin	This value is set in terms of "px" number which creates the space between the border and the content of the widget.
Padding	This value is set in terms of "px" number which creates the space between the border and outer elements.
Background	Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Box Shadow	The is the colour of the shadow that is generated behind the widget box. The X and Y axis values can be altered such that the shadow can be set to fall anywhere behind the widget area. "x-offset" - a positive number specifies the shadow will be on the right of the box, and a negative number will put the shadow on the left of the box. "y-offset" - a negative one means the shadow will be above the box, and a positive number means the shadow will be below the box. "Blur" - if the number is set to 0 then the shadow will be sharp. It will more blurred as the number goes higher, and the shadow will extend further away. "Color" - sets the colour of the shadow. If the colour is not set, the box shadows are drawn in the foreground colour.
Border Color	Set the colour to the border lines. The border lines will be shown only if that is enabled.
Border Radius	This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.
Border Width	Set the thickness of the border of the widget using this value. It is defined using "px" terms.

Property

Description

Margin

This value is set in terms of "px" number which creates the space between the border and the content of the widget.

Padding

This value is set in terms of "px" number which creates the space between the border and outer elements.

Background

Box Shadow

The is the colour of the shadow that is generated behind the widget box. The X and Y axis values can be altered such that the shadow can be set to fall anywhere behind the widget area. "x-offset" - a positive number specifies the shadow will be on the right of the box, and a negative number will put the shadow on the left of the box. "y-offset" - a negative one means the shadow will be above the box, and a positive number means the shadow will be below the box. "Blur" - if the number is set to 0 then the shadow will be sharp. It will more blurred as the number goes higher, and the shadow will extend further away. "Color" - sets the colour of the shadow. If the colour is not set, the box shadows are drawn in the foreground colour.

Border Color

Set the colour to the border lines. The border lines will be shown only if that is enabled.

Border Radius

This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.

Border Width

Set the thickness of the border of the widget using this value. It is defined using "px" terms.

Header Style

Property	Description
Margin	This value is set in terms of "px" number which creates the space between the border and the content of the widget.
Padding	This value is set in terms of "px" number which creates the space between the border and outer elements.
Font Family	Type the name of the font family. The reference to the list of font families can be found here: MDN web docs
Font Style	There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.
Text	Set the colour of the text. Recommended to set in contrast with the background.
Header Background	Users can change the colour of the header background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Border Color	Set the colour to the border lines. The border lines will be shown only if that is enabled.
Border Width	Set the thickness of the border of the widget using this value. It is defined using "px" terms.
Header Text	Set the colour of the header text. Recommended to set in contrast with the background.
Text Size	Set the size of the text in px value - 12px
Text Weight	Increase or decrease the thickness of the font using the list of numbers from 100-800.

Property

Description

Margin

This value is set in terms of "px" number which creates the space between the border and the content of the widget.

Padding

This value is set in terms of "px" number which creates the space between the border and outer elements.

Font Family

Type the name of the font family. The reference to the list of font families can be found here: MDN web docs

Font Style

There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.

Text

Set the colour of the text. Recommended to set in contrast with the background.

Header Background

Users can change the colour of the header background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.

Border Color

Set the colour to the border lines. The border lines will be shown only if that is enabled.

Border Width

Set the thickness of the border of the widget using this value. It is defined using "px" terms.

Header Text

Set the colour of the header text. Recommended to set in contrast with the background.

Text Size

Set the size of the text in px value - 12px

Text Weight

Increase or decrease the thickness of the font using the list of numbers from 100-800.

Property	Description
Margin	This value is set in terms of "px" number which creates the space between the border and the content of the widget.
Background	Users can change the colour of the header background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Border Color	Set the colour to the border lines. The border lines will be shown only if that is enabled.
Toolbar Text	Set the colour of the toolbar text. Recommended to set in contrast with the background.

Property

Description

Margin

This value is set in terms of "px" number which creates the space between the border and the content of the widget.

Background

Border Color

Set the colour to the border lines. The border lines will be shown only if that is enabled.

Toolbar Text

Set the colour of the toolbar text. Recommended to set in contrast with the background.

Row Style

Show vertical Row Grid Border

Displays a separator line between the columns, like a vertical divider.

Show horizontal Row Grid Border

Displays a separator line between the rows, like a horizontal divider.

Style

Property	Description
Background	Users can change the colour of the row background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Selected Row	Set the background colour to show when the user selects the row.
Hover Row Background	Sets the background colour to show when the user moves the mouse over the row.
Alternate Row Background	Set the background colour for the alternate rows, that is applied to every other rows.

Property

Description

Background

Users can change the colour of the row background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.

Selected Row

Set the background colour to show when the user selects the row.

Hover Row Background

Sets the background colour to show when the user moves the mouse over the row.

Alternate Row Background

Set the background colour for the alternate rows, that is applied to every other rows.

Height

Auto

The height is auto-adjusted for the content

Fixed

The height of the widget is fixed

Conditional row height

Conditionally set the row height based on the optional variables: CurrentRow, CurrentOriginalIndex, CurrentIndex, ColumnTitle. For Example: {{ currentRow.id > 3 ? "60px" : "40px" }}

Conditional row color

Conditionally set the row color based on the optional variables: CurrentRow, CurrentOriginalIndex, CurrentIndex, ColumnTitle. For Example: {{ currentRow.id > 3 ? "green" : "red" }}

Column Style

Property	Description
Background	Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.
Border Color	Set the colour to the border lines. The border lines will be shown only if that is enabled.
Margin	This value is set in terms of "px" number which creates the space between the border and the content of the widget.
Border Width	Set the thickness of the border of the widget using this value. It is defined using "px" terms.
Border Radius	This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.
Text	Set the colour of the text. Recommended to set in contrast with the background.
Text Size	Set the size of the text in px value - 12px
Text Weight	Increase or decrease the thickness of the font using the list of numbers from 100-800.
Font Family	Type the name of the font family. The reference to the list of font families can be found here: MDN web docs
Font Style	There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.

Property

Description

Background

Border Color

Set the colour to the border lines. The border lines will be shown only if that is enabled.

Margin

This value is set in terms of "px" number which creates the space between the border and the content of the widget.

Border Width

Set the thickness of the border of the widget using this value. It is defined using "px" terms.

Border Radius

This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.

Text

Set the colour of the text. Recommended to set in contrast with the background.

Text Size

Set the size of the text in px value - 12px

Text Weight

Increase or decrease the thickness of the font using the list of numbers from 100-800.

Font Family

Type the name of the font family. The reference to the list of font families can be found here: MDN web docs

Font Style

There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.

PreviousTabbed Container NextDate Range

Last updated 1 day ago

The JSON Data for the Table

Columns

Column Properties

Column Style

Interaction

Event Handlers

Select Mode

Disable Row if

Hide

Loading

Toolbar

Position

Fixed Toolbar

Show Filter Button

Show Refresh Button

Show Download Button

Show Columns Settings Button

Layout

Table Size

Height

Pagination

Show Quick Jumper

Hide on Single Page

Show Size Changer Button

Total Row Count

Advanced

Expandable

Show Spinner During Data Loading

Use Dynamic Column Setting

Search Text

Table Style

Header Style

Toolbar Style

Row Style

Show vertical Row Grid Border

Show horizontal Row Grid Border

Style

Height

Conditional row height

Conditional row color

Column Style