跳到主要内容

Data Grid

What is Data Grid

In some cases, you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the Grid List component.

The editing method of the Grid List component is the same as that of the container. You can drag and drop components into the Grid List to customize the display format of the items.

How-to

Configure the appearance of the Grid list

Connect to data source

Data

Property nameTypeDescriptionUse example
selectedItemObjectYou can select an item in the Grid List and retrieve its data using theselectedItemproperty. When you select the nth item, the value of theselectedItemproperty will be the nth item in the data source array that you have set for the Grid List. For example, if your data source (referred to as dataSource) is as follows:[{"name":"Andrew"},{"name":"Mike"},{"name":"Emma"}], and you select the third item, theselectedItemproperty will actually bedataSource[2], which is{"name":"Emma"}. Therefore, you can further access the value corresponding to a specific key by usinggridList1.selectedItem.name.{{gridList1.selectedItem.name}}
currentItemObjectThis property canonly be used in the component of Grid List in the configurationand does not need to be called via displayName . When you add a Text component to the Grid List component, it is expected that this Text component will display the name of this segment in the Data source. To achieve this, you can set it as{{currentItem.name}}.{{currentItem.name}}

Configurable properties

Data

Property nameTypeDescriptionExample
Data sourceArray of objectsThis is used to set the data source for the Grid List component. The expected data format is [{ "key": "value", "key": "value" }, { "key": "value", "key": "value" },... { "key": "value", "key": "value" }]. You can query your data source using the Action, and the return value of the action will be used as the data source. Alternatively, you can directly input into the data source. When inputting, please make sure to use{{}}to enclose the array.{{mysql1.data}}

Interaction

Property nameTypeDescriptionExample
LoadingBooleanYou can configure the Grid list component to display a Loading state under certain circumstances. For example, during the execution of an Action, you can show a loading state by using the{{mysql1.isRunning}}setting.{{mysql1.isRunning}}
DisabledBooleanYou can configure the Grid list component to be disabled under certain conditions. For example, if there is no input value in theinput1component, it should be disabled. You can achieve this by using the{{input1.value===null \|\| input1.value==="" \|\| input1.value===undefined}}condition.{{input1.value===null\|\|input1.value===""\|\|input1.value===undefined}}

Pagination

Property nameTypeDescriptionExample
PaginationBooleanYou can configure whether to display data in a paginated manner. If pagination is not enabled, all the data will be displayed on a single page.--
Page sizeNumberTo display multiple data items per page, you need to enable pagination. When you enable pagination, you can configure the number of items to be displayed per page.{{30}}
Enable server side paginationBooleanPlease refer to this documentation for reference:Server-side pagination--

Layout

Property nameTypeDescriptionExample
Column adaptionSelectionWe offer two modes: Fixed and Dynamic. InFixedmode, the list is fixed. Resizing the browser window will only change the width of each column. InDynamicmode, the list is not fixed, resizing the browser window will change both the width and the number of columns. Below this table, there are also illustrations of the two modes, which can provide a more visual understanding of the differences between the two modes.--
Number of columnsNumberIn Fixed mode, the configuration displays a fixed number of columns.{{3}}
Min width of columnsNumberIn the Dynamic mode, the configuration sets the minimum column width. We will use the component width/minimum column width to calculate the maximum number of columns that can be displayed currently. If it can not be evenly divided, the excess value will be distributed evenly to supplement each column width.{{300}}
Item spacingNumberSpacing between each column and row.--
HeightSelectionTo configure the height of a component, we provide two types of formatting options: Fixed and Auto. In the Fixed mode, you need to manually adjust the height of the component and item. In the Auto mode, the height of the component and the length of the list will be dynamically adjusted based on the height of the items.--
HiddenBooleanUsed to hide a component under certain conditions. For example, the component is not displayed when there are no results frommysql1: {{!mysql1.data}}.{{!mysql1.data}}
Dynamic number of columns

dynamic

Fixed number of columns

fixed

Event handler

Event handler:https://docs.illacloud.com/event-handler

Event nameDescription
Click itemWhen clicking on an item, trigger the corresponding event. For example, if one of the data in your data source is a URL, you can expect that clicking on the item will navigate to the URL associated with that item. In the event handler, you can select "go to URL" and set the value of the URL to{{currentItem.url}}.
Page changeDuring page switching, events are triggered. This is commonly used in the server-side pagination scenario. When the page changes, the action is executed again, immediately fetching the next or previous page of data.