列
Table类使用列实例来定义和自定义数据的显示方式。列控制显示的数据、外观以及用户与数据的交互方式。此页面涵盖列的身份、展示、大小、用户交互和相关事件。
列身份
列的身份定义了它在Table中的识别方式。这包括其标签、提供的值以及其是否可见或可导航。
标签
列的标签是其公共标识符,帮助澄清显示的数据。
使用setLabel()来设置或修改标签。
提示
默认情况下,标签将与列 ID 相同。
table.addColumn("Product ID", Product::getProductId).setLabel("ID");
值提供者
值提供者是一个负责将基础数据集中的原始数据转换为适合在特定列中显示格式的函数。该函数由您定义,接受行数据类型 (T) 的实例,并返回要在该特定行的关联列中展示的值。
要在列上设置值提供者,请使用Table组件的addColumn()方法之一。
在以下代码片段中,列将尝试从 JSON 对象访问数据,仅在数据不为 null 时渲染。
List<String> columnsList = List.of("athlete", "age", "country", "year", "sport", "gold", "silver", "bronze", "total");
for (String column : columnsList) {
table.addColumn(column, (JsonObject person) -> {
JsonElement element = person.get(column);
if (!element.isJsonNull()) {
return element.getAsString();
}
return "";
});
}
可见性
可以设置列的可见性,以确定它是否在Table中显示。这在确定是否显示敏感信息时非常有用。
table.addColumn("Credit Card", Customer::getCreditCardNumber).setHidden(true);
可导航
可导航属性决定用户在导航时是否可以与列进行交互。将setSuppressNavigable()设置为 true 将限制用户与该列的交互,提供只读体验。
table.addColumn("ReadOnly Column", Product::getDescription).setSuppressNavigable(true);
布局和格式化
在建立列的身份之后,下一步是控制其内容如何向用户呈现。布局选项如对齐和固定决定数据的位置以及在您操作Table时如何保持可见。
对齐
设置列的对齐方式可以创建有序的表格,这可以帮助用户识别Table中的不同部分。
Table 组件支持三种对齐选项:
Column.Alignment.LEFT:适合文本或描述性数据,保持左向流动是直观的。在强调内容的起点时很有用。Column.Alignment.CENTER:居中对齐的列适用于较短的值,如字符键、状态或任何其他具有平衡展示的内容。Column.Alignment.RIGHT:考虑为数字值使用右 对齐列,这些值便于快速扫描,例如日期、金额和百分比。
在前面的示例中,Cost的最后一列已右对齐,以提供更明显的视觉区分。
固定
列固定是一个功能,允许用户将列"固定"到Table的特定侧面。当某些列(例如标识符或关键信息)需要在水平滚动表格时保持可见时,这非常有用。
列的固定可以有三种方向:
PinDirection.LEFT:将列固定到左侧。PinDirection.RIGHT:将列固定到右侧。PinDirection.AUTO:列根据插入顺序显示。
固定可以以编程方式设置,允许您根据用户交互或应用程序逻辑更改固定方向。