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
| Properties | Description |
|---|---|
| Data source | source of data that populates the table |
| Empty state | the content or message displayed when the table has no data to show |
| Loading | whether the Table component is currently in a loading state |
| Columns | structure and configuration of the columns in the table. (See the section about Columns below for more detail) |
| Column | the number of columns |
| Multi-Row Selection | Use {{table.selectedRow[n].columnName}} to access data. |
| Cell Selection | Whether allow users to select a cell |
| Click outside to deselect | Supported in the row single selection mode. After enabling it, click an area other than the table to unselect the row. |
| Overflow | how the table handles content that exceeds the available space within the table's container (pagination or scroll) |
| Enable server side pagination | Whether to enable server pagination |
| PageSize | the number of rows to be displayed per page when server-side pagination is enabled |
| Refresh | Whether to show the refresh icon. |
| Download | Show download button in toolbar. |
| Download raw data | Whether to show the download raw data icon. |
| Filter | Show filter button in toolbar |
| Event handler | detecting and responding to specific user actions or events, such as clicks, keypresses, or form submissions. |
| Disabled | non-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.
| Properties | Description |
|---|---|
| Column title | specifies the name or label of the column, which serves as a header to identify the data it represents |
| Column type | defines 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 Value | Use {{ 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 Sorting | whether the column allows users to sort the table data based on the values in that specific column |
| Background | Set the background of column. Use {{ write a conditional statement to set the color displayed by each cell under different conditions. |
| Alignment | controls 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
| Properties | Description |
|---|---|
| Format | accepts various formatting codes or patterns, default is YYYY-MM-DD |
- Tag
a specialized format for displaying tags or labels associated with data entries
| Properties | Description |
|---|---|
| Tag label | represents the text or label assigned to a tag in the "tag" column |
| Tag color | defines the color assigned to the tag in the "tag" column |
- Time
accurately represent and manipulate time values within the table
| Properties | Description |
|---|---|
| Format | the visual representation of the time data within the column, default is HH:mm:ss |
- DateTime
stores and represents date and time values
| Properties | Description |
|---|---|
| Format | specifies how the date and time values should be displayed in the column, default is YYYY-MM-DD HH:mm:ss |
- Number
handle numerical data
| Properties | Description |
|---|---|
| Decimal places | specify the number of decimal places to display for numeric values in the column |
| Show thousands separator | whether 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
| Properties | Description |
|---|---|
| Decimal places | specify the number of decimal places to display for percentage values in the column |
| Show thousands separator | whether 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
| Properties | Description |
|---|---|
| Event handler | defines the action or event that occurs when the button within the column is clicked |
| Disabled | whether the button within the column is enabled or disabled |
| Theme color | choose a theme color for the button |
| Variant | visual 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.
| Properties | Description |
|---|---|
| Mapped Value | associate each button in the button group with a specific value or field from the data source |
| Variant | visual style or appearance of the buttons in the button group |
| Event handler | the action or function triggered when a button in the group is clicked or interacted with |
| Disabled | whether the buttons in the button group are enabled or disabled |
| Theme color | customize 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
| Properties | Description |
|---|---|
| Scale Type | how 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.
| Properties | Description |
|---|---|
| Icon | allows users to select or specify the icon to be displayed within the IconGroup column |
| Theme color | determines the color scheme or theme applied to the icon within the IconGroup column |
| Event handler | enables users to define an event or action triggered when the icon in the IconGroup column is interacted with by users |
| Disabled | state 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.
| Properties | Description |
|---|---|
| Decimal places | the number of decimal places to display for the currency values within the column |
| Currency code | specifies the code or abbreviation representing the currency used in the column |
| Show thousands separator | whether 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
| Properties | Description |
|---|---|
| End Value | the page number or index of the page to be selected |
- selectRow
select a specific row in the table
| Properties | Description |
|---|---|
| Default selected row | default 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
| Properties | Description |
|---|---|
| Filters | filtering conditions or criteria |
| Filter mode | determines how the filters are applied |
- ClearFilters
clears any applied filters in the table
- setSort
set the sorting for the table
| Properties | Description |
|---|---|
| Column | the column on which the sorting should be applied |
| Direction | direction 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 name | Description |
|---|---|
| clickOutsideToResetSelection | whether clicking outside the Table component should reset the current selection |
| columnMapper | an object that maps the data fields or keys in the table's data source to the corresponding column names |
| columnNameIndices | an object that stores the indices of the column names |
| columns | an array that defines the configuration and properties of each column in the table |
| columnVisibility | an object that stores the visibility status of each column in the table |
| customColumnIndices | an object that stores the indices of the custom columns in the table |
| dataSource | the data source for the table |
| dataSourceJS | a JavaScript representation of the data source |
| dataSourceMode | the mode or type of the data source. |
| defaultSortKey | default column key to be used for sorting the table initially |
| defaultSortOrder | the default sorting order for the table |
| disabled | whether the Table component is disabled or not |
| displayedData | currently displayed data in the table |
| displayedDataIndices | the indices of the displayed rows in the table |
| displayName | specifies the name or label of the table component |
| download | enables the ability to download the table data |
| downloadRawData | whether to download the raw data or the displayed data of the table |
| emptyState | the content or message to be displayed when the table is empty |
| enableServerSidePagination | When set to true, the enableServerSidePagination property enables server-side pagination for the table |
| enableSingleCellSelection | allows for single-cell selection in the table |
| filter | the currently applied filter or filtering conditions in the table |
| hasNextPage | whether there is a next page available in the paginated table |
| loading | whether the Table component is in a loading state |
| multiRowSelection | enables multi-row selection in the table |
| nextAfterCursor | the cursor or identifier for fetching the next set of data in server-side pagination |
| nextBeforeCursor | the cursor for fetching the previous set of data in server-side pagination |
| overflow | the behavior of the table when the content exceeds the available space |
| pageIndex | the current page index in a paginated table |
| pageSize | determines the number of rows to be displayed per page in a paginated table |
| paginationOffset | the number of pages to be offset in the pagination |
| refresh | triggers a refresh of the table's data |
| renamedColumnNames | stores the renamed column names in the table |
| rowEvents | allows for custom events or actions to be associated with specific rows in the table |
| totalRowCount | the 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;
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.
