Table Properties

The Table component displays and manages data, connecting seamlessly with databases and APIs. It allows users to view and edit data directly within the table. This document goes through all the properties related to the Table component.

Data

To populate the Table component with data, you need to provide the data in the form of an array of objects under its Data property. You can utilize data from queries by referring query data to populate the Table.

The Table component will automatically generate all the required columns when the data is provided. The Table also loads one level of nested data.

Example - Passing an array:

{{[{ id: 1, name: 'Sarah', email: '[email protected]', contact:{number: 8881212, address: '25, Huntley Road, Newark'} }]}}

Example - Passing a query data:

{{queries.restapi1.data}}
//replace restapi1 with your query name

Columns

Go to the Table Columns guide to know more about supported column types.

Action Buttons

Action buttons are positioned in the Table's final column. These buttons' appearance can be customized, and specific actions can be defined for when they are clicked using the On click action. Upon clicking an action button, the selectedRow exposed variable of the Table is updated to reflect the data of the selected row.

Below are the button text properties that you can set.

Property	Description
Button text	Sets the text that you want to be displayed on the action button.
Button position	Sets the button position to left or right.
Background color	Sets the background color of the action button.
Text color	Sets the color of button-text of the action button.
Disable Action Button	Toggle on to disable the action button. You can programmatically set its value by clicking on the fx button next to it, if set to {{true}}, the action button will be disabled and becomes non-functional. By default, its value is set to {{false}}.
New event handler	The New event handler button lets you create an event handler to define behavior for action buttons based on the On click action.

Events

Event	Description
Row hovered	This event is activated when the mouse pointer hovers over a row. The hoveredRowId variable captures the ID of the hovered row, and the hoveredRow variable stores the row's data in object format.
Row clicked	This event is triggered when a Table row is clicked. The selectedRowId and selectedRow exposed variables of the Table store the ID and data of the selected row, respectively.
Save changes	If any cell of the Table is edited, the Save changes button appears at the footer of the Table. Save changes event is triggered when this button is clicked.
Page changed	If server-side pagination is enabled, this event is fired when the current page is changed. Page changed event is triggered after updating the pageIndex variable.
Search	Search event is triggered when a text is entered to the search input box of the Table. searchText variable is updated before triggering this event.
Cancel changes	If any cell of the Table is edited, the Discard changes button appears at the footer of the Table. Cancel changes event is triggered when this button is clicked.
Sort applied	This event is triggered when the column name header is clicked to apply sorting. The sortApplied variable is updated with an object having column and direction values.
Cell value changed	If any cell of the Table is edited, the cell value changed event is triggered.
Filter changed	Triggeres when filter is added, removed, or updated. filters variable of the Table is updated to reflect the status of filters applied. The objects will have properties: condition, value, and column.
Add new rows	Triggeres when the Save button is clicked from the Add new row modal.

Row Selection

Property	Description
Allow selection	Enables row selection using checkboxes. Disabling it removes row highlighting and bulk selection options.
Highlight selected row	Highlights the last clicked row. Replaces checkbox selection with visual highlight.
Bulk selection	Allows selecting multiple rows on the current page. Selected values are stored in the selectedRows variable.
Default selected row	Pre-selects a row when Allow selection is enabled. Use a key-value object like {"id": variables.x} where x is a valid variable that returns ID.
Select row on cell edit	Automatically selects the row being edited if column is editable. Disable to prevent auto-selection during editing.

Search, Sort and Filter

Show search

The Show search property controls the search box on the Table. Client-side search is enabled by default and server-side search can be enabled from the events section of the inspector. Whenever the search text is changed, the searchText exposed variable of the Table component is updated.

Server-side search

If server-side search is enabled, Search event is fired after the content of searchText variable is changed. searchText can be used to run a specific query to search for the records in your data source.

Enable column sorting

Disable this option to lock the sorting of columns when the users clicks on the column header.

Server-side sort

When server-side sort is enabled, clicking on the column headers will not automatically sort the table, instead, the Sort applied event will be fired and the applied sorting will be accessible in the sortApplied exposed variable. This information can be leveraged to execute queries that update the table content in accordance with the specified sorting.

Enable filtering

The filter button in the Table header is visible by default. You can choose to hide it by disabling this option.

The Table data can be filtered using the Filter data option on its top-left. You have the option to choose from various filters, such as:

• contains
• does not contain
• matches
• does not match
• equals
• does not equal
• is empty
• is not empty
• greater than
• greater than or equal to
• less than
• less than or equal to

Server-side filter

When Server-side filter is enabled, applying filters will not automatically filter the table, instead, the Filter changed event will be fired and the applied filters will be accessible in the filters exposed variables. This data can be utilized to execute queries that update the table content according to the applied filters.

Pagination

Pagination helps manage the display of large data sets by dividing them into manageable segments. Client-side pagination is enabled by default. When enabled, an additional property, Number of rows per page, becomes available to set the number of records per page. The default value is set to 10; if disabled, all records will appear on a single page.

Server-side pagination

Server-side pagination can be used to run a query whenever the page is changed. Under events section, you can use the Page changed event to execute a query and along with the pageIndex exposed variable. pageIndex can be used to query the next set of results when page is changed.

When Server-side pagination is enabled, you'll be able to set three other Table properties:

• Enable previous page button: Toggle this off to disable the previous page button from the Table.
• Enable next page button: Toggle this off to disable the next page button from the Table.
• Total records server side: Set a numerical value to display particular number of records.

tip

Check this how-to guide to learn more about server-side pagination.

Additional Actions

Property	Description
Show add new row button	Shows a button to add new rows via a modal. New data is stored in newRows. Use the Add new rows event to save to a data source.
Show download button	Enables download of Table data as CSV, Excel, or PDF. Filename format: Tablename_DD-MM-YYYY_HH-mm.filetype.
Hide column selector button	Controls visibility of the column selector, which lets users choose visible columns.
Loading state	Shows a loading skeleton while data is loading. Bind it to the query’s isLoading property.
Show update buttons	Displays Save changes and Discard changes buttons when any cell is edited.
Visibility	Controls whether the Table is visible on the canvas. Can be toggled dynamically.
Disable	Disables interactivity of the Table when toggled off. Still visible but not usable.
Dynamic height	Automatically adjusts the component's height based on its content.

Devices

Property	Description	Expected Value
Show on desktop	Makes the component visible in desktop view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile	Makes the component visible in mobile view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

Column Header

Style Property	Description	Configuration Options
Column title	Set the color for column title.	Select a theme or choose color from color picker.
Overflow	Select the overflow type.	Choose from None or Wrap.
Header casing	Select the header casing type.	Choose from As typed or AA.
Background	Set the background color for column header.	Select a theme or choose color from color picker.

Data

Style Property	Description	Configuration Options
Text	Set the text color of the component.	Select a theme or choose color from color picker.
Row style	Selects the style of the table rows.	Choose from dropdown: Bordered, Regular, or Striped.
Cell height	Determines the size of the table cells.	Choose between Condensed or Regular size.
Max row height	Controls the maximum height of rows when Content wrap is enabled.	Select Auto or define a Custom size.
Action button radius	Sets the radius for all action buttons.	Enter a value (default is 0).

note

For Custom Max Row Height, the minimum value depends on the Cell height setting:

• When Cell Height is set to Regular, the minimum height is 45 px.
• When Cell Height is set to Condensed, the minimum height is 39 px.

Container

Style Property	Description	Configuration Options
Background	Set the background color for the table.	Select a theme or choose color from color picker.
Border radius	Adds a radius to the borders of the table.	Enter a value (default is 6).
Border	Defines the border color of the Table.	Select a theme or choose color from color picker.
Box shadow	Sets the box shadow properties of the component.	Select the box shadow color, adjust related properties, or set programmatically using fx.
Padding	Sets padding inside table.	Choose between Default or None.

info

Any property having fx button next to its field can be programmatically configured.