🧬 Assemble components
Tables are a common way to view and interact with your data. You can sort, filter, paginate, and download rows of information. Tables also support row selection and custom columns.
When you drag a Table component to the Frame, it automatically displays the test data in JSON format. You can change the data displayed in a table by editing the Data source property. Use the {{ actionName.data }}
format to choose the action.
You can also set the data source by inputing an array.
Set aliases for data columns
When you set the data source of tables, the column name will be automatically set based on the data source. You can rename all columns by clicking on the column in the Inspect tab and set the Column title.
Change column types
When you set the data source of tables, the columns are set to Text. You can set column types manually by clicking on the column in the Inspect tab and selecting the type from the Column type dropdown.
The column types include:
Mapped value of custom columns
You can add custom columns to tables using the + Add button in the Inspect tab. Custom columns are often used to calculate data based on other values in your app. For example, if you have revenue
and user_num
columns and you want to calculate an ARPU
column, you could use {{ currentRow.revenue/currentRow.user_num }}
In addition, after calculating, you can set the column type to number or percent and set the decimal places to improve readability.
Use {{ table1.selectedRow[i].columnName }}
to access the data of selected rows in other components. If you haven’t enabled the Multi-Row Selection, i
will always be 0.
Update the table data
{{ table1.selectedRow[i].columnName }}
.{{ input1.value }}
in Update actions to get selected values and updated values.Insert a new row into table
{{ input1.value }}
in insert actions get values.