Show TOC

Implementing a Responsive TableLocate this document in the navigation structure

SAPUI5 supports column-based and row-based solutions to support flexible and clearly arranged tables.

One of the biggest challenges in responsive web design (RWD) is presenting tabular data. Large tables with lots of columns don't fit on smaller screens and there isn't a simple way to re-format the table content with CSS and media queries for an acceptable presentation. To address this, our framework offers column based solution (column hiding) and row based solution (pop-ins) for presenting tables responsively and both options are applicable at the same time. I know this sounds a little bit complicated. Let's go through on an example.

Suppose that we build such a nice table for desktop.

On mobile, we know that we do not have enough space to show all these columns. Now, we should decide which columns are important. Let's say

  • Product and Price are most important. So they should never be hidden.
  • Supplier, Dimensions and Weight are not particularly important, so we show them as pop-ins

According to our assumption we should have the following on mobile

Responsive Column Control

You can control the responsive table design using the API of sap.m.Column. This control provides two properties to handle column hiding and pop-in.

  1. minScreenWidth : This value defines the break point for the column visibility. e.g. iPhone5 has 568px x 320px resolution (dip/device-width). So if we assign 400px (or 25em based on 16px) then this column will not be visible for portrait mode (width 320px) but will be visible for landscape mode (width 568px). Instead of px or em you can assign one of the predefined sap.m.ScreenSize types like Tablet (for 600px) or Desktop (for 1024px). Default value of this property is empty string this means this column will be visible always.
  2. demandPopin: Depending on your minScreenWidth the column can be hidden in different screen sizes. Setting this property to true, shows this column as pop-in instead of hiding it. Default value is false.

That's it! All you need to know is these two variables for responsive table. If we turn back to our example.

  • Name and Status column should never be hidden. This is the default behavior of column so just let the default values(minScreenWidth : "" and demandPopin: false) make their job.
  • Model Number column should be hidden for small devices so, our break point is minScreenWidth : "Small" and demandPopin : false(default value).
  • Quantity, Unit Price and Final Price these columns should go to pop-in, our break point is same minScreenWidth : "Small" but now demandPopin : true to show column in pop-in.
  • For example in tablet we will have more space then we can show Final Price for tablet(or wider devices) but goes to pop-in for small device. So our break point should be minScreenWidth : "Tablet" and demandPopin : true.
  • Also please note that at least one column should be visible to have a valid table design.