Search code examples
sapui5

Move 1st column header to each row in certain width

Whenever the browser size goes below Desktop width, I want my responsive table to hide the column headers and instead place them in the same row as its corresponding values for each entry.

Here is a visual example of what I want:

Desktop width
Desktop width example

Below desktop width
Below desktop width example

It seemed to me that the way to achieve this behavior was by adding... 

minScreenWidth="desktop"
demandPopin="true"

...to the <Column> tag, but this does not work for the 1st column.

So my question is: How to (nicely) implement that behavior for the 1st column?

Here's my minimal example code (I changed the Table.view.xml of this example):

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

  • Responsive table doesn't allow pushing all column headers to the items. From the 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.

    You'll have to add at least one more column so that the 1st column does pop-in.

    Related GitHub issue: https://github.com/SAP/openui5/issues/1396