(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.

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.

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.

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

You can make visual adjustments such as environmental interior spaces and sizing. Depending on the table size, you can align the elements in it.

TEXT

You can set the properties such as the color and size of the table text and icon with the text section.

FILL

You can add color or image to the table body.

BORDER

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

SHADOW

You can add shadows to the table.

Simplicity Meets High Performance

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