1.Table Element Overview

Kuika's Table element allows you to display data in a structured and understandable table format in your applications. Users can examine, compare, and manage data through rows and columns. The Table element provides an effective solution in many scenarios, such as data lists, report screens, management panels, and information presentations.

The Table element is supported in web and mobile applications. On the mobile side (Android & iOS), columns now automatically adapt to the screen thanks to the advanced responsive table view, optimizing the user experience.

1.1. Common Use Cases

Displaying tables from the database, such as

• user, product, order, task, and record lists.
• Listing data with filtering and searching.
• Redirecting to the detail page: Going to the detail screen when clicking on a row.
• Performing CRUD operations by adding edit & delete buttons.
• Reporting screens: Totals, groupings, column-based summarization.
• Displaying large data sets by splitting them with pagination.
• Responsive table usage on mobile devices.
• Row-based coloring: Rows in different colors according to status (e.g., Approved, Pending, Rejected).
• Displaying buttons, icons, badges, images within the table.
• Hiding/showing columns based on user permissions.

2. Key Features

• Dynamic data binding (Datasource): Data can be loaded by binding an action or datasource to the Table.
• Column configuration: Settings such as label, field, format, width, alignment, formatter and visibility can be configured.
• Pagination support: Large data sets are shown across pages.
• Column-based sorting is supported.
• Mobile responsive table: On mobile, columns can be listed in a card view.
• Column types for different purposes: Text, numeric, date, icon, button, status labels, etc.
• Conditional visibility: Columns can be shown or hidden with Visibility settings.
• Mobile app support: Multi select, pagination, search, sorting, filtering, export to Excel, row insertion and editing are also available in iOS and Android apps.

2.1. Table Element Properties

The Table element is a data repeater element. The elements you add to the columns in the first row repeat in the following rows based on the data source. After selecting the data source, you can bind other elements in the row or column to fields in the related data table.

2.1.1. Table Properties

These cover the functionality, appearance and interaction settings of the table as a whole.

• DataSource: DataSource specifies the data set the table is bound to.
• RowKey: RowKey sets the field that uniquely identifies each row. It ensures that rows selected with MultiSelect are tracked correctly.
• TransformedOnMobileResolution: TransformedOnMobileResolution turns the table into a card view at mobile resolution.
• HideHeaderOnMobileResolution: HideHeaderOnMobileResolution hides the table header at mobile resolution.
• ShowHeader: ShowHeader determines whether the table headers are shown.
• FixedHeader: FixedHeader keeps the headers in place even when the page is scrolled.
• TableWidthMode: TableWidthMode determines how the table width is calculated. With Horizontal Scroll, the table can be scrolled horizontally; with Fit, the table fits the screen width. The footer also follows this setting.
• Editable: Editable determines whether the table can be edited. An edited row is saved with the ✓ button and cancelled with the ✕ button.

In Android apps, Select Box is supported as an editable component in an editable Table.

• EditableAlwaysActive: EditableAlwaysActive keeps cell edit mode always on.
• InsertRowActive: InsertRowActive enables adding new rows.
• InsertRowPosition: InsertRowPosition determines whether a new row is added at the top or at the bottom.
• GlobalSearch: GlobalSearch enables a general search across all table data.
• Searchable: Searchable shows a search box in the top right corner.
• ShouldSearchOnChange: ShouldSearchOnChange filters results instantly as the user types in the search box.
• SearchDelay: SearchDelay sets the wait time before a search runs, in milliseconds.
• Sorter: Sorter enables sorting of columns.

Filtering options depend on the column's data type and only work in tables with a data binding.

• Filtering: Filtering allows columns to be filtered based on their data type. It offers different filtering options depending on the column's data type (String, Number or Date). For example, for String columns, choosing an option such as contains, equals or begins with applies a filter to that column. With multi filter support, a second filter field appears automatically after the first condition is entered, and conditions can be combined with AND/OR. Values can also be filtered by picking them from a list in the Values tab. Filtering becomes active after three characters, and the search refreshes automatically with each character entered, providing faster and more dynamic filtering. Filtering works with both Turkish and English character sets, so no issues occur due to language differences.
• ResizableColumns: ResizableColumns allows column widths to be adjusted.
• Pagination: Pagination splits the data into pages. It is on by default in web and mobile apps.
• Current: Current determines which page the table opens on.
• PageSize: PageSize sets the number of rows shown on each page.
• ShowSizeChanger: ShowSizeChanger lets users change the page size.
• PaginationSelectedTextColor: PaginationSelectedTextColor sets the text color of the active (selected) page number.
• PaginationUnselectedTextColor: PaginationUnselectedTextColor sets the text color of inactive page numbers.
• SizeChangerOptions: SizeChangerOptions sets the page size options (e.g. 10, 20, 50).
• ColumnChooser: ColumnChooser lets users choose which columns are shown.
• AutoSaveTableConfig: AutoSaveTableConfig is a switch that makes the table remember each user's view (column visibility, sorting, global search, column search and column filters). It is off by default.
  
  • When off: no preferences are saved; all settings reset when the page is refreshed, and no gettableconfig request is sent.
  • When on: a gettableconfig request is sent when the page opens to load the saved layout; a savetableconfig request is triggered when the user changes search, sorting, filters or column visibility. All preferences are restored when the page is refreshed.
  • Settings are saved per user and kept separately for each screen and element.
  • If a column is hidden with HideSearch, HideFiltering or HideSorting, or the column is deleted from the design, its saved search, filter or sorting preference is not applied.
  • When GlobalSearch is turned off on the table, the filter is not applied even if a global search preference was saved.
• ExcludeSearchFromTableConfig: ExcludeSearchFromTableConfig is a switch that, while AutoSaveTableConfig is on, excludes only the global search and column search texts from what is saved. It is off by default.
  
  • When on: search texts are not saved or restored, while column visibility and sorting preferences are still remembered.
• HideTableOnEmpty: HideTableOnEmpty hides the table when there is no data.
• Striped: Striped shows rows in a striped pattern.
• StripedColor: StripedColor sets the background color of the striped rows.
• RowHoverBgColor: RowHoverBgColor sets the background color shown when hovering over a row.
• ShowRowNumbers: ShowRowNumbers shows row numbers at the start of each row.
• ShowNoDataFound: ShowNoDataFound shows a "no data found" message when there is no data.
• Nodatafoundmessage: Nodatafoundmessage lets you customize the message shown when no data is found.
• NoDataFoundImage: NoDataFoundImage sets the image shown when there is no data.
• MultiSelect: MultiSelect allows multiple rows to be selected at the same time in the table. It is supported in web, iOS and Android apps. The values of the selected rows are kept in the SelectedValues property and can be used as parameters in actions. The number of selected rows can be shown with the SelectedCount property.
• MultiSelectScope: MultiSelectScope sets the scope of multi select. With Page, only the rows on the current page can be selected; with All, all rows in the table can be selected.
• MultiSelectCheckboxColor: MultiSelectCheckboxColor sets the color of the selection checkboxes in rows while MultiSelect is on. The checkboxes of selected rows, the partial selection box in the header, the hover border, the click effect and the focus ring all use this color. The color applies only to that table. If left empty, checkboxes appear in the default blue. Available only in web apps.
• SelectedValues: SelectedValues holds the values of the selected rows. It can be given as a fixed value, set with the SetValueOf action and read as Table.selectedValues to use in other elements and actions.
• SelectedRowColor: SelectedRowColor sets the background color of the selected row.
• SelectedCount: SelectedCount shows the number of selected rows while MultiSelect is on.
• Export: Export enables exporting the table (Excel, CSV). In mobile apps, the table is created as an .xlsx file and the device's share screen opens.
• ExportButtonBgColor: ExportButtonBgColor sets the background color of the Export button.
• ExportFileName: ExportFileName sets the default name of the exported file.

In web apps, you can drag a Progress Bar or Progress Circle into Table cells to show progress for each row visually.

2.1.2. Columns Properties

These properties appear when a column is selected. Each controls the column's appearance, function or behavior.

• Title: Title sets the column title shown to the user.
• SecondTitle: SecondTitle sets a secondary title shown below the column title.
• Group: Group is used to group columns in the header.
• GroupBackgroundColor: GroupBackgroundColor sets the background color of the group header.
• GroupFontColor: GroupFontColor sets the font color of the group header.
• GroupFontSize: GroupFontSize sets the font size of the group header.
• GroupFontWeight: GroupFontWeight sets the font weight of the group header.
• TitleBgColor: TitleBgColor sets the background color of the column title.
• TitleFontColor: TitleFontColor sets the font color of the column title.
• SpecialSortingFormat: SpecialSortingFormat applies a custom rule when sorting.
• AlwaysVisibleOnMobileResolution: AlwaysVisibleOnMobileResolution keeps this column always visible on mobile.
• HideFiltering: HideFiltering prevents filtering on this column.
• HideSorting: HideSorting prevents sorting on this column.
• HideSearch: HideSearch hides the search box on this column.
• FooterOptions: FooterOptions adds footer information to this column. The Count, Sum, Average, Min and Max options can be used.
• FooterFormatter: FooterFormatter defines custom formatting rules for the footer.
• FooterOptionLabel: FooterOptionLabel sets the title or text shown in the footer.
• FooterFontSize: FooterFontSize sets the font size of the footer.
• FooterFontColor: FooterFontColor sets the font color of the footer.
• FooterTextAlign: FooterTextAlign sets the text alignment of the footer (left, right, center).
• ExcludeFromExport: ExcludeFromExport leaves this column out of exports.
• Fixed: Fixed pins the column so it stays in place when the table is scrolled. In tables that use Fixed, column widths are calculated correctly, and column visibility works reliably in "Sometimes Visible / Hidden" scenarios.
• Placeholder: Placeholder sets the text shown when an editable cell is empty.
• DateSearchFormat: DateSearchFormat sets the date format used when searching Date columns (e.g. DD.MM.YYYY, MM/DD/YYYY).
• FooterFontWeight: FooterFontWeight sets the font weight of the footer text, making it more prominent or plainer.

2.1.3. Title Properties

These become active when a column title is selected and let you edit the column's title area.

• ColumnTitles: ColumnTitles represents the column titles in the table, usually the titles in the first row.
• HideOnMobileResolution: HideOnMobileResolution hides the table titles on mobile.
• TextDirection: TextDirection sets the direction of the title text (left to right / right to left).

2.1.4. Using Sorter in the Table Element

1. Add the Table element and connect the data source.

To use the Sorter feature on the Table, you must first connect data to the table.

2. Open the Sorter feature from the Properties panel on the right side.
3. Users can sort data in ascending or descending order by clicking the sort icon in the column headers.

2.1.5. Using Inline Grid in the Table Element

The Inline Grid feature is used with the Editable Table Column added to the Table element and allows you to not only view data in your table, but also edit and save it. To use this feature, you need to add Editable Table Column to the Table element.

Adding Editable Table Column to the Table Element

1. Select the Table element on the screen.
2. Open the Properties panel.
3. Click the Add Editable Table Column button under Table Row.
   
   • The column will be added automatically with a Label element.

Using Editable Table Column

• Editable Table Column is different from the standard Table Column. It cannot be edited directly during the design process and has basic properties.
• You can bind dynamic data to the column and make style adjustments.

Using Dynamic Data in Editable Table Column

1. Select the Table element.
2. Go to the Datasources field in the Properties panel.
3. From the actions you added to the screen as Initial Action, select the action you want to use as the data source.

Binding Data to the Label Element in the Editable Table Column

1. Select the Label element in the Editable Table Column.
2. In the Properties panel, select the data you want to display from the Field to Display parameter in the Value field.
3. Use the Edit Mode Component parameter to specify the element to be used during editing.
   
   • For example, the TextInput element can be used for name entry, and the Select Box element can be used for department selection.

Example of Editable Table Column Usage

• In a Table element consisting of Editable Table Columns, the first row may appear in edit mode.
• You can manage the Property and Styling settings of the elements in the columns.
• During the preview or publishing phase of the application, you can switch to edit mode by double-clicking on the row.
• You can save the values by pressing the “Enter” key or clicking outside the table.

To save the values you have edited, you must save the new values with the action you have defined in the “On Row Edit Finished” event of the Table element.

Using On Row Edit Finished

On Row Edit Finished is only meaningful with the Table's Inline Grid feature. It is used to define actions to be executed to add/update records to the database after editing the row is complete.

• In the On Row Edit Finished event, the table's data source action must be called again after the record operation is complete.

Example Scenario: Listing Customer Address and Customer Name as Editable

1. Add the action that will provide the listing function as the Initial Action.
2. Add a Table element to the screen.
3. With the Table element selected, follow these steps in the Properties panel:
   
   • Add Action → On Row Edit Finished → Managed DB → Save Record
   • Under the Save Record action, define the relevant parameters.
4. After adding the Save Record action, add the On Row Edit Finished action again to define the action that will provide the listing function.
5. Select the Label elements in the columns and define the data through the Value field in the Properties panel.

Thanks to the Inline Grid feature, you can not only view data in the Table element, but also edit and save it. This feature adds dynamic editing and data saving functions to your applications.

2.1.6. Using Inline Edit on Mobile

The Inline Grid structure used in the Table element is now also supported in mobile applications (Android & iOS). This feature allows users to edit table rows directly from their mobile device.

1. Preparing the Table Element

• Enable the Editable feature.
• Add editable columns for inline editing using Add Editable Table Column.

2. EditableTableColumn Configuration

Within Editable Table Column:

• Link the data from the Value / Field to Display field to display the data in the column.
• Select the component to be used during editing (TextInput, Selectbox, etc.) from the Edit Mode Component field.

This structure ensures that the appropriate input opens when the user taps the cell on mobile.

3. Save Record Process

• Save Record works in a manner compatible with inline editing.
• Save Record is triggered when the user finishes editing.
• The “On Row Edit Finished” event is not currently available in the UI and therefore cannot be used.

To save the edited data:

1. On the Edit Mode Component within the edited EditableTableColumn
2. define the Save Record action.
3. When the save operation is successful:
4. On Success → call the listing action again
5. (e.g., Initial Action).

This method is the correct workflow for both mobile and web.

4. User Flow on Mobile

Inline editing works as follows on mobile devices:

• The user taps the cell they want to edit.
• The EditMode Component becomes active and the mobile keyboard opens.
• The user edits the value.
• When editing is complete:
  
  • Presses the Done/Enter key or
  • Taps outside the cell.
• This triggers the Save Record action.
• The table's data source is refreshed and the updated value is displayed.

5. Recommendations for Mobile Design

• Limit the number of columns; hide unnecessary columns on mobile screens.
• Use the Always Visible On Mobile Resolution feature for critical columns.
• You can add a light background or icon to visually distinguish editable cells.

Inline Edit in the Table element now works stably in both web and mobile applications. Users can easily edit rows on mobile devices, save them with Save Record, and update the table instantly.

2.1.7. Using Hover in the Table Element

You can enhance the user experience by adding a hover effect to the rows of the Table element. The hover effect changes the background color when the user hovers over a row.

Steps to Add a Hover Effect

1. Select the Table element to which you want to add the hover feature.
2. Open the Properties panel.
3. Click on the Row Hover Bg Color option.
4. In the panel that opens, use the Color option to set the hover color.

With this setting, the background color will change when the user hovers over the rows with the mouse.

2.1.8. Saving and Restoring Table Filter Settings

1. After adding the Table element to your application, configure the Searchable, Filtering, and Column Chooser settings from the Properties panel on the right side.
   
   • Searchable: Allows you to search the table.
   • Filtering: Allows you to filter your table data.
   • Column Chooser: Allows you to hide or show columns.
2. Then click the Preview button in the upper left corner.
   
   • You can save previously filtered or hidden columns.
   • The saved settings are automatically restored when the table is reopened.
   • You can export them in JSON format with the Export Table Config action.
   • You can reload previously saved settings with the Import Table Config action.

Saving the Table to Managed DB with the Export Table Configs Action

Let's assume you typed the word you want to search for in the first column of the table and filtered it.

In this case, the current state of the table, i.e., 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 the “Id” and ‘Json’ columns to this table. During the “Export” process, the table JSON data is saved to this table.

In the Table element, column display order and visibility preferences (including selections made via the Column Chooser and reordering columns by dragging) are automatically saved by the system for each user and automatically applied during the next session. There is no need to define the ExportTableConfig action or set up a separate Managed DB table for this behavior; these user-specific preferences are managed by the system without any additional configuration.

If you wish to permanently save other table configurations, such as filter conditions and search settings, you must use the Export/Import Table Config actions described below.

2.1.9. Resetting Filtering Settings in the Table Element

Kuika's Clear Table Filtering Configs action, specific to the Table element, is used to reset the filtering settings applied to table data. This action removes any previous filtering operations, making all data visible again.

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. While in the UI Design module, open the Properties panel on the right side.
3. From the + ADD ACTION drop-down menu, select on Config Change → Export → Clear Table Filtering Configs.
4. To remove previously applied filters, select the relevant table from the Select a Table field.

After completing these steps, all filtering applied to the Table element will be cleared, and all data will become visible again.

2.1.10. Exporting and Importing Table Data

Exporting

1. Select the Table element.

2. From the +ADD ACTION menu, select on Config Change → Export → Export Table Configs.

3. Select the table you want to export.
4. Applied filters and column settings are exported as a string in JSON format via the Export Table Config action, and this data is saved in the Tables area of the Managed DB panel. For example, you created a data table named TableConfig and added Id and Json columns to this table. During the Export process, the table JSON data is saved to this table.

Import

1. Select the Table element.

2. From the +ADD ACTION menu, select on Config Change → Export → Import Table Configs.

3. Specify the table you want to import and configure the JSON settings.
4. When you reopen the table or click the Import button, this previously saved configuration is reapplied to the table. It loads along with the filters and column settings saved to the table. Once these steps are complete, when you reopen the table, it automatically loads with the last saved filters and column settings. This eliminates the need to reconfigure the table each time.

2.1.11. Resetting Table Settings

1. Select the Table element.

2. From the +ADD ACTION menu, select on Config Change → Export → Reset Table Configs.

3. All settings are reset to their default values.

2.1.12. Displaying Data Under the Table in Groups

1. Select the Table element.
2. Add the Collapse element from the Interactive category in the Elements panel of the UI Design module under the data rows in the Table.
3. Create an SQL Action for the relevant table.

Creating an SQL Action

1. Click the + icon next to the Actions heading in the left panel.
2. Select New SQL Action from the menu that opens.

3. Write your SQL query using the SQL Editor and click the CREATE button.
4. You can get suggestions by enabling the Generate with AI option from the Kuika AI assistant.
5. You can view, rename, and delete the action you created in the left panel.

6. To edit, click on the action and select the Edit option.
7. You can update existing SQL queries by clicking the Update button.
8. Use the Delete option to delete the action.

Collapse Layout

1. In the Collapse element, specify the area to be grouped.
2. For example, if you want to group customer information, select the customer name as the header.
3. Add the necessary fields for detailed data to the Collapse.
4. Each row of the table represents a customer.
5. When the row is expanded, the detailed list of customer orders becomes visible.

The Collapse element used within the Table has been enhanced so that it can now be expanded and collapsed using an action. This allows panels to be controlled not only by user clicks but also programmatically using the “Open Collapse Panel Of,” “Close Collapse Panel Of,” and “Toggle Collapse Panel Of” actions. This feature is supported only in web applications.

2.1.13. Using the Master-Detail Feature in the Table Element

To use the Master-Detail feature, follow these steps:

1. Add a Table element from the Data category in the Elements panel on the left.
2. Drag a second Data Repeater category element into the relevant area.
3. Add elements suitable for the data returned via Datasource to the Table.
4. Create a data-returning Action and link it to the Page Init event.
5. Select the Table element you will use as the Master.
6. Select the Action Result you created as the Datasource.

7. Specify the Table element you will use for Detail.

8. As the Datasource, specify the second list within the data in the Master table.

9. Arrange the other elements according to your needs.
10. After completing all the steps, your Master-Detail table will be ready for use.

The Kuika platform does not directly support the Master-Detail feature with SQL. However, it is possible to manage this process with SQL queries.

Master-Detail Feature with SQL Support

The Kuika platform does not directly support the Master-Detail feature with SQL. However, you can manage the Master-Detail relationship using SQL queries. Below is an example of C# code:

‍

using Newtonsoft.Json;
using RestSharp;
using System;
using System.Collections.Generic;
using System.Data;
using Microsoft.Data.SqlClient;
using System.Linq;
using Kuika.Common.Helpers;
using Kuika.Common.Settings;
using Kuika.Common.Classes;
using Kuika.Common.Accessors;
namespace Kuika.ThirdPartyApisCollection
{
public class myClass
{
public static List<myList> returnSQLList(string connectionString)
{
List<myList> myListObj = new List<myList>();
string getMasterCommand = “SELECT * FROM MasterTable”;
var masterResult = KPersister.Fetch(connectionString, getMasterCommand, null);
foreach (var masterObject in masterResult.ResultList)
{
myList newObj = new myList();
newObj.objectName = masterObject.GetValueByFieldName(“ObjectName”).ToString();
var prms = new List<kSqlParameter>()
{
new kSqlParameter() { Name = “masterId”, Value = masterObject.GetValueByFieldName(‘Id’).ToString() }
};
string getDetailCommand = “SELECT * FROM DetailTable WHERE masterId = @masterId”;
var detailResult = KPersister.Fetch(connectionString, getDetailCommand, prms.ToArray());
newObj.nestedList = new List<myNestedList>();
foreach (var detailObject in detailResult.ResultList)
{
myNestedList nestedListObj = new myNestedList();
nestedListObj.test1 = detailObject.GetValueByFieldName(“Data1”).ToString();
nestedListObj.test2 = detailObject.GetValueByFieldName(“Data2”).ToString();
nestedListObj.test3 = detailObject.GetValueByFieldName(“Data3”).ToString();
newObj.nestedList.Add(nestedListObj);
}
myListObj.Add(newObj);
}
return myListObj;
}
}
public class myList
{
public string objectName { get; set; }
public List<myNestedList> nestedList { get; set; }
}
public class myNestedList
{
public string test1 { get; set; }
public string test2 { get; set; }
public string test3 { get; set; }
}
}

Master-Detail Example Using Custom C#

You can also manage Master-Detail tables with Custom C# code. The following example shows how to group detail data by creating an object list:

‍

public static List<myList> returnMyList()
{
List<myList> myListObj = new List<myList>();
myList myListItem = new myList { objectName = “testObj1” };
myListItem.nestedList = new List<myNestedList>
{
new myNestedList { test1 = “a”, test2 = “b”, test3 = “c” },
new myNestedList { test1 = “d”, test2 = ‘e’, test3 = “f” },
new myNestedList { test1 = “g”, test2 = ‘h’, test3 = “i” }
};
myListObj.Add(myListItem);
return myListObj;
}

With this method, you can manage your Master-Detail tables with Custom C# code and optimize your data.

This guide explains in detail how you can use Kuika's Table element. By effectively configuring the Table element, you can improve the user experience and manage your data in a more organized manner.

2.1.14. Actions That Can Be Added to the Table Element

The Table element is an advanced list that can trigger actions based on user interactions. Specific events can be automatically triggered as a result of actions performed on the table. These actions are used to manage interactions such as row selection, editing, adding, double-clicking, and configuration changes.

When you select the Table element, the following triggers can be added via the ADD ACTION button in the right panel:

onClick

Triggered when the user single-clicks on a table row.

Usage Scenarios:

• Open row details
• Redirect to another page based on the selected row's ID
• Display the relevant record by opening a modal
• Synchronize the table with another component

This trigger provides the data of the selected row as Current on each click.

onRowEditFinished

Triggered when the user completes editing a row. (Meaningful when Inline Edit / EditableTableColumn is used.)

Use Cases:

• Save the edited data to the database with the Save Record action
• Refresh the table after the update
• Perform validation checks after editing

onConfigChange

Triggered when the user changes the table configuration.

These changes include:

• Column sorting
• Hiding/showing columns (ColumnChooser)
• Filter changes
• Search field changes

Usage Scenarios:

• Saving the user's table settings (e.g., filter & column layout) to Local Storage
• Creating a personalized table template
• Managing the table view on a per-session basis

onRowDoubleClick

Triggered when the user double-clicks on a table row.

Use Cases:

• Quickly open row details
• Redirect to the editing screen
• Display all record information in a modal
• Create a quick editing flow in management screens

This trigger is particularly common in desktop applications.

onSelectedValuesChange

Triggered when the user selects rows or changes selections.

(Covers multiple rows if multiselect is active.)

Usage Scenarios:

• Apply bulk operations to selected rows (delete, update, export, etc.)
• Transfer selected values to another element
• Update linked charts on dashboard-like screens

Works with the SelectedValues parameter.

onInsertRowFinished

Triggered when the user completes adding a new row to the table. (InsertRowActive must be active.)

Usage Scenarios:

• Add the new record to the database using Save Record
• Refresh the table after the record is added
• Perform validation or logging operations after row insertion

It is particularly useful in CRUD structures.

onChange (Slider / Range Slider)

The onChange event is now supported for Slider and Range Slider elements used within a table. This event is triggered when the user changes the slider value.

Use Cases:

• Filtering table data based on the slider value
• Triggering dynamic actions based on the selected range
• Transferring the slider value to another element or data source

The onChange and other events for the Slider and Range Slider elements used within a table are now supported. When the user changes the slider value, the corresponding actions can be triggered.

Recommendations for Action Usage

• When Inline edit is used, onRowEditFinished must be supported by a Save Record action.
• If the user wants to create a custom table view, the onConfigChange trigger can be used.
• On screens requiring multiple selections, a bulk processing flow can be set up with onSelectedValuesChange.
• For double-click behavior in web applications, as per user habit, onRowDoubleClick is recommended.

2.1.15. Filtering in Table Preview — Conditions and Values Tabs (Excel-Like Experience)

The Values tab is available in the column filtering window of the Table element, similar to the filtering experience in Excel. Users can now click the filter icon for a column and filter by selecting values from a list consisting of the actual data in that column. The existing Condition tab has been retained and continues to function as before.

Prerequisites

For the filtering feature to work:

• A data source must be connected to the Table element.
• The Filtering feature must be enabled for the relevant column (Table > Properties > Filtering).
• If you want to disable column-level filtering, you can enable the “Hide Filtering” option for the relevant column.

Step 1 — Opening the Filter Window

In a table opened in Preview or Run mode, a filter icon appears next to the header of each filterable column. Clicking this icon opens the filter window. The window contains two tabs: Condition and Values. The selected tab is displayed as active (highlighted); text, boxes, and buttons are presented in a well-aligned and legible layout.

Step 2 — Filtering Using the Values Tab

• When you switch to the Values tab, all unique values in that column are listed with a checkbox next to each one.
• Single-value selection: When the user checks a single value and clicks the “Filter” button, only the rows containing that value are displayed.
• Multiple value selection: When multiple values are checked and the “Filter” button is clicked, all rows containing any of the selected values are listed.
• Search: When text is entered into the search box at the top of the panel, the list of values is narrowed down based on the entered term. Clicking the “x” (clear) icon next to the search box resets the search and restores the list to its original state.
• Select All / Clear: The “Select All” and ‘Clear’ buttons allow you to select all values at once or clear the selection entirely.
• Blank values: If there are blank cells in a column, a separate “(Blank)” option appears in the list. When this option is selected and the filter is applied, only rows with a blank value in that column are listed.
• No results found: When a term is entered into the search box that has no match in the list, the user is shown the message “No matching values”.
• Long lists: In columns with a large number of different values, the value list can be scrolled within itself; the filter window does not become excessively long.

Example: A user who wants to see only rows with the “Paid” value in the Status column checks only the “Paid” box on the Values tab and clicks the ‘Filter’ button; the table is instantly updated to show only the “Paid” rows.

Step 3 — Filtering with the Conditions Tab (Current Behavior)

The Condition tab retains its behavior from previous versions and offers different condition options depending on the column’s data type:

• Text columns: Contains, equals, starts with, etc.
• Number columns: Greater than, less than, between, etc.
• Date columns: Before, after, between, etc.
• Yes/No (Boolean) columns: Filtering can be performed using the “Equals” condition.
• Empty / Not Empty conditions allow filtering based on whether the column is empty or not.

Step 4 — How Filters Work Together

• When filters are applied to different columns at the same time, the table lists only those rows that meet all filter conditions simultaneously.
• When sorting (Sorter) is performed after applying a filter, the sorting is correctly applied to the filtered results.
• Pagination is automatically updated based on the filtered result set.
• When a filter is applied to a column, the filter icon for that column changes visually (active/filtered appearance), clearly showing the user which columns have filters applied.

Step 5 — Resetting Filters and Preserving State

• When the “Reset” button in the filter window is clicked, the filter applied to the relevant column is removed, and all rows are displayed again.
• If the filter window is reopened after a value has been selected in a column and a filter applied, the previous selections remain checked.
• If the user makes a selection in the Values tab, switches to the Condition tab, and then returns to the Values tab, the selections made are preserved and do not disappear.
• To reset all filters in the table at once, the previously defined “Clear Table Filtering Configs” action can be used (see section 2.1.9).

Language Support

• When the application language is Turkish, the following labels appear in the filter window: Koşul, Değerler, Tümünü Seç, Temizle, Filtrele, Sıfırla.
• When the application language is English, the following labels appear in the filter window: Condition, Values, Select All, Clear All, Filter, Reset.
• On narrow screens (such as mobile resolutions), the filter window is displayed in a usable manner without overflowing.

Notes

• The filtering feature is supported only in web applications.
• Filtering works only on tables connected to a data source; filter options are not active on tables with static content.
• Filtering works seamlessly with both Turkish and English character sets; no filtering issues arise due to language differences.
• The Global Search and Export to Excel features continue to work seamlessly with filtered results.

3. How to Use the Table Element?

In this section, we will discuss the end-to-end use of the Table element through example scenarios.

Scenario: Invoice List

In a business management or accounting application, a table-based invoice list is used so that users can easily track the invoices they have created. This list allows the user to quickly analyze the invoice status by presenting the basic information for each invoice in an organized and readable manner on a single screen.

In the invoice list, critical fields such as the invoice number, invoice date, recipient company information, invoice status, amount, and currency. Each row is structured to represent a single invoice, with the invoice logo or icon positioned at the beginning of the row for visual support.

Users can scroll down the list to review invoices and use column headers to sort and filter. This structure makes it easy to distinguish between paid and overdue invoices and quickly assess the financial situation.

In the scenario:

• The invoice list is presented in a table structure, row by row.
• Each row displays the invoice number, invoice date, recipient company name, invoice status, amount, and currency information in that order.
• The logo or icon on the left side of the row visually represents the relevant company.
• The invoice status field clearly displays statuses such as “Paid” and “Overdue.”
• Users can compare invoices from the list and access summary information at a glance.

Step 1 - Creating a Data Source

Creating a table in the DataSources module:

• Go to the Datasources module.
• Then go to the Tables tab.
• Create a new table named “Invoices”.

• The table structure to be set up is as follows:
• Important Field names:
  
  • InvoiceNo: Represents the unique number of the invoice. It is the main reference information shown to the user in list and table views and allows the invoice to be quickly distinguished.
  • InvoiceDate: Holds the date the invoice was created or issued. Users use this field to sort invoices by date and make periodic comparisons.
  • RecipientName: Specifies the name of the recipient company or customer to whom the invoice is issued. It clearly shows in the invoice list on whose behalf it was issued.
  • RecipientLogoUrl: Contains the URL information of the logo or representative image belonging to the recipient company. It provides visual support in the list rows, making it easier to distinguish between invoices.
  • Status: Indicates the current status of the invoice (e.g., Paid, Overdue, Draft). It is an informative field that helps the user quickly analyze the payment status.
  • Amount: Specifies the total amount of the invoice. It provides the user with a numerical and comparable value, enabling them to assess the financial situation.
  • Currency: Indicates the currency in which the invoice amount is denominated (e.g., TRY, USD, EUR). Ensures that amounts are interpreted correctly in scenarios where multiple currencies are used.

Step 2 - Defining the Necessary Actions

To display and add data in the interface:

1. You need to define two actions.
2. Add a new action from the Actions > New SQL Action tab in the Datasources module.

• Action that Adds Sample Data (InsertInvoices): To test the application with sample data, add the following SQL action and press the TEST button.

INSERT INTO Invoices
(
Id,
InvoiceNo,
InvoiceDate,
RecipientName,
RecipientLogoUrl,
Status,
Amount,
Currency
)
VALUES
(
NEWID(),
‘AXZ-177’,
CAST(‘2022-06-07’ AS DATETIMEOFFSET),
‘Figma Inc.’,
‘https://simpleicons.org/icons/figma.svg’,
‘Paid’,
351.02,
‘USD’
),
(
NEWID(),
‘AXZ-922’,
CAST(‘2022-06-05’ AS DATETIMEOFFSET),
‘Dribbble’,
‘https://simpleicons.org/icons/dribbble.svg’,
‘Overdue’,
710.68,
‘USD’
),
(
NEWID(),
‘AXZ-703’,
CAST(‘2022-06-04’ AS DATETIMEOFFSET),
‘Youtube’,
‘https://simpleicons.org/icons/youtube.svg’,
‘Paid’,
778.35,
‘USD’
),
(
NEWID(),
‘AXZ-883’,
CAST(‘2022-06-02’ AS DATETIMEOFFSET),
‘Spotify’,
‘https://simpleicons.org/icons/spotify.svg’,
‘Overdue’,
490.51,
‘USD’
),
(
NEWID(),
‘AXZ-798’,
CAST(‘2022-06-02’ AS DATETIMEOFFSET),
‘Discord’,
‘https://simpleicons.org/icons/discord.svg’,
‘Paid’,
275.43,
‘USD’
) ,
(
NEWID(),
‘AXZ-154’,
CAST(‘2022-06-01’ AS DATETIMEOFFSET),
‘Github’,
‘https://simpleicons.org/icons/github.svg’,
‘Paid’,
105.55,
‘USD’
);

When applying, delete the Invoices section, rewrite Invoices, and press Enter. This will add the correct schema name before the table name.

• Action Providing Data (GetInvoices):

SELECT * FROM Invoices;

When applying, delete the ‘Invoices’ part, retype ‘Invoices’, and press Enter. This will add the correct schema name before the table name.

Step 3 - Adding Initial Action

Initially on the home page:

1. Open the ‘UI Design’ module.
2. Add the Add Action > Initial Action > Custom > Managed Db > GetInvoices action to the page.

Step 4 - Adding an Element and Editing the Style

1. Drag and drop the Elements > Data > Table element onto the page from the left side panel.

2. Set the background color to Table > Styling > Fill > White Background.

3. With the Table element selected, press the up arrow on the Title field at the bottom of the Table > Properties > Table > Last Title field to move it to the first row.

4. Leave the column name blank in the Table > Properties > Title field.

5. Click on the Table Column field within the table. Follow the steps TableTemplateColumn > Styling > Layout > Align to set the vertical and horizontal alignment to “Center”.

6. Drag and drop the Elements > Display > Image element into it.
7. In the Image element, set the Image > Styling > Style > Width and Height values to 32 px.

8. For the borders, select Image > Styling > Border > Style > Fully Rounded.

9. Click on the Table element. Select the second title column Table > Properties > TableRow > Title and name the title ‘No’.

You can use the breadcrumb below to access the Table element. Simply click on the Table element.

10. To add new columns, create a new column from the Table > Properties > Table > TableRow > TableDefaultColumn field.

11. Select the new title column and name the Table > Properties > TableRow > Title header “Date”.

12. Similarly, add four more new columns from the Table > Properties > Table > TableRow > TableDefaultColumn field. The column names will be “Recipient,” “Status,” “Amount,” and “Currency,” respectively.

13. Set the data source in the Table element to Table > Properties > DataSource > GetInvoices.

14. To enable searching in the table, set Table > Properties > GlobalSearch to on.

15. To enable searching when changes occur, set Table > Properties > ShouldSearchOnChange to on.

16. To enable sorting, enable the Table > Properties > Sorter field.

17. To enable filtering, enable the Table > Properties > Filtering field.

18. To enable column selection, enable the Table > Properties > ColumnChooser field.

19. Finally, to export as an Excel file, enable the Table > Properties > Export field.

Step 5 - Configuring Element Settings

Link the initial action added to the page to the elements:

1. Click on any Image element in the first column of the table. Set it to Image > Properties > Value > Field to display > RecipientLogoUrl.

2. Click on any Label element in the second column named No. Set it to Label > Properties > Value > Field to display > InvoiceNo.

3. Click on any Label element in the third column named Date. Set it to Label > Properties > Value > Field to display > InvoiceDate.

4. Click on any Label element in the fourth column named Recipient. Set it to Label > Properties > Value > Field to display > RecipientName.

5. Click on any Label element in the fourth column named Status. Set it to Label > Properties > Value > Field to display > Status.

6. Click on any Label element in the fourth column named Amount. Set it to Label > Properties > Value > Field to display > Amount.

7. Click on any Label element in the fourth column named Currency. Set it to Label > Properties > Value > Field to display > Currency.

8. The expected structure in the final state is as follows.

To apply a similar structure more quickly, you can click on the Action Tree area in the left side panel and drag and drop the GetInvoices initial action onto the page.

In the example scenario, the RecipientLogoUrl column has been removed and replaced with a TableTemplateColumn. Simply add an Image element to this field, make the necessary visual adjustments, and apply similar Table Properties settings.

Preview:

When the application is tested, an Invoice List screen is displayed, showing the invoices listed row-by-row within the table structure. The logo representing the relevant company is located on the left side of each row, followed by the invoice number, invoice date, recipient company name, invoice status, amount, and currency information, presented in an organized and readable manner.

The user can scroll down the list to review invoices and easily distinguish between Paid and Overdue invoices at a glance. The table structure supports sorting and filtering operations via column headers, enabling quick comparisons between invoices.

When, for example, the term “ov” is entered in the search field, invoices with an Overdue status are instantly filtered and listed. This allows the user to quickly view overdue invoices and easily access the relevant records.

After filtering, when the Export button is used to export the data, the data listed on the screen is downloaded as an Excel file with the same structure and content preserved. Columns that are not desired in the file can be removed if desired. This feature allows users to conveniently export filtered invoice data for reporting or sharing purposes.

4. Common Properties

Some fields on the Table element are used in common across all UI elements. Therefore, detailed explanations of the following properties are provided in the relevant general guide pages:

• Authorization Settings
• Visibility
• Editability
• Style Panel

5. Best Practices

Proper configuration of data tables is important for both performance and user experience. When using the Table element, pay attention to the following recommendations:

• Use data types correctly. If the data types of fields linked to columns are incorrect (e.g., linking a numeric column to a string), sorting, filtering, and search features may not work correctly.
• Use the Filtering feature efficiently. Filter options appear automatically based on the data type. Disabling unnecessary filter types in large data sets improves performance.
• Optimize the Search Delay value when using Searchable. Very low values may trigger unnecessary actions; very high values slow down the user experience.
• Leave column widths to the user when necessary. Enabling the Resizable Columns feature allows users to customize the table according to their needs.
• Use column grouping (Group) for tables with many columns. This provides a more organized and understandable view on both desktop and mobile.
• If you use inline editing (Inline Edit), manage the record flow correctly. After editing, always trigger the Save Record action and refresh the data source.
• Add a hover effect to rows. Using Row Hover BgColor to highlight rows when hovered over improves table readability.
• If you are using MultiSelect, set a meaningful background color for selected rows. Clearly distinguishing selected rows improves the user experience.

6. Limitations

The following limitations should be considered when using the Table element:

• The table will not work without a defined data source. If the datasource is not connected, the columns will be visible but the rows will not be listed.
• Filtering only works when the data source is connected. Filter options will not be active in tables containing static content.
• Sorting may not work with data type errors. Sorting operations may produce incorrect results if the date, number, or text format is incorrect.
• Inline Edit can only be used with EditableTableColumn. Editing is not possible in normal columns; EditableTableColumn must be selected for editable cells.