Table

​

The Table component in ILLA Cloud is a powerful feature that allows users to display, organize, and manipulate tabular data within the application. It provides a structured layout with rows and columns, enabling users to view and interact with data in a convenient and structured manner.

​

Properties

​

For each column, we can configure its properties to customize the data displayed for each column.

​

Column types:

• Auto

a dynamic type that automatically determines the data type based on the values within the column

• Text

represents a column that contains textual data

• Date

represents data values that correspond to specific dates

• Tag

a specialized format for displaying tags or labels associated with data entries

• Time

accurately represent and manipulate time values within the table

• DateTime

stores and represents date and time values

• Number

handle numerical data

• Percent

handle percentage values in a concise and visually appealing manner

• Link

include clickable links within a specific column

• Button

include interactive buttons within a specific column

• buttonGroup

allows users to create interactive button groups within a column

For each button in the columns, we can configure its properties.

• Boolean

represents data that has two possible states: true or false

• Image

populate a column in the table with image data

• IconGroup

a specialized column that allows users to display icons within a group or collection

For each button in the columns, we can configure its properties.

• Rating

represents ratings or feedback given to items or entities

• Markdown

ability to render formatted text using Markdown syntax within the column cells

• Currency

handle and format currency values.

​

Method

You can use other components to control the component. We support the following two methods:

• selectPage

select all the rows on a specific page in a paginated table

• selectRow

select a specific row in the table

• clearSelection

clear the current selection in the table

• setFilters

apply filters to the table data

• ClearFilters

clears any applied filters in the table

• setSort

set the sorting for the table

​

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Example: {{table1.disabled}}

​

Use case

Next, we will demonstrate how to map the data from **Upstash** to the **table** component.

​

Step 1 Add an action

Let us create a table in Upstash called employee_profile, including 4 columns name, level, age, and married.

Then we can create a new action for Upstash from the action list in ILLA Cloud and named upstash2.

To list all data in employee_profile put the code snippet below in the Redis query section.

GET employee_profile

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const jsonString = data[0].result;

// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);

// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
  name: employee.name,
  level: employee.level,
  age: employee.age,
  married: employee.married,
}));

return mappedArray;

Click Save and Run to activate this action.

​

Step 2 Add Components

Next, we can add a table component to the canvas.

In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from Upstash.

​

Step 3 Test

The final look should be as shown.