The sap.m.Table
control provides a set of sophisticated and convenience functions for responsive table design.
To render the sap.m.Table
control properly, the order of the columns
aggregation should match with the order of the cells
aggregation (sap.m.ColumnListItem
).
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.
For mobile devices, the recommended limit of table rows is 100 (based on 4 columns) to assure proper performance. To improve initial rendering of large tables, use the growing
feature.
See section "Creating Tables" and "Configuring Responsive Behavior of a Table" in the documentation for an introduction to sap.m.Table
control.
Constructor for a new Table.
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.m.Table(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | Id for the new control, generated automatically if no id is given |
|
mSettings? | object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
alternateRowColors | boolean | false | Enables alternating table row colors. Note: This property can only be used with the Belize and Belize Deep themes. Alternate row coloring is not available for the High Contrast Black/White themes. |
autoPopinMode | boolean | false | Enables the auto pop-in behavior for the table control. If this property is set to
Note: If this property is changed from |
backgroundDesign | sap.m.BackgroundDesign | Translucent | Sets the background style of the table. Depending on the theme, you can change the state of the background from |
contextualWidth | string | Inherit | Defines the contextual width for the For example, by setting the |
fixedLayout | any | true | Defines the algorithm to be used to layout the table cells, rows, and columns. This property allows three possible values:
By default, the table is rendered with a fixed layout algorithm ( If this property is set to If this property is set to If there is only one remaining column with a width larger than the table, then this column gets the maximum width available in the table. If the column width is smaller than the table, then the column width is retained, and the remaining width of the table is occupied by the placeholder column. The placeholder column gets rendered only if there are no columns in the pop-in area. Note: Since |
popinLayout | sap.m.PopinLayout | Block | Defines the layout in which the table pop-in rows are rendered. Note: The |
showOverlay | boolean | false | Setting this property to |
Name | Type | Default Value | Description |
---|---|---|---|
enableBusyIndicator | boolean | true | When this property is set to |
footerText | string | Defines the footer text that appears in the control. Visibility: public |
|
growing | boolean | false | If set to |
growingDirection | sap.m.ListGrowingDirection | Downwards | Defines the direction of the growing feature. If set to |
growingScrollToLoad | boolean | false | If set to true, the user can scroll down/up to load more items. Otherwise a growing button is displayed at the bottom/top of the control. Note: This property can only be used if the |
growingThreshold | int | 20 | Defines the number of items to be requested from the model for each grow. This property can only be used if the |
growingTriggerText | string | Defines the text displayed on the growing button. The default is a translated text ("More") coming from the message bundle. This property can only be used if the |
|
headerDesign | sap.m.ListHeaderDesign | Standard | Defines the header style of the control. Possible values are |
headerText | string | Defines the header text that appears in the control. Note: If |
|
includeItemInSelection | boolean | false | Defines whether the items are selectable by clicking on the item itself ( |
inset | boolean | false | Defines the indentation of the container. Setting it to |
keyboardMode | sap.m.ListKeyboardMode | Navigation | Defines keyboard handling behavior of the control. |
mode | sap.m.ListMode | None | Defines the mode of the control (e.g. |
modeAnimationOn | boolean | true | Defines if animations will be shown while switching between modes. Visibility: public |
multiSelectMode | sap.m.MultiSelectMode | Default | Defines the multi-selection mode for the control. If this property is set to the Note: This property must be used with the |
noDataText | string | This text is displayed when the control contains no items. Visibility: public |
|
rememberSelections | boolean | true | If set to true, this control remembers and retains the selection of the items after a binding update has been performed (e.g. sorting, filtering). Note: This feature works only if two-way data binding for the |
showNoData | boolean | true | Defines whether or not the text specified in the |
showSeparators | sap.m.ListSeparators | All | Defines which item separator style will be used. Visibility: public |
showUnread | boolean | false | Activates the unread indicator for all items, if set to |
sticky | sap.m.Sticky[] | Defines the section of the control that remains fixed at the top of the page during vertical scrolling as long as the control is in the viewport. Note: Enabling sticky column headers in List controls will not have any effect. There are some known restrictions. A few are given below:
Since: 1.58.Visibility: public |
|
swipeDirection | sap.m.SwipeDirection | Both | Defines the direction of the swipe movement (e.g LeftToRight, RightToLeft, Both) to display the control defined in the |
width | sap.ui.core.CSSSize | 100% | Sets the width of the control. Visibility: public |
Default Aggregation:
Name | Cardinality | Type | Description |
---|---|---|---|
columns | 0..n | sap.m.Column |
Defines the columns of the table. |
Name | Cardinality | Type | Description |
---|---|---|---|
contextMenu | 0..1 | sap.ui.core.IContextMenu |
Defines the context menu of the items. |
headerToolbar | 0..1 | sap.m.Toolbar |
The header area can be used as a toolbar to add extra controls for user interactions. Note: When set, this overwrites the |
infoToolbar | 0..1 | sap.m.Toolbar |
A toolbar that is placed below the header to show extra information to the user. |
items | 0..n | sap.m.ListItemBase |
Defines the items contained within this control. |
swipeContent | 0..1 | sap.ui.core.Control |
User can swipe to bring in this control on the right hand side of an item. Note:
|
Event | Description |
---|---|
beforeOpenContextMenu |
Fired when the context menu is opened. When the context menu is opened, the binding context of the item is set to the given Listeners may prevent the default action of this event by calling the |
paste |
This event gets fired when the user pastes content from the clipboard to the table. Pasting can be done via the context menu or the standard paste keyboard shortcut, if the focus is inside the table. Listeners may prevent the default action of this event by calling the |
popinChanged |
Fired when the table pop-in has changed. |
Fired when the context menu is opened. When the context menu is opened, the binding context of the item is set to the given contextMenu
.
Listeners may prevent the default action of this event by calling the preventDefault
method on the event object.
Since: 1.54.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
listItem | sap.m.ColumnListItem |
Item in which the context menu was opened. |
column | sap.m.Column |
Column in which the context menu was opened. Note: This parameter might be undefined for the items that are not part of a column definition. |
This event gets fired when the user pastes content from the clipboard to the table. Pasting can be done via the context menu or the standard paste keyboard shortcut, if the focus is inside the table.
Listeners may prevent the default action of this event by calling the preventDefault
method on the event object.
Since: 1.60.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
data | string[][] |
2D array of strings with data from the clipboard. The first dimension represents the rows, and the second dimension represents the cells of the tabular data. |
Fired when the table pop-in has changed.
Since: 1.77.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
hasPopin | boolean |
Returns true if there are visible columns in the pop-in area |
visibleInPopin | sap.m.Column[] |
Returns array of all visible columns in the pop-in area. |
hiddenInPopin | sap.m.Column[] |
Returns array of columns that are hidden in the pop-in based on their importance. See sap.m.Column#getImportance |
Method | Description |
---|---|
addColumn |
Adds some column to the aggregation columns. |
attachBeforeOpenContextMenu |
Attaches event handler When called, the context of the event handler (its Fired when the context menu is opened. When the context menu is opened, the binding context of the item is set to the given |
attachPaste |
Attaches event handler When called, the context of the event handler (its This event gets fired when the user pastes content from the clipboard to the table. Pasting can be done via the context menu or the standard paste keyboard shortcut, if the focus is inside the table. |
attachPopinChanged |
Attaches event handler When called, the context of the event handler (its Fired when the table pop-in has changed. |
destroyColumns |
Destroys all the columns in the aggregation columns. |
detachBeforeOpenContextMenu |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachPaste |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachPopinChanged |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
enhanceAccessibilityState |
This method is a hook for the RenderManager that gets called during the rendering of child Controls. It allows to add, remove and update existing accessibility attributes (ARIA) of those controls. |
sap.m.Table.extend |
Creates a new subclass of class sap.m.Table with name
|
fireBeforeOpenContextMenu |
Fires event beforeOpenContextMenu to attached listeners. Listeners may prevent the default action of this event by calling the |
firePaste |
Fires event paste to attached listeners. Listeners may prevent the default action of this event by calling the |
firePopinChanged |
Fires event popinChanged to attached listeners. |
getAlternateRowColors |
Gets current value of property alternateRowColors. Enables alternating table row colors. Note: This property can only be used with the Belize and Belize Deep themes. Alternate row coloring is not available for the High Contrast Black/White themes. Default value is |
getAutoPopinMode |
Gets current value of property autoPopinMode. Enables the auto pop-in behavior for the table control. If this property is set to
Note: If this property is changed from Default value is |
getBackgroundDesign |
Gets current value of property backgroundDesign. Sets the background style of the table. Depending on the theme, you can change the state of the background from Default value is |
getColumns |
Getter for aggregation columns. |
getContextualWidth |
Gets current value of property contextualWidth. Defines the contextual width for the For example, by setting the Default value is |
getFixedLayout |
Gets current value of property fixedLayout. Defines the algorithm to be used to layout the table cells, rows, and columns. This property allows three possible values:
By default, the table is rendered with a fixed layout algorithm ( If this property is set to If this property is set to If there is only one remaining column with a width larger than the table, then this column gets the maximum width available in the table. If the column width is smaller than the table, then the column width is retained, and the remaining width of the table is occupied by the placeholder column. The placeholder column gets rendered only if there are no columns in the pop-in area. Note: Since Default value is |
getHiddenInPopin |
Gets current value of property hiddenInPopin. Defines which columns should be hidden instead of moved into the pop-in area depending on their importance. See sap.m.Column#getImportance Note: To hide columns based on their importance, it's mandatory to set |
sap.m.Table.getMetadata |
Returns a metadata object for class sap.m.Table. |
getPopinLayout |
Gets current value of property popinLayout. Defines the layout in which the table pop-in rows are rendered. Note: The Default value is |
getShowOverlay |
Gets current value of property showOverlay. Setting this property to Default value is |
indexOfColumn |
Checks for the provided |
insertColumn |
Inserts a column into the aggregation columns. |
removeAllColumns |
Removes all the controls from the aggregation columns. Additionally, it unregisters them from the hosting UIArea. |
removeColumn |
Removes a column from the aggregation columns. |
setAlternateRowColors |
Sets a new value for property alternateRowColors. Enables alternating table row colors. Note: This property can only be used with the Belize and Belize Deep themes. Alternate row coloring is not available for the High Contrast Black/White themes. When called with a value of Default value is |
setAutoPopinMode |
Sets a new value for property autoPopinMode. Enables the auto pop-in behavior for the table control. If this property is set to
Note: If this property is changed from When called with a value of Default value is |
setBackgroundDesign |
Sets a new value for property backgroundDesign. Sets the background style of the table. Depending on the theme, you can change the state of the background from When called with a value of Default value is |
setContextualWidth |
Sets a new value for property contextualWidth. Defines the contextual width for the For example, by setting the When called with a value of Default value is |
setFixedLayout |
Sets a new value for property fixedLayout. Defines the algorithm to be used to layout the table cells, rows, and columns. This property allows three possible values:
By default, the table is rendered with a fixed layout algorithm ( If this property is set to If this property is set to If there is only one remaining column with a width larger than the table, then this column gets the maximum width available in the table. If the column width is smaller than the table, then the column width is retained, and the remaining width of the table is occupied by the placeholder column. The placeholder column gets rendered only if there are no columns in the pop-in area. Note: Since When called with a value of Default value is |
setHiddenInPopin |
Sets a new value for property hiddenInPopin. Defines which columns should be hidden instead of moved into the pop-in area depending on their importance. See sap.m.Column#getImportance Note: To hide columns based on their importance, it's mandatory to set When called with a value of |
setPopinLayout |
Sets a new value for property popinLayout. Defines the layout in which the table pop-in rows are rendered. Note: The When called with a value of Default value is |
setShowOverlay |
Sets a new value for property showOverlay. Setting this property to When called with a value of Default value is |
Adds some column to the aggregation columns.
Param | Type | DefaultValue | Description |
---|---|---|---|
oColumn | sap.m.Column |
The column to add; if empty, nothing is inserted |
Attaches event handler fnFunction
to the beforeOpenContextMenu event of this sap.m.Table
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.Table
itself.
Fired when the context menu is opened. When the context menu is opened, the binding context of the item is set to the given contextMenu
.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the paste event of this sap.m.Table
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.Table
itself.
This event gets fired when the user pastes content from the clipboard to the table. Pasting can be done via the context menu or the standard paste keyboard shortcut, if the focus is inside the table.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the popinChanged event of this sap.m.Table
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.Table
itself.
Fired when the table pop-in has changed.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Detaches event handler fnFunction
from the beforeOpenContextMenu event of this sap.m.Table
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the paste event of this sap.m.Table
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the popinChanged event of this sap.m.Table
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
This method is a hook for the RenderManager that gets called during the rendering of child Controls. It allows to add, remove and update existing accessibility attributes (ARIA) of those controls.
Param | Type | DefaultValue | Description |
---|---|---|---|
oElement | sap.ui.core.Control |
The Control that gets rendered by the RenderManager |
|
mAriaProps | object |
The mapping of "aria-" prefixed attributes |
Creates a new subclass of class sap.m.Table with name sClassName
and enriches it with the information contained in oClassInfo
.
oClassInfo
might contain the same kind of information as described in sap.m.ListBase.extend.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Fires event beforeOpenContextMenu to attached listeners.
Listeners may prevent the default action of this event by calling the preventDefault
method on the event object. The return value of this method indicates whether the default action should be executed.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
listItem | sap.m.ColumnListItem |
Item in which the context menu was opened. |
|
column | sap.m.Column |
Column in which the context menu was opened. Note: This parameter might be undefined for the items that are not part of a column definition. |
Fires event paste to attached listeners.
Listeners may prevent the default action of this event by calling the preventDefault
method on the event object. The return value of this method indicates whether the default action should be executed.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
data | string[][] |
2D array of strings with data from the clipboard. The first dimension represents the rows, and the second dimension represents the cells of the tabular data. |
Fires event popinChanged to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
hasPopin | boolean |
Returns true if there are visible columns in the pop-in area |
|
visibleInPopin | sap.m.Column[] |
Returns array of all visible columns in the pop-in area. |
|
hiddenInPopin | sap.m.Column[] |
Returns array of columns that are hidden in the pop-in based on their importance. See sap.m.Column#getImportance |
Gets current value of property alternateRowColors.
Enables alternating table row colors. Note: This property can only be used with the Belize and Belize Deep themes. Alternate row coloring is not available for the High Contrast Black/White themes.
Default value is false
.
Gets current value of property autoPopinMode.
Enables the auto pop-in behavior for the table control.
If this property is set to true
, the table control overwrites the demandPopin
and the minScreenWidth
properties of the sap.m.Column
control. The pop-in behavior depends on the importance
property of the sap.m.Column
control. Columns configured with this property are moved to the pop-in area in the following order:
High
: moved lastMedium
or None
: moved secondLow
: moved firstNote: If this property is changed from true
to false
, the application must reconfigure the demandPopin
and minScreenWidth
properties of the sap.m.Column
control by itself. There is no automatic mechanism that restores the old values if autoPopinMode
was set from false
to true
before.
Default value is false
.
Gets current value of property backgroundDesign.
Sets the background style of the table. Depending on the theme, you can change the state of the background from Solid
to Translucent
or to Transparent
.
Default value is Translucent
.
Getter for aggregation columns.
Param | Type | DefaultValue | Description |
---|---|---|---|
bSort | boolean |
set true to get the columns in an order that respects personalization settings |
Gets current value of property contextualWidth.
Defines the contextual width for the sap.m.Table
control. By defining this property the table adapts the pop-in behavior based on the container in which the table is placed or the configured contextual width. By default, sap.m.Table
renders in pop-in behavior only depending on the window size or device.
For example, by setting the contextualWidth
property to 600px or Tablet, the table can be placed in a container with 600px width, where the pop-in is used. You can use specific CSS sizes (for example, 600px or 600), you can also use the sap.m.ScreenSize
enumeration (for example, Phone, Tablet, Desktop, Small, Medium, Large, ....). If this property is set to Auto
, the ResizeHandler
will manage the contextual width of the table. Note: Only "Inherit", "Auto", and pixel-based CSS sizes (for example, 200, 200px) can be applied to the contextualWidth
property. Due to the rendering cost, we recommend to use the valid value mentioned before except for "Auto".
Default value is "Inherit"
.
Gets current value of property fixedLayout.
Defines the algorithm to be used to layout the table cells, rows, and columns. This property allows three possible values:
true
false
Strict
By default, the table is rendered with a fixed layout algorithm (fixedLayout=true
). This means the horizontal layout only depends on the table's width and the width of the columns, not the content of the cells. Cells in subsequent rows do not affect column width. This allows a browser to provide a faster table layout since the browser can begin to display the table once the first row has been analyzed.
If this property is set to false
, sap.m.Table
is rendered with an auto layout algorithm. This means, the width of the table and its cells depends on the content of the cells. The column width is set by the widest unbreakable content inside the cells. This can make the rendering slow, since the browser needs to go through all the content in the table before determining the final layout.
If this property is set to Strict
and the width
property is defined for all columns (and not the expected "auto" value), then the sap.m.Table
control renders a placeholder column which occupies the remaining width of the control to ensure the column width setting is strictly applied.
If there is only one remaining column with a width larger than the table, then this column gets the maximum width available in the table. If the column width is smaller than the table, then the column width is retained, and the remaining width of the table is occupied by the placeholder column.
The placeholder column gets rendered only if there are no columns in the pop-in area.
Note: Since sap.m.Table
does not have its own scrollbars, setting fixedLayout
to false can force the table to overflow, which may cause visual problems. It is suggested to use this property when a table has a few columns in wide screens or within the horizontal scroll container (e.g sap.m.Dialog
) to handle overflow. In auto layout mode the width
property of sap.m.Column
is taken into account as a minimum width.
Default value is true
.
Gets current value of property hiddenInPopin.
Defines which columns should be hidden instead of moved into the pop-in area depending on their importance. See sap.m.Column#getImportance
Note: To hide columns based on their importance, it's mandatory to set demandPopin="true"
for the sap.m.Column
control or set autoPopinMode="true"
for the sap.m.Table
control. See Configuring Responsive Behavior of a Table and sap.m.Table#getAutoPopinMode.
Gets current value of property popinLayout.
Defines the layout in which the table pop-in rows are rendered. Note: The demandPopin
and minScreenWidth
properties of the Column
control must be configured appropriately.
Default value is Block
.
Gets current value of property showOverlay.
Setting this property to true
will show an overlay on top of the table content and prevents the user interaction with it.
Default value is false
.
Checks for the provided sap.m.Column
in the aggregation columns. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oColumn | sap.m.Column |
The column whose index is looked for |
Inserts a column into the aggregation columns.
Param | Type | DefaultValue | Description |
---|---|---|---|
oColumn | sap.m.Column |
The column to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Removes all the controls from the aggregation columns.
Additionally, it unregisters them from the hosting UIArea.
Removes a column from the aggregation columns.
Param | Type | DefaultValue | Description |
---|---|---|---|
vColumn | int string sap.m.Column |
The column to remove or its index or id |
Sets a new value for property alternateRowColors.
Enables alternating table row colors. Note: This property can only be used with the Belize and Belize Deep themes. Alternate row coloring is not available for the High Contrast Black/White themes.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bAlternateRowColors | boolean | false |
New value for property |
Sets a new value for property autoPopinMode.
Enables the auto pop-in behavior for the table control.
If this property is set to true
, the table control overwrites the demandPopin
and the minScreenWidth
properties of the sap.m.Column
control. The pop-in behavior depends on the importance
property of the sap.m.Column
control. Columns configured with this property are moved to the pop-in area in the following order:
High
: moved lastMedium
or None
: moved secondLow
: moved firstNote: If this property is changed from true
to false
, the application must reconfigure the demandPopin
and minScreenWidth
properties of the sap.m.Column
control by itself. There is no automatic mechanism that restores the old values if autoPopinMode
was set from false
to true
before.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bAutoPopinMode | boolean | false |
New value for property |
Sets a new value for property backgroundDesign.
Sets the background style of the table. Depending on the theme, you can change the state of the background from Solid
to Translucent
or to Transparent
.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Translucent
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sBackgroundDesign | sap.m.BackgroundDesign | Translucent |
New value for property |
Sets a new value for property contextualWidth.
Defines the contextual width for the sap.m.Table
control. By defining this property the table adapts the pop-in behavior based on the container in which the table is placed or the configured contextual width. By default, sap.m.Table
renders in pop-in behavior only depending on the window size or device.
For example, by setting the contextualWidth
property to 600px or Tablet, the table can be placed in a container with 600px width, where the pop-in is used. You can use specific CSS sizes (for example, 600px or 600), you can also use the sap.m.ScreenSize
enumeration (for example, Phone, Tablet, Desktop, Small, Medium, Large, ....). If this property is set to Auto
, the ResizeHandler
will manage the contextual width of the table. Note: Only "Inherit", "Auto", and pixel-based CSS sizes (for example, 200, 200px) can be applied to the contextualWidth
property. Due to the rendering cost, we recommend to use the valid value mentioned before except for "Auto".
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "Inherit"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sContextualWidth | string | "Inherit" |
New value for property |
Sets a new value for property fixedLayout.
Defines the algorithm to be used to layout the table cells, rows, and columns. This property allows three possible values:
true
false
Strict
By default, the table is rendered with a fixed layout algorithm (fixedLayout=true
). This means the horizontal layout only depends on the table's width and the width of the columns, not the content of the cells. Cells in subsequent rows do not affect column width. This allows a browser to provide a faster table layout since the browser can begin to display the table once the first row has been analyzed.
If this property is set to false
, sap.m.Table
is rendered with an auto layout algorithm. This means, the width of the table and its cells depends on the content of the cells. The column width is set by the widest unbreakable content inside the cells. This can make the rendering slow, since the browser needs to go through all the content in the table before determining the final layout.
If this property is set to Strict
and the width
property is defined for all columns (and not the expected "auto" value), then the sap.m.Table
control renders a placeholder column which occupies the remaining width of the control to ensure the column width setting is strictly applied.
If there is only one remaining column with a width larger than the table, then this column gets the maximum width available in the table. If the column width is smaller than the table, then the column width is retained, and the remaining width of the table is occupied by the placeholder column.
The placeholder column gets rendered only if there are no columns in the pop-in area.
Note: Since sap.m.Table
does not have its own scrollbars, setting fixedLayout
to false can force the table to overflow, which may cause visual problems. It is suggested to use this property when a table has a few columns in wide screens or within the horizontal scroll container (e.g sap.m.Dialog
) to handle overflow. In auto layout mode the width
property of sap.m.Column
is taken into account as a minimum width.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
oFixedLayout | any | true |
New value for property |
Sets a new value for property hiddenInPopin.
Defines which columns should be hidden instead of moved into the pop-in area depending on their importance. See sap.m.Column#getImportance
Note: To hide columns based on their importance, it's mandatory to set demandPopin="true"
for the sap.m.Column
control or set autoPopinMode="true"
for the sap.m.Table
control. See Configuring Responsive Behavior of a Table and sap.m.Table#getAutoPopinMode.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sHiddenInPopin | sap.ui.core.Priority[] |
New value for property |
Sets a new value for property popinLayout.
Defines the layout in which the table pop-in rows are rendered. Note: The demandPopin
and minScreenWidth
properties of the Column
control must be configured appropriately.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Block
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sPopinLayout | sap.m.PopinLayout | Block |
New value for property |
Sets a new value for property showOverlay.
Setting this property to true
will show an overlay on top of the table content and prevents the user interaction with it.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bShowOverlay | boolean | false |
New value for property |