跳到主要内容

Table

What is 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

PropertiesDescription
Data sourcesource of data that populates the table
Empty statethe content or message displayed when the table has no data to show
Loadingwhether the Table component is currently in a loading state
Columnsstructure and configuration of the columns in the table. (See the section about Columns below for more detail)
Columnthe number of columns
Multi-Row SelectionUse {{table.selectedRow[n].columnName}} to access data.
Cell SelectionWhether allow users to select a cell
Click outside to deselectSupported in the row single selection mode. After enabling it, click an area other than the table to unselect the row.
Overflowhow the table handles content that exceeds the available space within the table's container (pagination or scroll)
Enable server side paginationWhether to enable server pagination
PageSizethe number of rows to be displayed per page when server-side pagination is enabled
RefreshWhether to show the refresh icon.
DownloadShow download button in toolbar.
Download raw dataWhether to show the download raw data icon.
FilterShow filter button in toolbar
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions.
Disablednon-interactive and cannot be modified or triggered by the user.

Column Properties Overview

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

PropertiesDescription
Column titlespecifies the name or label of the column, which serves as a header to identify the data it represents
Column typedefines the type of data that the column contains, including auto, text, date, tag, time, dateTime, number, percent, link, button, button group, boolean, image, iconGroup, Rating, Markdown, currency
Mapped ValueUse {{ currentRow }} to access the data of current row. For example, to calculate "cost per click" based on columns "cost" and "clickTimes":
{{ currentRow.cost / currentRow.clickTimes }}
Enable Sortingwhether the column allows users to sort the table data based on the values in that specific column
BackgroundSet the background of column. Use {{ write a conditional statement to set the color displayed by each cell under different conditions.
Alignmentcontrols the horizontal alignment of the content within the column cells

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

PropertiesDescription
Formataccepts various formatting codes or patterns, default is YYYY-MM-DD
  • Tag

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

PropertiesDescription
Tag labelrepresents the text or label assigned to a tag in the "tag" column
Tag colordefines the color assigned to the tag in the "tag" column
  • Time

accurately represent and manipulate time values within the table

PropertiesDescription
Formatthe visual representation of the time data within the column, default is HH:mm:ss
  • DateTime

stores and represents date and time values

PropertiesDescription
Formatspecifies how the date and time values should be displayed in the column, default is YYYY-MM-DD HH:mm:ss
  • Number

handle numerical data

PropertiesDescription
Decimal placesspecify the number of decimal places to display for numeric values in the column
Show thousands separatorwhether the column should display a thousands separator to improve readability and ease of interpretation for large numbers
  • Percent

handle percentage values in a concise and visually appealing manner

PropertiesDescription
Decimal placesspecify the number of decimal places to display for percentage values in the column
Show thousands separatorwhether a thousands separator should be included in the displayed percentage values
  • Link

include clickable links within a specific column

  • Button

include interactive buttons within a specific column

PropertiesDescription
Event handlerdefines the action or event that occurs when the button within the column is clicked
Disabledwhether the button within the column is enabled or disabled
Theme colorchoose a theme color for the button
Variantvisual style or variant of the button (Fill or outline)
  • buttonGroup

allows users to create interactive button groups within a column

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

PropertiesDescription
Mapped Valueassociate each button in the button group with a specific value or field from the data source
Variantvisual style or appearance of the buttons in the button group
Event handlerthe action or function triggered when a button in the group is clicked or interacted with
Disabledwhether the buttons in the button group are enabled or disabled
Theme colorcustomize the color or styling of the buttons in the group to align with the overall theme or branding of their application or website
  • Boolean

represents data that has two possible states: true or false

  • Image

populate a column in the table with image data

PropertiesDescription
Scale Typehow the image is scaled or resized within the table cell
  • 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.

PropertiesDescription
Iconallows users to select or specify the icon to be displayed within the IconGroup column
Theme colordetermines the color scheme or theme applied to the icon within the IconGroup column
Event handlerenables users to define an event or action triggered when the icon in the IconGroup column is interacted with by users
Disabledstate of the IconGroup column, determining whether it is disabled or enabled for user interaction
  • 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.

PropertiesDescription
Decimal placesthe number of decimal places to display for the currency values within the column
Currency codespecifies the code or abbreviation representing the currency used in the column
Show thousands separatorwhether a thousands separator is displayed for large 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

PropertiesDescription
End Valuethe page number or index of the page to be selected
  • selectRow

select a specific row in the table

PropertiesDescription
Default selected rowdefault selected row value, can be the row index, a unique identifier, or any other property that uniquely identifies the row to be selected
  • clearSelection

clear the current selection in the table

  • setFilters

apply filters to the table data

PropertiesDescription
Filtersfiltering conditions or criteria
Filter modedetermines how the filters are applied
  • ClearFilters

clears any applied filters in the table

  • setSort

set the sorting for the table

PropertiesDescription
Columnthe column on which the sorting should be applied
Directiondirection of the sort, which can be "ascending" or "descending"

Data

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

Property nameDescription
clickOutsideToResetSelectionwhether clicking outside the Table component should reset the current selection
columnMapperan object that maps the data fields or keys in the table's data source to the corresponding column names
columnNameIndicesan object that stores the indices of the column names
columnsan array that defines the configuration and properties of each column in the table
columnVisibilityan object that stores the visibility status of each column in the table
customColumnIndicesan object that stores the indices of the custom columns in the table
dataSourcethe data source for the table
dataSourceJSa JavaScript representation of the data source
dataSourceModethe mode or type of the data source.
defaultSortKeydefault column key to be used for sorting the table initially
defaultSortOrderthe default sorting order for the table
disabledwhether the Table component is disabled or not
displayedDatacurrently displayed data in the table
displayedDataIndicesthe indices of the displayed rows in the table
displayNamespecifies the name or label of the table component
downloadenables the ability to download the table data
downloadRawDatawhether to download the raw data or the displayed data of the table
emptyStatethe content or message to be displayed when the table is empty
enableServerSidePaginationWhen set to true, the enableServerSidePagination property enables server-side pagination for the table
enableSingleCellSelectionallows for single-cell selection in the table
filterthe currently applied filter or filtering conditions in the table
hasNextPagewhether there is a next page available in the paginated table
loadingwhether the Table component is in a loading state
multiRowSelectionenables multi-row selection in the table
nextAfterCursorthe cursor or identifier for fetching the next set of data in server-side pagination
nextBeforeCursorthe cursor for fetching the previous set of data in server-side pagination
overflowthe behavior of the table when the content exceeds the available space
pageIndexthe current page index in a paginated table
pageSizedetermines the number of rows to be displayed per page in a paginated table
paginationOffsetthe number of pages to be offset in the pagination
refreshtriggers a refresh of the table's data
renamedColumnNamesstores the renamed column names in the table
rowEventsallows for custom events or actions to be associated with specific rows in the table
totalRowCountthe total number of rows in the table

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;

up_code

Click Save and Run to activate this action.

up_data

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.

up_test