(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Table

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

Adding a 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 the Table element.

Properties

Table element is a data repeater element. The elements you add to the columns in the province 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

DATA SOURCE

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

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 RowIt represents the rows in the table and automatically multiplies according to the number of data in the data table. However, you can add multiple columns, at least 1 for this row. You can change the order of the added columns and edit the title texts.

Table Header

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.

Table Row

HOVER FONT COLOR

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

HOVER BG COLOR

You can change the background color of the row when the cursor hovers over the row.

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.sorterYou can activate the sorting of the data in the column.

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, hidden, or you can make it appear or hide depending on a condition.

ACTIONS

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

Styling

You can make additional edits to the Table Element by adding a frame, fill color, border, or shadow.

LAYOUT

In the alignment commands given for rows or columns that are parent elements, the child elements under them are affected. You can visit the Layout page to adjust the visual arrangements such as environmental interior spaces and sizing.

TEXT

You can adjust the text of the element and the properties such as color and size of the icon with the text section. You can visit the Text page for detailed information.

FILL

For detailed information on filling their bodies with color or adding a background image, you can visit the Fill page.

BORDER

Visit the Border page to add lines to the outer edges and bevel the corners.

SHADOW

The shadow effect is only displayed in web apps. You can visit the Shadow page to add a shadow effect to the row and its columns.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try