将第 1 列 header 移动到特定宽度的每一行

Question

每当浏览器大小低于 Desktop 宽度时，我希望我的响应式 table 隐藏列 headers 并将它们放在与其相应值相同的行中入口。

这是我想要的视觉示例：

桌面宽度

低于桌面宽度

在我看来，实现此行为的方法是添加...

minScreenWidth="desktop"
demandPopin="true"

...添加到 <Column> 标签，但是 不适用于第 1 列 。

所以我的问题是：如何（很好地）为第一列实施该行为？

这是我的最小示例代码（我更改了 this example 的 Table.view.xml）：

<Table items="{/ProductCollection}">
  <columns>
    <Column>
      <Text text="Supplier" />
    </Column>
  </columns>
  <ColumnListItem>
    <Label text="{SupplierName}" />
  </ColumnListItem>
</Table>

Answer 1

响应式 table 不允许将所有列 headers 推送到项目。来自 API reference:

The sap.m.Table control requires at least one visible sap.m.Column in the columns aggregation, therefore applications must avoid configuring all columns to be shown in the pop-in. If such a conflict is detected, then the table prevents one column from moving to the pop-in.

您必须至少再添加一列，以便第 1 列 pop-in。

相关 GitHub 问题：https://github.com/SAP/openui5/issues/1396

将第 1 列 header 移动到特定宽度的每一行

Move 1st column header to each row in certain width

sapui5