- 表格（Table）
🧬 集合组件
表格（Table）
Contribute是什么是桌面？
ILLA 云中的表格组件是一个强大的功能，用户可以在应用程序中显示、组织和操纵表格数据。 它提供了一个结构化的布局，带有行和列，使用户能够以方便和有条理的方式查看数据并与之互动。 它提供了一个结构化的布局，带有行和列，使用户能够以方便和有条理的方式查看数据并与之互动。
属性
| 属性 | 描述 |
|---|---|
| 数据源 | 填充表格的数据来源 |
| 空状态 | 表中没有要显示的数据时显示的内容或消息 |
| 正在加载 | 表组件目前是否处于加载状态 |
| 列 | 表格中列的结构和配置 (详情见下面关于列的章节) (详情见下面关于列的章节) |
| 列 | 列数 |
| 多行选择 | 您可以使用{{table.selectedRow[n].columnName}}来访问数据。 |
| 单元格选择 | 是否允许用户选择一个单元格 |
| 点击外部取消选择 | 在单行选择模式下支持。 在单行选择模式下支持。 启用后，点击表以外的区域取消选择行。 |
| 溢出 | 表如何处理超出表容器内可用空间的内容(浮动或滚动) |
| 启用服务器端分页 | 是否启用服务器分页 |
| 页面大小 | 启用服务器端分页时每页显示的行数 |
| 刷新 | 是否显示刷新图标。 |
| 下载 | 在工具栏中显示下载按钮。 |
| 下载原始数据 | 是否显示下载原始数据图标。 |
| 筛选器 | 在工具栏中显示过滤按钮 |
| 事件处理程序 | 检测和响应特定用户动作或事件，如点击、按键或表单提交。 |
| 已禁用 | 非交互性且不能被用户修改或触发。 |
对于每一列，我们可以配置其属性来自定义每一列显示的数据。
| 属性 | 描述 |
|---|---|
| 列标题 | 指定列的名称或标签，作为标头来识别它所代表的数据 |
| 列类型 | 定义列包含的数据类型，包括自动、文本、日期、标签、时间、日期， 数字、 百分比、 链接、 按钮、 按钮组、 布尔、 图像、 图标组、 评级、 Markdown、 货币 |
| 嵌套值 | 用{{ currentRow }} 来访问当前行的数据 用{{ currentRow }} 来访问当前行的数据 例如，以“成本”和“点击时间”两栏为基础计算“每次点击的成本”： |
| {● currentRow.cost / currentRow.clickTimes }} | |
| 启用排序 | 该列是否允许用户根据该特定列中的值排序表数据 |
| 背景 | 设置列的背景。 设置列的背景。 使用 {● 写一个条件语句来设置每个单元格在不同条件下显示的颜色。 |
| 对齐 | 控制列单元格内内容的水平对齐方式 |
列类型：
- 自动操作
基于列中的值自动决定数据类型的动态类型
- 文本
代表包含文本数据的列
- 日期
代表特定日期对应的数据值
| 属性 | 描述 |
|---|---|
| 格式 | 接受不同格式的代码或模式，默认是 YYYY-MM-DD |
- 标签
显示与数据项相关的标签或标签的专门格式
| 属性 | 描述 |
|---|---|
| 标签标签 | 表示“标签”列中分配给标签的文本或标签 |
| 标签颜色 | 定义“标签”列中分配给标签的颜色 |
- 时间
准确显示和操纵表内的时间值
| 属性 | 描述 |
|---|---|
| 格式 | 列中时间数据的直观表现，默认是 HH:mm:ss |
- 日期时间
存储并表示日期和时间值
| 属性 | 描述 |
|---|---|
| 格式 | 指定日期和时间值应如何显示在列中，默认是 YYY-MM-DD HH:mm:ss |
- 号码
处理数字数据
| 属性 | 描述 |
|---|---|
| 小数位 | 指定列中要显示数值的十进制位数 |
| 显示千个分隔符 | 此列是否应显示千个分隔符，以提高大量数字的可读性和易于解释性 |
- 百分比
以简洁和有吸引力的方式处理百分比值
| 属性 | 描述 |
|---|---|
| 小数位 | 指定列中百分比值所显示的小数点数 |
| 显示千个分隔符 | 是否应该在显示的百分比值中包含千位分隔符 |
- 链接
包含可点击链接到指定列
- 按钮
包含特定列中的交互按钮
| 属性 | 描述 |
|---|---|
| 事件处理程序 | 定义单击列中按钮时发生的动作或事件 |
| 已禁用 | 是否启用或禁用列中的按钮 |
| 主题颜色 | 选择按钮的主题颜色 |
| 变体 | 按钮的视觉风格或变体(填写或大纲) |
- 按钮组
允许用户在一列中创建交互式按钮组
对于列中的每个按钮，我们可以配置其属性。
| 属性 | 描述 |
|---|---|
| 嵌套值 | 从数据源将按钮组中的每个按钮与特定值或字段关联 |
| 变体 | 按钮组中的视觉风格或外观 |
| 事件处理程序 | 当群组中的按钮被点击或交互时触发的动作或函数 |
| 已禁用 | 是否启用或禁用按钮组 |
| 主题颜色 | 自定义分组按钮的颜色或样式以与总体主题对齐或给其应用程序或网站打上标签 |
- Boolean
代表具有两个可能状态的数据: 真或 false
- 图片
用图像数据填充表中的列
| 属性 | 描述 |
|---|---|
| 缩放类型 | 图像如何缩放或在表格单元格中调整大小 |
- 图标组
允许用户在组或集合中显示图标的专门列
对于列中的每个按钮，我们可以配置其属性。
| 属性 | 描述 |
|---|---|
| 图标 | 允许用户选择或指定图标在图标组列中显示 |
| 主题颜色 | 设置图标内图标的配色方案或主题 |
| 事件处理程序 | 允许用户定义当图标组列中的图标被用户交互时触发的事件或动作 |
| 已禁用 | 图标群组列的状态, 确定它是否已禁用或启用用户交互功能 |
- 评分
代表给项目或实体的评分或反馈
- Markdown
能够在列单元格内使用 Markdown 语法渲染格式化文本
- 货币
句柄和格式化货币值。
| 属性 | 描述 |
|---|---|
| 小数位 | 列中货币值所显示的小数点数 |
| 货币代码 | 指定表示列中使用的货币的代码或缩写 |
| 显示千个分隔符 | 是否以大货币值显示一个千分隔符 |
方法
您可以使用其他组件来控制组件。 我们支持以下两种方法： 我们支持以下两种方法：
- selectPage
在分页表中选择特定页面上的所有行
| 属性 | 描述 |
|---|---|
| 结束值 | 要选择的页面编号或索引 |
- selectRow
在表中选择一个特定行
| 属性 | 描述 |
|---|---|
| 默认选中行 | 默认选中的行值，可以是行索引、唯一的标识符或任何其他属性来独特识别要选定的行 |
- clearSelection
清除表中当前选择
- setFilters
将过滤器应用到表数据
| 属性 | 描述 |
|---|---|
| 筛选器 | 过滤条件或标准 |
| 筛选模式 | 确定筛选器如何应用 |
- ClearFilters
清除表中任何应用的过滤器
- setSort
设置表排序方式
| 属性 | 描述 |
|---|---|
| 列 | 应用排序的列 |
| 方向 | 排序的方向，可以是“升序”或“降序” |
数据
组件有一些常用的数据，可以通过应用程序中的 {{componentName.propertyName}} 调用。
| 属性名称 | 描述 |
|---|---|
| 点击外部重置选区 | 是否点击表组件外面重置当前选区 |
| columnMapper | 一个将表格数据源中的数据字段或键映射到相应列名称的对象 |
| 列名称index | 存储列名称索引的对象 |
| 列 | 定义表中每一列的配置和属性的数组 |
| 列可见性 | 一个存储表中每一列可见状态的对象 |
| 自定义列指标 | 一个在表中存储自定义列索引的对象 |
| 数据源 | 表的数据源 |
| dataSourceJS | 一个数据源的 JavaScript 表达式 |
| 数据源模式 | 数据源的模式或类型。 |
| 默认SortKey | 用于最初排序表的默认列键 |
| defaultSortOrder | 表的默认排序顺序 |
| 已禁用 | 是否禁用表组件 |
| 显示数据 | 当前显示在表中的数据 |
| 显示数据indices | 表中显示行的索引 |
| 显示名称 | 指定表格组件的名称或标签 |
| 下载 | 允许下载表数据的能力 |
| downloadRawData | 是否下载原始数据或表中显示的数据 |
| 空状态 | 表格空时显示的内容或消息 |
| 启用服务器SidePagination | 如果设置为 true，启用服务器SidePagining 属性将使服务器端分页用于表 |
| 启用单单元选择 | 允许在表中选择单单元格 |
| 筛选器 | 表中当前应用的过滤器或过滤条件 |
| hasNextPage | 分页表中是否有下一页 |
| 正在加载 | 表组件是否处于加载状态 |
| multiRowSelection | 启用表中的多行选择 |
| nextAfterCursor | 获取服务器端分页中下一组数据的光标或标识符 |
| 下一节光标 | 在服务器端分页中获取上一组数据的光标 |
| 溢出 | 内容超出可用空间时表格的行为 |
| pageIndex | 分页表中的当前页面索引 |
| 页面大小 | 决定每页显示在分页表中的行数 |
| 经济及社会理事会 | 经济及社会理事会 |
| 刷新 | 触发表格数据的刷新 |
| 重命名列名称 | 在表中存储重命名列名称 |
| 行事件 | 允许自定义事件或活动与表中的特定行关联 |
| 总计行数 | 表中行总数 |
示例： {{table1.disabled}}
使用大小写
接下来，我们将演示如何将数据从 **Upstassh** 映射到 **table** 组件中。
步骤 1 添加动作
让我们在乌普斯塔什创建一个叫做“雇员概况”的桌子，** 包括4栏name、level、age和已婚’。
然后，我们可以在 ILLA 云中创建一个新的 Upstash 动作，并命名为upstash2。
若要在员工个人资料中列出所有数据，请将代码片段放在Redis 查询部分。
GET 员工资料由于输出数据是字典对应列表，因此我们想要将它变成一个数组。 在转换中，启用它并将代码放在下面。 在转换中，启用它并将代码放在下面。
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;
点击 `保存 和 Run 激活此操作。
步骤 2 添加组件
接下来，我们可以在画布中添加 table 组件。
In the Data Source field in the Inspect page after clicking on the component, put {{upstash2.data}} to retrieve the data from Upstash.
第 3 步测试
最后的外观应该像显示的那样。
