# Table

## 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. ```json {{ [ { "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.

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.\ \&#xNAN;***Multiple*** - Allows the users to select multiple rows at a time.\ \&#xNAN;***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. #### Default select Row If Specify the criteria that will determine which row will be automatically chosen as the default selection when the selection mode is set to 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.

#### Disabled Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

## 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 #### Disable Pagination Choose whether to enable or disable the pagination section by toggling the ON or OFF switch. This control allows you to determine whether the pagination section will be accessible on the screen or not. #### 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

#### Page Size Set the numerical value to decide number of items to be shown per page on the widget. #### 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}}` #### Pagination Alignment | Property | Description | | -------- | --------------------------------------------------------------------- | | Left | The page number section is positioned at the left end of the widget. | | Right | The page number section is positioned at the right end of the widget. | ## 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.
Checked Background	Sets the background colour to show when the row is selected.
Unchecked Background	Sets the background colour to for the rows that are not selected.
Unchecked Border	Set the border color for the unchecked rows.
Selected Row Background	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.