Table

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.

Properties

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.

Datasource

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.

Pagination

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.

Title

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

Sorter

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.

Authorization

You can use the authorization options for the table element.

Visibility

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.

Actions

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

2. Styling

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