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.
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 | |
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 |
|
Fixed Column |
|
Auto Width |
|
Width |
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.
|
Conditional cell color | Dynamically set the colour for the cell based on the cell value which can be retrieved using |
Interaction
Event Handlers
Event | Description |
---|---|
| Fired when the user input entry is made and the change is commited. |
| Fired when the user cancels the input entry. |
| Triggered when a row is selected or when the user selects another row shifting from the previously selected row. |
| Called when the user clicks on a row. |
| Called when the user expands the row manually. |
| Called when the user compresses the row manually. |
| Triggered when column cell is edited. |
| Called when the user makes a search using a keyword in the search box. |
| Fired when the user downloads or saves the table data locally. |
| Called when the user alters the filter parameters. |
| Called when the user applies the sorting on a column. |
| Fired when the user opens a table page using the page number link. |
| 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.
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 | |
Medium | |
Large |
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. |
Last updated