Table

1. Login to the Kuika platform and open the project from the Apps screen.

2. In the UI Design module, drag and drop the Table element from the Data category from the Elements panel on the left side.

• You can add a Table element from the Elements panel by dragging it to the screen.
• If dragged to an empty space, it will be added along with the Row element. If dragged into a Column, only the Table element is added.
• Header, Footer, Content Menu, Carousel, Horizontal Grid and Pagination elements cannot be used as Child elements in Table 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: This 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.
• Fixed Header: Keeps the header part 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.

Global Search, Searchable, Sorter and Filtering features are only supported in web applications.

• 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.
• Insert Row Active: Determines whether the new row insertion process is active or not.
• Show No Data Found: Allows the “No Data Found” message to be shown 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: Sets the background color of the selected rows.
• Multi Select Scope: Specifies the area in a table where multiple cells or rows can be selected at the same time.
• Transformed On Mobile Resolution: Allows the Table element to be automatically reorganized to provide a better view on mobile devices.
• Editable Always Active: Ensures that editable cells in the Table element are always active, so that clicking on the cells automatically opens the editing mode.
• Export: Makes it possible to export table data. For example, it allows you to download the table in Excel or CSV format.

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

To use the Sorter property on Table, you must first bind data to the table.

2. Turn on the Sorter property in the Properties panel on the right sidebar.
3. Users can sort the data in ascending or descending order by clicking the sort icon in the column headers.

‍

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

Add EditableTableColumn to Table Element

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

EditableTableColumn Usage

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

Using Dynamic Data in EditableTableColumn

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

Binding Data to Label Element in Editable Table Column

1. Select the Label element in the Editable Table Column.
2. In the Properties panel, select the data to be displayed from the Field to Display parameter in the Value field.
3. Specify the element to be used during editing via the EditMode Component parameter.
   
   • For example, the TextInput element can be used to enter a name and Selectbox element can be used to select a department.

Example Editable Table Column Usage

• In a Table element consisting of Editable Table Columns, the first row can appear in edit mode.
• You can manage the Property and Styling settings of the elements in the columns.
• When previewing or publishing the application, you can switch to edit mode by double-clicking the row.
• You can save values by pressing the “Enter” key 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 Usage

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

• In the OnRowEditFinished event, the data source action of the table must be called again after the record operation is completed.

Example Scenario: Listing Customer Address and Customer Name as Editable

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

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

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

Steps to Add Hover Effect

1. Select the Table element you want to add the Hover property to.
2. Open the Properties panel.
3. Click Row Hover BgColor.
4. In the panel that opens, set the hover color using the Color option.

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

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 thePreview button in the upper left corner.
   
   • You can save previously filtered or hidden columns.
   • The saved settings are automatically restored when the table is opened again.
   • With the Export Table Config action you can export in JSON format.
   • With the Import Table Config action, you can reload previously saved settings.

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

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 filtering operations that were previously performed, making all data visible again.

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. Choose on Config Change → Export → Clear Table Filtering Configs from the + ADD ACTION drop-down menu.
4. Select the relevant table from the Select a Table field to remove any filtering that has already been done.

After completing these steps, all filtering operations performed on the Table element will be cleared and all data will be visible again.

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. The 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 field in the Managed DB panel. For example, you created a data table named TableConfig and added Id and Json columns to it. During export, the table JSON data is saved in this table.

Importing

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

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

‍

1. Select the Table element.
2. Under the data rows in Table, add the Collapse element from the Interactive category in the Elements panel in the UI Design module.
3. Create a SQL Action for the corresponding table.

Creating SQL Action

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

3. Write your SQL query via SQL Editor and click CREATE.
4. You can get suggestions from Kuika AI assistant by activating the Generate with AI option.

5. You can view, rename and delete the action you created in the left panel.
6. To make edits, click on the action and select Edit.
7. You can edit existing SQL queries and update them with the Update button.
8. Use Delete to delete the action.

Collapse Layout

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

‍

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

1. Add a Table element in the Data category from the Elements panel on the left sidebar.
2. Drag a second Data Repeater category element to the corresponding field.
3. In the Table, add the elements appropriate for the data returned from the Datasource.
4. Create an Action that returns data and binds 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 Datasource.

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

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

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

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

SQL Support with Master Detail Feature

Kuika platform does not support Master-Detail directly with SQL. However, you can manage the Master-Detail relationship using SQL queries. Below is an example 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; //Usingleri to add to the list.
using Kuika.Common.Classes;
using Kuika.Common.Accessors;
namespace Kuika.ThirdPartyApisCollection
{
public class myClass
{
public static List<myList> returnSQLList(string connectionString /*
The connectionString parameter given as a quika string parameter
automatically detects and fills */) //Root class as data set
we return it as List to be able to identify it.
{
List<myList> myListObj = new List<myList>(); //Class below
We create the object structure according to the definitions.
string getMasterCommand = @“SELECT * FROM MasterTable”; //Master
We are creating our SQL query where we will pull our data.
var masterResult = KPersister.Fetch(connectionString,
getMasterCommand, null); //Kuika's own SQL Query execution function
The value sent as null is the parameters in the query.
foreach (var masterObject in masterResult.ResultList) //Master
we loop the result of our query.
{
myList newObj = new myList();
newObj.objectName =
masterObject.GetValueByFieldName(“ObjectName”).ToString();
//GetValueByFieldName function to get the columns from the action result
reads. Column name is specified in double quotes.
When pulling the //Detail table, the ID of the object in the Master table
we need to use it as a parameter.
In order to use the //Parameter, again Kuika has created
we get help from the kSqlParameter Class.
var prms = new List<kSqlParameter>() {new kSqlParameter() {
Name = “masterId”,
Value =
masterObject.GetValueByFieldName(“Id”).ToString()
}
};
string getDetailCommand = @"SELECT * FROM DetailTable WHERE
masterId = @masterId”; //We are going to pull our detail data from our SQL query
we create
var detailResult = KPersister.Fetch(connectionString,
getDetailCommand, prms.ToArray()); //Run Kuika's own SQL Query
function. Set the prms variable we defined above to
We use it together with the ToArray() function.
newObj.nestedList = new List<myNestedList>(); //Nested object
an empty nested object list in our master object in order to define an empty nested object list.
we create it.
foreach (var detailObject in detailResult.ResultList) //Query
We create a new loop to process the data returned as a result.
{
myNestedList nestedListObj = new myNestedList(); //Loop
an object by using the appropriate Class to collect the data in it.
we create
nestedListObj.test1 =
detailObject.GetValueByFieldName(“Data1”).ToString(); //Parameters of the object
We match the columns and data returned as a result of the query.
nestedListObj.test2 =
detailObject.GetValueByFieldName(“Data2”).ToString();
nestedListObj.test3 =
detailObject.GetValueByFieldName(“Data3”).ToString();
newObj.nestedList.Add(nestedListObj); //We created
add the nested object to the parameter list of the master object.
}
myListObj.Add(newObj); //Root the master object we created
add it to our list.
}
return myListObj; //Return the Class Object we created.}
}
public class myList //Root Class
{
public string objectName { get; set; }
public List<myNestedList> nestedList { get; set; } //Nested objects
specified as Nested Class list to keep.
}
public class myNestedList //Nested Objects Class
{
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# scripts. The following example shows how you can group detail data by creating a list of objects:

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;
namespace Kuika.ThirdPartyApisCollection
{
public class myClass
{
public static List<myList> returnMyList() //Root class data set
to be able to identify it as List.
{
List<myList> myListObj = new List<myList>(); //Class below
We create the object structure according to the definitions.
myList myListItem = new myList();myListItem.objectName = “testObj1”;
List<myNestedList> nestedListObj = new List<myNestedList>();
myNestedList nestedListItem = new myNestedList();
nestedListItem.test1 = “a”;
nestedListItem.test2 = “b”;
nestedListItem.test3 = “c”;
myNestedList nestedListItem2 = new myNestedList();
nestedListItem2.test1 = “d”;
nestedListItem2.test2 = “e”;
nestedListItem2.test3 = “f”;
myNestedList nestedListItem3 = new myNestedList();
nestedListItem3.test1 = “g”;
nestedListItem3.test2 = “h”;
nestedListItem3.test3 = “i”;
nestedListObj.Add(nestedListItem);
nestedListObj.Add(nestedListItem2);
nestedListObj.Add(nestedListItem3);
myListItem.nestedList = nestedListObj;
myListObj.Add(myListItem);
myList myListItem2 = new myList();
myListItem2.objectName = “testObj2”;
List<myNestedList> nestedListObj2 = new List<myNestedList>();
nestedListObj2.Add(nestedListItem);
nestedListObj2.Add(nestedListItem2);
nestedListObj2.Add(nestedListItem3);
myListItem2.nestedList = nestedListObj2;
myListObj.Add(myListItem2);Unset
myList myListItem3 = new myList();
myListItem3.objectName = “testObj3”;
List<myNestedList> nestedListObj3 = new List<myNestedList>();
nestedListObj3.Add(nestedListItem);
nestedListObj3.Add(nestedListItem2);
nestedListObj3.Add(nestedListItem3);
myListItem3.nestedList = nestedListObj3;
myListObj.Add(myListItem3); // Up to this point Class
We have defined the object we created over the object, its parameters.
return myListObj; //Return the Class Object we created.
}
}
public class myList //Root Class
{
public string objectName { get; set; }
public List<myNestedList> nestedList { get; set; } //Nested objects
specified as Nested Class list to keep.
}
public class myNestedList //Nested Objects Class
{
public string test1 { get; set; }
public string test2 { get; set; }
public string test3 { get; set; }
}
}