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
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 also the user can enter JS formula to generate a dynamic value - 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
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
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.

Set the visibility

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.

Loading state

Toolbar

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.

Fixed Toolbar

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

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.

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.

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.

Toolbar 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.
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.

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.

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.