You can have the same data type displayed repeatedly. You can use the Table element to display repetitive data as a list.

Adding Table

You can add the Table element from the Elements panel by dragging and dropping it to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a Column you just add a Table element.

Table supports both web and mobile applications

You cannot use Header, Footer, Content Menu, Gallery View, Flex Grid, Carausel, Horizontal Grid, Pagination elements as Child element in Table element which is Data Repeater element.

Since the Panel element can be added to the Table element as a child element, you can enable the dynamic change of the background. Accordingly, you can add dynamic color and/or image to the background.

Table element is a data repeater element. The elements you add to the columns in the first row of the element will repeat in the next rows, depending on the data source. After selecting the data source, you can connect other elements in the row/column by selecting the fields in the relevant data table. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.

Table Header

It is the area where the table element is edited and where the headers are defined.

Column Titles

Represents column headers in the table element.

Hide On Mobile Resolution

It is a feature used to hide or change on mobile devices.

Text Direction

Determines the direction of the text.

  • Rotate up

Allows the text to rotate vertically from bottom to top.

  • Rotate down

Allows the text to rotate vertically from top to bottom.


It is the field where you select the data source from which the elements in the Table will be fed.

Write Mode

There are write mode vertical and horizontal options in the table header properties section. Depending on the selection you make here, your headers in your table header will be aligned horizontally or vertically.

Show Header

Table header section is visible by default. You can hide it if you wish.

No Data Found Message

You can edit the empty status message to be shown when there is no data in the data table.


Paging can be added while listing data in the data table defined in the Table element.

Hide Table On Empty

In cases where the data table linked to the Table element is empty, you can hide the table.

Table Row

It represents the lines in the table and reproduces automatically according to the number of data in the data table. However, you can add many columns for this row, at least 1. You can change the ranking of the added columns and edit the title texts.

Hover Font Color

You can change the color of the font when the cursor hovers over the line.

Hover Background Color

You can change the background color of the row when the cursor hovers over the row. Click for detailed information.

Dynamic Background Color

You can have the background color change dynamically based on the row's value in a data table. For example, we can give an example where the row of those under 12 years old is red and those over 12 years old are green in the student list.

Table Column

You can make edits on the columns added with Table Row. You can perform operations such as removing the relevant column and changing its order.


You can add the relevant column header. It can be a static value or a dynamic value can be added via the Symbol Picker.


You can activate the sorting of the data in the column.

Sort Order

You can give a sorting rule such that the order is from smallest to largest or from largest to smallest.

Special Sorting Format

You can specify the sorting format of columns with Date/Time value.


You can use the authorization options for the table element.


You can manage the visibility of the element. It is always visible or hidden, or you can make it appear or hide depending on a condition.

You can add the actions that you can add to the Table element with Add Actions.

You can make additional edits by adding a Layout, Text, Fill, Border or Shadow to the Table element.

You can make visual adjustments such as environmental interior spaces and sizing.

You can set the color and size of the Table text and icon with the Text section.

You can add color or image to the table body.

You can add lines to the outer edges of the table and give corner bevels.

You can add a shadow effect to the Table element.

Last updated