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.
- 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.
- 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.