Data Grid

Data

Property name	Type	Description
selectedRows	Array	Data of the selected rows. For example, when you select 1 row, and want to obtain theidof this row, use{{dataGrid1.selectedRows[0].id}}. You can useselectedRowsproperty both within the current DataGrid component and in other components or actions as well.
currentRow	Object	Data of the currentRow. For example, to set the "available" column to false when the value in the "service_years" column is greater than or equal to 4, or when the value in the "in_stock" column is false, and true for all other cases, you can use the following code:{{!(currentRow.service_years>=4\|\|currentRow.in_stock===false)}}. UnlikeselectedRows, you can only use thecurrentRowproperty within the current datagrid component . Therefore, if you expect a button click to trigger an action that operates on the data of the current row where the button is located, you can only use theselectedRowsproperty within the action to retrieve the data.
page	Number	The index of the current page, a number starts from 0. For example, when the current page is 1, the index is 0.
pageSize	Number	The number of data items loaded per page. You can set this value through the right-hand panel.

Configurable properties

Data

Property name	Type	Description
Data source	Array of objects	Used to select the source of the data. For example,{{mysql1.data}}
Loading	Boolean	Used to set whether to display the loading status. For example,{{mysql1.isRunning}}
Primary key	String	Used to set the primary key of your data.

Columns

Property name	Type	Description
Column title	Array of objects	Used to configure the column names displayed in the user interface. By default, it uses column names from the data source.
Column type	String	Used to configure the data type of the column through a dropdown selection. Different data types have different supported configuration options.
Description	String	Used to configure a description of this column. When the user hovers their mouse over the column title, this description will be displayed.
Mapped value	Array	Used to configure the values displayed in this column. By default, the data retrieved from the data source will be displayed directly. You can also use{{currentRow.columnName}}to configure the actual displayed value. The principle is to perform calculations on the data of the specified column in the same row, resulting in the entire column value. For example, if the data in thenamecolumn is the full name, and you want to display only the first letter with the remaining content replaced by two asterisks, you can configure it using{{currentRow.name.charAt(0)+"**"}}.
Aggregation	Dropdown selection	Used to set whether to display aggregate values. Supports aggregation based on Sum, Avg, Min, Max, and Size. If the column is not of numeric type, it only supports aggregation based on Size.
Enable users to sort	Boolean	Used to set whether users are allowed to change the sorting based on this column.
Enable users to pin	Boolean	Used to set whether users are allowed to pin the column to left or right.
Enable users to filter	Boolean	Used to set whether users are allowed to set filters based on this column.
Enable users to hide	Boolean	Used to set whether users are allowed to hide this column.
Enable users to aggregate	Boolean	Used to set whether users are allowed to hide this column.
Enable users to set group by	Boolean	Used to set whether users are allowed to group the data based on this column.
Enable users to resize	Boolean	Used to set whether users are allowed to change the width of this column.
Disable users to reorder columns	Boolean	Used to set whether users are prohibited from adjusting the order of columns.
Alignment	Boolean	Used to set the alignment of the column.

Supported column types and configuration

Auto

We will sample the data from each column to determine the data type of each column. If the data is of type Number, the Auto mode corresponds to the Number type. If the data is of type String, the Auto mode corresponds to the Text type. If the data is of type Array, the Auto mode corresponds to the Tag type. If the data is of type Boolean, the Auto mode corresponds to the Boolean type. If the data is of type Date, Time, or Date time, the Auto mode corresponds to the Date type.

Configuration

No additional configuration

Text

Displaying data through plain text.

Configuration

No additional configuration

Date

Displaying a timestamp in a more readable date format.

Configuration

Property name	Type	Description
Format	String	Use the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd.

Date time

Displaying a timestamp in a more readable date or date time or time format.

Configuration

Property name	Type	Description
Format	String	Use the date format specified by the ISO 8601 standard to set the format, such as yyyy-mm-dd HH:mm:ss.

Tag

Display data using tag types, and when the values of the tags are the same, the colors will also remain consistent. When the data in a column is an array, we separate each item in the array into individual tags.

Configuration

Property name	Type	Description	Example
Tag color	Object	Specify the colors for different tag values using an object.	{{{"product manager":"green","UX/UI":"#FFFFFF"}}}

Number

Display data using numerical types.

Configuration

Property name	Type	Description	Example
Decimal places	Number	Used to set the number of decimal places	{{2}}
Show thousands separator	Boolean	Used to set whether or not to show the thousands separator	{{true}}
Locale	String	By setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocales	de-DE

Percent

Convert a numerical value into a percentage

Property name	Type	Description	Example
Decimal places	Number	Used to set the number of decimal places	{{2}}
Show thousands separator	Boolean	Used to set whether or not to show the thousands separator	{{true}}
Locale	String	By setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocales	de-DE

Currency

Add a currency symbol to a numerical value.

Property name	Type	Description	Example
Currency code	String	Used to set the currency code. List of currency code	EUR
Decimal places	Number	Used to set the number of decimal places	{{2}}
Show thousands separator	Boolean	Used to set whether or not to show the thousands separator	{{true}}
Locale	String	By setting the locale, you can display numbers according to local conventions, such as using a period as the thousands separator and a comma as the decimal point in Germany. To achieve this, you can input 'de-DE' as the locale, and the numbers will be displayed according to this convention. List of Llocales	de-DE

Link

Display the link directly and support clickable redirection.

Configuration

No additional configuration, but please note that the link must be a complete URL starting with 'https://' or 'http://'. Otherwise, the redirection may fail.

Button

Used to trigger actions when clicked.

Property name	Type	Description	Example
Event handler	--	Used to set what action is triggered upon clicking the button. If you want to perform operations on the current row's data upon clicking a button, please enable the row selection switch and use the single selection mode. And use{{dataGrid1.selectedRows[0].columnName}}to specify the data for the SQL or API request.	If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}
Disabled	Boolean	Whether or not to disable the button. For example,{{currentRow.link === "" ? true : false}}. When the link in this row is an empty string, disable the event handler.	{{currentRow.link === "" ? true : false}}
Theme color	--	Used to set the color of the button.	blue

Button group

Place multiple buttons in a column to trigger different events individually.

Configuration

Same as button.

Boolean

Used to visually display the status of a certain attribute or whether a condition is met.

Configuration

No additional configuration.

Image

Used to display images

Configuration

Property name	Type	Description	Example
Scale type	--	Used to set the image's fit mode. 1. Scale-down : Preserve the original aspect ratio of the image, scale down the image to fit within the designated area while maintaining its integrity. 2. Cover : Preserve the original aspect ratio of the image, fill the designated area, and crop any excess parts of the image. 3. Fill : Adjust the aspect ratio of the image to compress or stretch it to fill the designated area. 4. None : Do not resize the image, display it in its original aspect ratio and size, and crop any parts that exceed the designated area.	If you want to set a button to delete the current row, the SQL statement for deletion would be as follows:DELETE FROM table_name WHERE id = {{dataGrid1.selectedRows[0].id}}

Avatar

Configuration

Property name	Type	Description	Example
Avatar type	String	Used to set the avatar type, you can choose from Image, Icon, or Text (using the first letter of the text as the avatar). You can also use JavaScript code to set different avatar types based on different conditions:image,icon,text	If the avatar field is empty in the current row, use the text type. Otherwise, use the specified image type:{{currentRow.avatar===null?"text":"image"}}
Image source	String	Used to set the image source, it can be a URL or a base64 string with a prefix.	{{currentRow.avatar}}
Text	String	We will extract the first letter of the string to use as the avatar.	{{currentRow.name}}
Icon	--	Select an icon to use as the avatar.	--
Label	String	Used to set the label.	{{currentRow.name}}
Caption	String	Used to set the caption.	{{currentRow.email}}
Hidden label	--	Used to set whether or not hide the label, and consequently hide the caption as well, please set the option for hiding the label.	--
Theme color	--	Used to set the avatar color, this option only takes effect in text and icon mode. You can choose between "Auto" or "Custom". In "Auto" mode, we will randomly assign a color. In "Custom" mode, you can specify a color of your choice.	--

Rating

Configuration

Property name	Type	Description	Example
Max count	Number	Used to set the maximum number of stars to be displayed.	{{5}}

Markdown

Used to show the data in markdown format. Only supports single-line Markdown here.

Configuration

Property name	Type	Description	Example
Mapped value	String	Write Markdown here, for example,## {{currentRow.name}}.	## {{currentRow.name}}

Html

Used to render the data as HTML.

Configuration

Property name	Type	Description
Mapped value	String	Write HTML here.

Sort

Property name	Type	Description
Column	--	Used to set whether to sort based on a specific column by default.
Direction	--	Used to set the default sorting direction.

User selection

Property name	Type	Description
Allow row selection	--	Used to set whether or not to allow users to select the rows.
Selection mode	--	Used to set the selection mode, single selection or multiple selection.

Pagination

Property name	Type	Description
Pagination	--	Used to set whether or not to allow users to select the rows.
Enable server side pagination	--	Used to set the selection mode, single selection or multiple selection. In the data grid, we support the "limit offset" pagination method. You can refer to this document to learn about the configuration options: https://docs.illacloud.com/server-side-pagination
Total row count	Number	Used to set the total number of rows, you can create an action to query the total row count, such asSELECT COUNT(*) FROM users. And the total row count could be{{mysql1.data[0].count}}
Page size	Number	Used to set the number of data records returned per page during server-side pagination.

Toolbar

Property name	Description
Density	Used to toggle the display of the Density function on the toolbar. Users can utilize this function to set the line height.
Columns	Used to set whether the column setting entry is displayed on the toolbar. The column setting entry allows for quick adjustment of which columns are displayed.
Refresh	Used to set whether the refresh button is displayed on the toolbar. When using this feature, be sure to add an event handler to listen to refresh events.
Export	Used to set whether the export button is displayed. Users can utilize this function to export the filtered data.
Export all	Used to set whether the 'Export All' button is displayed. Users can utilize this function to export the data before filtering.
Filter	Used to set whether the filtering function is displayed. Users can utilize this function to filter data that meets certain criteria.
Quick filter	Used to set whether the quick filtering function is displayed. Users can utilize this function to query the entire table data through fuzzy matching.

Event

You can listen to the following events.

Event	Description
Sort change	Trigger events when sorting changes.
Page change	Trigger events when current page changes.
Refresh	Trigger events when click refresh button.
Filter change	Trigger events when change the filter.
Row selection change	Trigger events when change the selected rows.
Column visibility change	Trigger events when change the visibility of columns.

Method

You can use other components to control a data grid and achieve the desired behavior.

Set filter

Filter

{{
    {
        items: [
                    { id: 1, field: "size", operator: "=", value: 0 }, 
                    { id: 2, field: "owner", operator: "equals", value: "Mikiko" }
                ], 
        logicOperator: "or", 
        quickFilterValues: ['Mi'],
        quickFilterLogicOperator: "or"
     }
}}

Property name	Type	Description
items	Array	An array used to set multiple filters. Each object in the array is a filtering condition.
idinitems	Any	Set a unique ID for this filtering condition.
fieldinitems	String	Specify which column the filter is working on.
operatorinitems	String	Specify the operator. For number type, we support >, >=, =, <, <=. For string types, we support contains, equals, startsWith, endsWith, isEmpty, isNot, empty, isAnyOf.
valueinitems	String	Used to set the value.
logicOperator	String	Specify the relationship between multiple conditions, "and" or "or".
quickFilterValues	Array	Specify one or more strings for fuzzy searching.
quickFilterLogicOperator	String	Specify the relationship between multiple fuzzy search strings, "and" or "or".

Set column visibility

value

{{
    {
        "columnName": false
     }
}}

Set page

Page: the index of the page starts with 0. For example, {{2}} means the page 3.

Set page size

Value: number used to set the page size. For example, {{5}}.

Set row selection

Value: An array used to set the selected rows. Before using this method, please turn on the allow user selection switch of the data grid. The number in the array means the index of the row which starts from 0. For example, {{[1,2]}} means selecting row 2 and row 3.