跳到主要内容

Data Grid

Data

Property nameTypeDescription
selectedRowsArrayData 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.
currentRowObjectData 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.
pageNumberThe index of the current page, a number starts from 0. For example, when the current page is 1, the index is 0.
pageSizeNumberThe number of data items loaded per page. You can set this value through the right-hand panel.

Configurable properties

Data

Property nameTypeDescription
Data sourceArray of objectsUsed to select the source of the data. For example,{{mysql1.data}}
LoadingBooleanUsed to set whether to display the loading status. For example,{{mysql1.isRunning}}
Primary keyStringUsed to set the primary key of your data.

Columns

Property nameTypeDescription
Column titleArray of objectsUsed to configure the column names displayed in the user interface. By default, it uses column names from the data source.
Column typeStringUsed to configure the data type of the column through a dropdown selection. Different data types have different supported configuration options.
DescriptionStringUsed to configure a description of this column. When the user hovers their mouse over the column title, this description will be displayed.
Mapped valueArrayUsed 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)+"**"}}.
AggregationDropdown selectionUsed 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 sortBooleanUsed to set whether users are allowed to change the sorting based on this column.
Enable users to pinBooleanUsed to set whether users are allowed to pin the column to left or right.
Enable users to filterBooleanUsed to set whether users are allowed to set filters based on this column.
Enable users to hideBooleanUsed to set whether users are allowed to hide this column.
Enable users to aggregateBooleanUsed to set whether users are allowed to hide this column.
Enable users to set group byBooleanUsed to set whether users are allowed to group the data based on this column.
Enable users to resizeBooleanUsed to set whether users are allowed to change the width of this column.
Disable users to reorder columnsBooleanUsed to set whether users are prohibited from adjusting the order of columns.
AlignmentBooleanUsed 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 nameTypeDescription
FormatStringUse 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 nameTypeDescription
FormatStringUse 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 nameTypeDescriptionExample
Tag colorObjectSpecify the colors for different tag values using an object.{{{"product manager":"green","UX/UI":"#FFFFFF"}}}

Number

Display data using numerical types.

Configuration
Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy 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 Llocalesde-DE

Percent

Convert a numerical value into a percentage

Property nameTypeDescriptionExample
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy 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 Llocalesde-DE

Currency

Add a currency symbol to a numerical value.

Property nameTypeDescriptionExample
Currency codeStringUsed to set the currency code. List of currency codeEUR
Decimal placesNumberUsed to set the number of decimal places{{2}}
Show thousands separatorBooleanUsed to set whether or not to show the thousands separator{{true}}
LocaleStringBy 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 Llocalesde-DE

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 nameTypeDescriptionExample
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}}
DisabledBooleanWhether 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 nameTypeDescriptionExample
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 nameTypeDescriptionExample
Avatar typeStringUsed 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,textIf 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 sourceStringUsed to set the image source, it can be a URL or a base64 string with a prefix.{{currentRow.avatar}}
TextStringWe will extract the first letter of the string to use as the avatar.{{currentRow.name}}
Icon--Select an icon to use as the avatar.--
LabelStringUsed to set the label.{{currentRow.name}}
CaptionStringUsed 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 nameTypeDescriptionExample
Max countNumberUsed 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 nameTypeDescriptionExample
Mapped valueStringWrite Markdown here, for example,## {{currentRow.name}}.## {{currentRow.name}}

Html

Used to render the data as HTML.

Configuration
Property nameTypeDescription
Mapped valueStringWrite HTML here.

Sort

Property nameTypeDescription
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 nameTypeDescription
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 nameTypeDescription
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 countNumberUsed 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 sizeNumberUsed to set the number of data records returned per page during server-side pagination.

Toolbar

Property nameDescription
DensityUsed to toggle the display of the Density function on the toolbar. Users can utilize this function to set the line height.
ColumnsUsed 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.
RefreshUsed 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.
ExportUsed to set whether the export button is displayed. Users can utilize this function to export the filtered data.
Export allUsed to set whether the 'Export All' button is displayed. Users can utilize this function to export the data before filtering.
FilterUsed to set whether the filtering function is displayed. Users can utilize this function to filter data that meets certain criteria.
Quick filterUsed 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.

EventDescription
Sort changeTrigger events when sorting changes.
Page changeTrigger events when current page changes.
RefreshTrigger events when click refresh button.
Filter changeTrigger events when change the filter.
Row selection changeTrigger events when change the selected rows.
Column visibility changeTrigger 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 nameTypeDescription
itemsArrayAn array used to set multiple filters. Each object in the array is a filtering condition.
idinitemsAnySet a unique ID for this filtering condition.
fieldinitemsStringSpecify which column the filter is working on.
operatorinitemsStringSpecify the operator. For number type, we support >, >=, =, <, <=. For string types, we support contains, equals, startsWith, endsWith, isEmpty, isNot, empty, isAnyOf.
valueinitemsStringUsed to set the value.
logicOperatorStringSpecify the relationship between multiple conditions, "and" or "or".
quickFilterValuesArraySpecify one or more strings for fuzzy searching.
quickFilterLogicOperatorStringSpecify 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.