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 also link to other elements in the row/column by selecting the fields in the related data table.

Table Properties

It covers the functionality, appearance and interaction settings for the table in general.

• Datasource: Specifies the dataset to which the table is linked.
• Showheader: Determines whether to show the table's headers.
• Fixed header: Keeps the headers fixed even if the page is scrolled.
• Editable: Specifies whether the table is editable.
• Editable Always Active: Ensures that the cell editing mode is always on.
• Table Width Mode: Determines whether the table width is fixed or as much as the content.

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

• Globalsearch: Allows global search on all table data.
• Searchable: Allows the search box to be displayed at the top right.
• Should Search Onchange: Allows instant filtering as you type in the search box.
• Searchdelay: Determines the waiting time before searching (milliseconds).
• Sorter: Enables sorting of columns.

Filtering options are specific to the column's data type and only work on data-linked tables.

• Filtering: Allows filtering columns by data type. 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 when each letter is entered, thus providing a more dynamic and faster filtering.
• Pagination: Allows data to be divided into pages.
• Pagesize: Determines the number of lines to be displayed on each page.
• Show Size Changer: Allows the user to change the page size.
• Size Changer Options: Sets the page size selection options (e.g. 10, 20, 50).
• Columnchooser: Allows the user to select which columns are visible or not.
• Resizable columns: Allows the width of the columns to be adjusted.
• Hidetableonempty: Allows the table to be hidden if there is no data.
• Striped: Makes the rows appear striped.
• Stripedcolor: Sets the background color of the rows in striped view.
• Rowhoverbgcolor: Changes the background color when the row is hovered over.
• Insertrowactive: Activates the new row insertion feature.
• Insertrowpositon: Determines whether the new row will be inserted at the top or bottom.
• Shownodatafound: Shows “no data found” message if there is no data.
• Nodatafoundmessage: Allows you to customize the content of this message.
• Nodatafoundimage: Sets the image to be shown when there is no data.
• Multiselect: Allows to select more than one row at the same time.
• Multiselect Scope: Sets whether the multiselect will be a cell, row or column.
• Selected values: Holds the values of the selected rows.
• Selected Row Color: Determines the background color of the selected row.
• Export: Activates the ability to export the table (Excel, CSV).

Columns Properties

Properties that appear when the column is selected. Each one controls the appearance, function or behavior of the column.

• Title: The column title is the name that will be displayed to the user.
• Group: Used to group columns in the title.
• Title Bgcolor: Sets the column title background color.
• Specialsortingformat: Allows to process according to a special rule during sorting.
• Always Visible On Mobile Resolution: Makes this column always visible on mobile.
• Hide Filtering: Prevents filtering in this column.
• Hidesorting: Prevents sorting in this column.
• Hidesearch: Hides the search box in this column.
• Footer Options: Allows to add footer information (total, average, etc.) to this column.
• Footerformatter: Defines formatting rules specific to footer information.
• Footer Optionlabel: Determines the title/text to be written in the footer.
• Footer Font Size: Sets the footer font size.
• Footer Font Color: Footer font color.
• Footer Text Align: Footer text alignment (left, right, center).
• Exclude From Export: Prevents this column from being included in the export.
• Fixed: Makes the column fixed (stays in place when scrolled).
• Placeholder: If the cell is editable, this is the text that will be displayed when empty.

Title Properties

It becomes active when the column heading is selected. These properties allow you to edit the column's title field.

• Column Titles: Represents the column titles in the table. They are usually the titles in the first row.
• Hide Mobile Resolution: Allows hiding table titles on mobile.
• Textdirection: Determines the column text direction (left to right / right to left).

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; }
}
}