Table

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Data” (3) category from the “Elements” (2) panel on the left side.

You can add the Table element from the Elements panel to the screen by drag and drop. If you drag it to an empty space on the screen, it will be added with the Row element. If you drag it into a Column, you will add only the Table element.

You cannot use Header, Footer, Content Menu, Carousel, Horizontal Grid, Pagination elements as Child elements in Table element which is a Data element.

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 following rows depending on the data source. After selecting the data source, you can connect to other elements in the row/column by selecting the fields in the related data table. You can give role-based authorizations to the element and set its visibility with show/hide/conditional options.

• Table Header: It is the area where the headers are edited and defined to organize the Table element.
• Column titles: Represents the column titles in the Table element.
• Datasource: It is the area 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.
• Hide On Mobile Resolution: It is a feature used to hide or change on mobile devices.
• Fixed Header: Keeps the header section of the table fixed so that the headers remain visible when the page is scrolled.
• Editable: Determines whether the cells in the table are editable or not, so that the table data can be edited directly.
• Table Width Mode: Sets the width mode of the table.
• Global Search: Allows you to perform a keyword search on all data within the table. In large and complex data sets, it makes it easier to find specific information.
• ‍Searchable: When you activate the Searchable feature, an input element is added to the top right of the Table element, allowing you to search within the table.
• Sorter: You can sort the string, number or date columns in descending order or ascending order.
• Filtering: In the Table element, it offers different filtering options according to the data type of the columns (String, Number or Date). For example, when one of the options such as contains, equals, begins with is selected for String columns, a column-based filter can be applied according to this option. The options are specific to the column type. Filtering is active after three letters and the search is automatically refreshed each time a letter is entered, thus providing a more dynamic and faster filtering.

The filtering options are specific to the column's data type and only work on tables with a data connection.

• Pagination: You can add pagination when listing data in the data table defined in the Table element.
• Page Size: Determines the number of rows to be displayed on each page.
• Show Size Changer: Allows you to change the page size.
• Size Changer Options: Determines the options to change the page size. (For example, the number of rows can be 10, 20, 50, etc.)
• Column Chooser: Determines which columns will be displayed on the table.
• Resizable Columns: Determines whether the columns in the table are resizable or not.
• Hide Table On Empty: You can hide the table when the data table connected to the Table element is empty.
• Striped: Allows the rows in the table to be shown striped with alternate background colors.
• Striped Color: Determines the background color of the striped rows.
• Row Hover Background Color: You can make the row background color change when hovering over the row.
• Insert Row Active: Determines whether the new row insertion process is active or not.
• Insert Row Position: Determines the position (top or bottom) of the newly inserted row.
• Show No Data Found: Shows the “No Data Found” message when there is no data in the table.
• No Data Found Message: You can add a placeholder message to preview and display at runtime when no dynamic data is bound to the Table element in the query.
• No Data Found Image: You can add a placeholder image to preview and display at runtime in cases where no dynamic data is connected to the Table element in Kuika.
• Multi Select: Allows you to select multiple rows in the table. You can edit, delete or apply other operations to rows collectively.
• Selected Values: Stores the values of the selected rows in the table.
• Selected Row Color: Determines the background color of the selected rows.
  

The Inline Grid property is used with EditableTableColumn added to the Table element and allows you to not only view, but also edit and save data in your table. In order to use the Inline Grid feature, you need to add EditableTableColumn to the Table element.

To add Editable Table Column to Table element;

1. Select the Table element on the screen.
2. Open the Properties panel.
3. Click Add Editable Table Column under Table Row and the column will automatically come with a Label element.

Adding an EditableColumn

EditableTableColumn, unlike regular TableColumn, is not editable during the design process and has standard properties. However, you can bind dynamic data to the column and make style edits of the column.

To bind a data source to the Table element to work with dynamic data in EditableTableColumn;

1. Select the Table element.
2. In the Properties panel Datasources field, select the action you want to use as a data source from the actions you added to the screen as Initial Action.

Binding data to Label in Editable Table Column

To bind dynamic data in the Label element in Editable Table Column;

1. Select the Label element in Editable Table Column.
2. Select the data you want to display with the Field to Display parameter in the Value field in the Properties panel.
3. Select the element you want to use when editing the table via the Edit Mode Component parameter. For example, you can use the TextInput element to enter a name, while you can use the Selectbox element to select a department.

In an example scenario, a table consisting of EditableTableColumns and containing the customer address and customer name looks like in Figure 3.

Example EditableTableColumn Usage

As shown in Figure 3, the first row of the Table element consisting of EditableTableColumns appears as if it is in edit mode. However, you can manage the Property and Styling settings of the elements in the columns.

When you preview or publish your application, you can switch to edit mode by double-clicking on the relevant row.

You can save values by pressing Enter or by clicking outside the table.

To save the values you edited, you need to save the new values with the action you defined in the on Row Edit Finished event of the Table element.

On Row Edit Finished is an event that is meaningful only in the Inline Grid property of the Table and is the event to define the actions that will be called to add/update records to the database when you finish editing the row.

In the On Row Edit Finished event, after the action that completes the record operation, it is necessary to redefine the action that is the data source of the table.

Let's run a sample scenario where customer address and customer name are listed in an editable structure.

1. First, add the action that will provide the listing function to the screen as Initial Action.
2. Then add a Table element to the screen.
3. With Table element selected, select Add Action>On Row Edit Finished>ManagedDb>Save Record via Properties panel.
4. Define the relevant parameter under the Save Record action. An example definition process is shown in Image 4.

Save Record Action Parameter Definition

1. After adding the Save Record action, add the action that will provide the listing function by following the Add Action>On Row Edit Finished steps with the Table Element selected.
2. Then select the Label elements in the columns and define the value via Properties panel, Value field.

With the Inline Grid feature in the applications you develop, you can not only display the data on the Table element, but also edit and save it, and add new functions to your application.

You can give a color change effect as hover on the rows of the Table element you use on list screens.  

Select the Table element you want to add hover property to. Click row Hover Bg Color in the Properties panel.

Set the Hover color via color in the panel that opens.

The “Sorter” property of the Table element allows you to sort the data in the table according to a specific sorting criteria (such as A to Z). This property helps you to display the table in ascending or descending order. Here are the general functions of the Sorter feature:

• Sort Criteria: You can sort the data in the table in ascending (A to Z) or descending (Z to A) order based on the selected column. This way, you can make your data more organized and accessible.
• Customization: Sorting operations are usually performed dynamically in the user interface and you can customize the sort order according to your needs.
• Performance: You can perform sorting operations quickly and efficiently in tables with large data sets.

To use the Sorter feature of the Table element:

1. After logging into the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” module, drag and drop the Table element under the “Commonly Used” or “Data” category from the “Elements” panel on the left side.

In order to use the Sorter feature on Table, it is first necessary to bind data to the table.

3. Open the “Datasource” field from the “Properties” panel on the right side.
4. Select the action you want to use as a data source from the actions you added as “Initial Action”. After connecting your data source, the table will be automatically populated with data. This data will be used for sorting operations.

5. Then open the key from the “Sorter” field.

6. You can sort the String, Number or Date columns from smallest to largest or from largest to smallest by clicking on the sort sign next to the table headers.

Kuika's Clear Table Filtering Configs action, specific to the Table element, is used to reset the filtering settings you have applied to your table data. By removing the filtering operations previously performed on the table, it makes all data visible again. In this tutorial, you will learn how to add the Clear Table Filtering Configs action to the Table element.

This training content consists of the following topics:

1. Adding a Table element to your application.
2. Adding Clear Table Filtering Configs action.

Add Table Element to Your Application

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left edge.

Add Clear Table Filtering Configs Action

The Clear Table Filtering Configs action does not delete the data in the table columns, it only clears the filters.

1. Click on the Table element you added to your application.
2. Then, while in the “UI Design” module, open the “Properties” panel on the right side.
   

       3. Select “on Config Change > Export > Clear Table Filtering Configs” from the “+ ADD ACTION” drop-down menu.

       4. You can select the table from the “Select a Table” field to delete the filtering operations done before.

Kuika's Export Table Configs action, specific to the Table element, allows you to export your table data. You can specify in which format you want to export your data. In this training content, you will learn how to add the Export Table Configs action to the Table element.

This training content consists of the following topics:

1. Adding a Table element to your application.
2. Adding Export Table Configs action.

Add Table Element to Your Application

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left edge.

Add Export Table Configs Action

1. Click on the Table element you added to your application.
2. Then, while in the “UI Design” module, open the “Properties” panel on the right side.
   

     3. Select “on Config Change>Export>Export Table Configs” from the “+ADD ACTION” drop-down menu.

4. You can select the table you want to export from the “Select a Table” field.
   

Kuika's Import Table Configs action, specific to the Table element, allows you to import your table data from files such as Excel or CSV into your application. You can quickly and efficiently connect data sets to the table element used in the application. In this tutorial, you will learn how to add the Import Table Configs action to the Table element.

This training content consists of the following topics:

1. Adding a Table element to your application.
2. Adding an Import Table Configs action.

Add Table Element to Your Application

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left edge.

Add Import Table Configs Action

1. Click on the Table element you added to your application.
2. Then, while in the “UI Design” module, open the “Properties” panel on the right side.
   

     3. Select “on Config Change>Export>Import Table Configs” from the “+ADD ACTION” drop-down menu.

4. Select the table you want to import from the “Select a Table” field.
5. Then, in the “configJSON” field, enter the JSON configuration settings that determine how your table data will be structured during the import process.

Kuika's Reset Table Configs action, specific to the Table element, allows you to delete all configuration settings applied to the table. It resets custom settings, filtering, sort orders, column configurations and all other personalized settings made on the table. In this tutorial, you will learn how to add the Reset Table Configs action to the Table element.

This training content consists of the following topics:

1. Adding a Table element to your application.
2. Adding a Reset Table Configs action.
   

Add Table Element to Your Application

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left edge.

Add Reset Table Configs Action

1. Click on the Table element you added to your application.
2. Then, while in the “UI Design” module, open the “Properties” panel on the right side.
   

      3. Select “on Config Change > Export > Reset Table Configs” from the “+ ADD ACTION” drop-down menu.

     4. You can select the table from the “Select a Table” field to delete all previously made configuration settings. 

If you reopen a table that you have previously filtered or hidden its columns, it will automatically return with the previous settings. This feature improves your user experience and increases your productivity. It also allows you to create custom table configurations based on department. In this tutorial, you will learn how to save your previous filter and hide settings and how to restore them. This way, you can work seamlessly with previous edits of your table and easily make adjustments to suit your specific needs.

Step 1: Add Table Element to Your App

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left side.

3. Configure the “Searchable, Filtering and Column Chooser” settings from the Properties panel.some text
   • Searchable: Allows you to search the table.
   • Filtering: Allows you to filter your table data.
   • Column Chooser: Allows you to hide or show columns.
4. Then click the“RUN” button in the upper left corner.

Step 2: Saving the Table to Managed DB with Export Table Configs Action

Suppose you type the word you want to search for in the first column of the table and filter it.

In this case, the current state of the table, that is, the applied filters and column settings, is exported as a string in JSON format via the “Export Table Config” action and this data is saved in the “Tables” field in the Managed DB panel.

For example, you created a data table named “TableConfig” and added “Id” and “Json” columns to it. During the “Export” operation, the table JSON data is saved in this table.

Step 3: Loading the Configuration with Import Table Configs Action

When you open the table again or click on the “Import” button, this previously saved configuration is reapplied to the table. It loads the table with the saved filters and column settings.
Once these steps are complete, when you open the table again, it will automatically load with the last saved filter and column settings. This eliminates the need to readjust the table each time.

You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” provides access by verifying user account information.

For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.

It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.

1. Click on the element on the screen.
2. Open the “Properties” panel on the right side.
3. Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

• Always Visible: Ensures that the screens in your app are always visible. ‍
• Hidden: Allows hiding screens in your application. ‍
• Sometimes Visible: Makes screens in your application conditionally visible.

Allows you to make elements editable.

• Enabled: Selecting this option makes the element editable.
• Disabled: In this case, the element cannot be edited.
• Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.

By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.

The sections defined below vary depending on the element.

• Layout‍: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
• Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
• Fill: You can use the Fill setting to customize the element's background with color or images.
• Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
• Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.

Kuika contains system actions such as Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.

In addition to system actions, you can also use SQL actions that you create yourself.

To add actions to elements, you can use the “+ADD ACTION” button from the Properties panel on the right side.