UI5 Web Components
Search

Table

@ui5/webcomponents
<ui5-table>

Basic Table

Products table - resize your browser to make some columns pop-in Toggle Sticky Column Header
Product Supplier Dimensions Weight Price 
<!-- Header -->
<div class="header">
	<span>Products table - resize your browser to make some columns pop-in</span>
	<button id="toggleSticky" style="height: 32px">Toggle Sticky Column Header</button>
</div>

<ui5-table class="demo-table" id="table">
	<!-- Columns -->
	<ui5-table-column slot="columns">
		<span style="line-height: 1.4rem">Product</span>
	</ui5-table-column>

	<ui5-table-column slot="columns" min-width="800">
		<span style="line-height: 1.4rem">Supplier</span>
	</ui5-table-column>

	<ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin class="table-header-text-alignment">
		<span style="line-height: 1.4rem">Dimensions</span>
	</ui5-table-column>

	<ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin class="table-header-text-alignment">
		<span style="line-height: 1.4rem">Weight</span>
	</ui5-table-column>

	<ui5-table-column slot="columns" class="table-header-text-alignment">
		<span style="line-height: 1.4rem">Price</span>
	</ui5-table-column>

	<ui5-table-row>
		<ui5-table-cell>
			<div class="double-line-content">
				<span><b>Notebook Basic 15</b></span>
				<span style="margin-top: 0.5rem">HT-1000</span>
			</div>
		</ui5-table-cell>
		<ui5-table-cell>
			<span>Very Best Screens</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span>30 x 18 x 3cm</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span style="color: #2b7c2b"><b>4.2</b>KG</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span><b>956</b>EUR</span>
		</ui5-table-cell>
	</ui5-table-row>

	<ui5-table-row>
		<ui5-table-cell>
			<div class="double-line-content">
				<span><b>Notebook Basic 175</b></span>
				<span style="margin-top: 0.5rem">HT-1001</span>
			</div>
		</ui5-table-cell>
		<ui5-table-cell>
			<span>Very Best Screens</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span>29 x 17 x 3.1cm</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span style="color: #2b7c2b"><b>4.5</b>KG</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span><b>1249</b>EUR</span>
		</ui5-table-cell>
	</ui5-table-row>

	<ui5-table-row>
		<ui5-table-cell>
			<div class="double-line-content">
				<span><b>Notebook Basic 18</b></span>
				<span style="margin-top: 0.5rem">HT-1002</span>
			</div>
		</ui5-table-cell>
		<ui5-table-cell>
			<span>Very Best Screens</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span>28 x 19 x 2.5cm</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span style="color: #2b7c2b"><b>4.2</b>KG</span>
		</ui5-table-cell>
		<ui5-table-cell style="text-align: right">
			<span><b>1570</b>EUR</span>
		</ui5-table-cell>
	</ui5-table-row>

	...
</ui5-table>

<style>
	ui5-table ui5-table-column.table-header-text-alignment::part(column) {
		text-align: end;
	}
</style>

Table in SingleSelect mode

Product Supplier Dimensions Weight Price 
<ui5-table mode="SingleSelect"></ui5-table>

<style>
	ui5-table ui5-table-column.table-header-text-alignment::part(column) {
		text-align: end;
	}
</style>

Table in MultiSelect mode

Product Supplier Dimensions Weight Price 
<ui5-table mode="MultiSelect"></ui5-table>

<style>
	ui5-table ui5-table-column.table-header-text-alignment::part(column) {
		text-align: end;
	}
</style>

Table Display Inline

Products table - resize your browser to make the columns display inline
Product Supplier Dimensions Weight Price 
		<div class="header">
			<span>Products table - resize your browser to make the columns display inline</span>
			<button id="toggleSticky" style="height: 32px">Toggle Sticky Column Header</button>
		</div>
		<ui5-table class="demo-table" id="tblDisplayInline">
			<!-- Columns -->
			<ui5-table-column slot="columns" popin-display="Inline">
				<span>Product</span>
			</ui5-table-column>

			<ui5-table-column slot="columns" min-width="600" popin-text="Supplier" demand-popin popin-display="Inline">
				<span>Supplier</span>
			</ui5-table-column>

			<ui5-table-column slot="columns" min-width="800" popin-text="Dimensions" demand-popin class="table-header-text-alignment" popin-display="Inline">
				<span>Dimensions</span>
			</ui5-table-column>

			<ui5-table-column slot="columns" min-width="800" popin-text="Weight" demand-popin class="table-header-text-alignment" popin-display="Inline">
				<span>Weight</span>
			</ui5-table-column>

			<ui5-table-column slot="columns" class="table-header-text-alignment" popin-display="Inline">
				<span>Price</span>
			</ui5-table-column>
		</ui5-table>

		<style>
			ui5-table ui5-table-column.table-header-text-alignment::part(column) {
				text-align: end;
			}
		</style>

Table with No Data

Product Supplier Dimensions Weight Price 
<ui5-table class="demo-table" no-data-text="No Data">
	<ui5-table-column slot="columns">
		<span style="line-height: 1.4rem">Product</span>
	</ui5-table-column>

	<ui5-table-column slot="columns" min-width="800" popin-text="Supplier">
		<span style="line-height: 1.4rem">Supplier</span>
	</ui5-table-column>

	<ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin>
		<span style="line-height: 1.4rem">Dimensions</span>
	</ui5-table-column>

	<ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin>
		<span style="line-height: 1.4rem">Weight</span>
	</ui5-table-column>

	<ui5-table-column slot="columns">
		<span style="line-height: 1.4rem">Price</span>
	</ui5-table-column>
</ui5-table>

Growing Table with "More" button

Product Supplier
Dimensions
Weight Price 
<ui5-table id="tbl" growing="Button" growing-button-subtext="[4 / 12]"></ui5-table>

<script>
	tbl.addEventListener("load-more", function() {
		rowsToLoad.forEach(() => {
			tbl.appendChild(document.createElement('ui5-table-row'));
		});
	});
</script>

<style>
	ui5-table ui5-table-column.table-header-text-alignment::part(column) {
		text-align: end;
	}
</style>

Growing Table on Scroll

Product Supplier
Dimensions
Weight Price 
<ui5-table id="myTblGrowsOnScroll" growing="Scroll"></ui5-table>
<script>
	myTblGrowsOnScroll.addEventListener("load-more", function() {
		busyIndicator.active = true;

		rowsToLoad.forEach(() => {
			tbl.appendChild(document.createElement('ui5-table-row'));
		});

		setTimeout(() => {
			busyIndicator.active = false;
		}, 500);
	});
</script>

<style>
	ui5-table ui5-table-column.table-header-text-alignment::part(column) {
		text-align: end;
	}
</style>

Table with grouping (SingleSelect - click on item to set navigated)

The ui5-table-group-row allows visual grouping of the table rows.
City Supplier Country Country: Bulgaria Sofia Company 1 Bulgaria Plovdiv Company 2 Bulgaria Country: USA Denver Company 3 USA Boston Company 4 USA 
<ui5-table class="demo-table-single" mode="SingleSelect">
	<ui5-table-column id="column-1" slot="columns">
		<ui5-label>City</ui5-label>
	</ui5-table-column>
	<ui5-table-column id="column-2" slot="columns" min-width="500" popin-text="Supplier" demand-popin>
		<ui5-label>Supplier</ui5-label>
	</ui5-table-column>
	<ui5-table-column id="column-3" slot="columns" min-width="500">
		<ui5-label>Country</ui5-label>
	</ui5-table-column>

	<ui5-table-group-row>Country: Bulgaria</ui5-table-group-row>

	<ui5-table-row>
		<ui5-table-cell><span>Sofia</span></ui5-table-cell>
		<ui5-table-cell><span>Company 1</span></ui5-table-cell>
		<ui5-table-cell><span>Bulgaria</span></ui5-table-cell>
	</ui5-table-row>
	<ui5-table-row>
		<ui5-table-cell><span>Plovdiv</span></ui5-table-cell>
		<ui5-table-cell><span>Company 2</span></ui5-table-cell>
		<ui5-table-cell><span>Bulgaria</span></ui5-table-cell>
	</ui5-table-row>

	<ui5-table-group-row><span>Country: USA</span></ui5-table-group-row>

	<ui5-table-row>
		<ui5-table-cell><span>Denver</span></ui5-table-cell>
		<ui5-table-cell><span>Company 3</span></ui5-table-cell>
		<ui5-table-cell><span>USA</span></ui5-table-cell>
	</ui5-table-row>
	<ui5-table-row>
		<ui5-table-cell><span>Boston</span></ui5-table-cell>
		<ui5-table-cell><span>Company 4</span></ui5-table-cell>
		<ui5-table-cell><span>USA</span></ui5-table-cell>
	</ui5-table-row>
</ui5-table>

<script>
	document.getElementById("singleSelectTbl").addEventListener("ui5-selection-change", function(event) {
		if (event.detail.previouslySelectedRows.length) {
			event.detail.previouslySelectedRows[0].removeAttribute("navigated");
		}
		event.detail.selectedRows[0].setAttribute("navigated", '');
	});
</script>

Tables with grouping (MultiSelect)

City Supplier Country Country: Bulgaria Sofia Company 1 Bulgaria Plovdiv Company 2 Bulgaria Country: USA Denver Company 3 USA Boston Company 4 USA 
<ui5-table class="demo-table-multi" mode="MultiSelect">
	<ui5-table-column id="column-1" slot="columns">
		<ui5-label>City</ui5-label>
	</ui5-table-column>
	<ui5-table-column id="column-2" slot="columns" min-width="500" popin-text="Supplier" demand-popin>
		<ui5-label>Supplier</ui5-label>
	</ui5-table-column>
	<ui5-table-column id="column-3" slot="columns" min-width="500">
		<ui5-label>Country</ui5-label>
	</ui5-table-column>

	<ui5-table-group-row>Country: Bulgaria</ui5-table-group-row>

	<ui5-table-row>
		<ui5-table-cell><span>Sofia</span></ui5-table-cell>
		<ui5-table-cell><span>Company 1</span></ui5-table-cell>
		<ui5-table-cell><span>Bulgaria</span></ui5-table-cell>
	</ui5-table-row>
	<ui5-table-row>
		<ui5-table-cell><span>Plovdiv</span></ui5-table-cell>
		<ui5-table-cell><span>Company 2</span></ui5-table-cell>
		<ui5-table-cell><span>Bulgaria</span></ui5-table-cell>
	</ui5-table-row>

	<ui5-table-group-row><span>Country: USA</span></ui5-table-group-row>

	<ui5-table-row>
		<ui5-table-cell><span>Denver</span></ui5-table-cell>
		<ui5-table-cell><span>Company 3</span></ui5-table-cell>
		<ui5-table-cell><span>USA</span></ui5-table-cell>
	</ui5-table-row>
	<ui5-table-row>
		<ui5-table-cell><span>Boston</span></ui5-table-cell>
		<ui5-table-cell><span>Company 4</span></ui5-table-cell>
		<ui5-table-cell><span>USA</span></ui5-table-cell>
	</ui5-table-row>
</ui5-table>

Overview

The ui5-import type { table } from "./TableRow.js";/code> component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data.

To render the Table properly, the order of the columns should match with the order of the item cells in the rows.

Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.

Selection

To benefit from the selection mechanism of ui5-table component, you can use the available selection modes: SingleSelect and MultiSelect.
In additition to the used mode, you can also specify the ui5-table-row type choosing between Active or Inactive.

In SingleSelect mode, you can select both an Active and Inactive row via mouse or by pressing the Space or Enter keys.
In MultiSelect mode, you can select both an Active and Inactive row by pressing the Space key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header.

Note: Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.

Keyboard Handling

Fast Navigation

This component provides a build in fast navigation group which can be used via F6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up. In order to use this functionality, you need to import the following module: import "@ui5/webcomponents-base/dist/features/F6Navigation.js"

Furthermore, you can interact with ui5-table via the following keys.
  • [F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.
  • [CTRL]+[A] - Selects all items, if MultiSelect mode is enabled.
  • [HOME]/[END] - Focuses the first/last item.
  • [PAGEUP]/[PAGEDOWN] - Moves focus up/down by page size (20 items by default).
  • [ALT]+[DOWN]/[UP] - Switches focus between header, last focused item, and More button (if applies) in either direction.
  • [SHIFT]+[DOWN]/[UP] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).
  • [SHIFT]+[HOME]/[END] - Range selection to the first/last item of the List.
  • [CTRL]+[HOME]/[END] - Same behavior as HOME & END.

ES6 Module Import

import "@ui5/webcomponents/dist/Table.js";
import "@ui5/webcomponents/dist/TableColumn.js"; (for ui5-table-column)
import "@ui5/webcomponents/dist/TableRow.js"; (for ui5-table-row)
import "@ui5/webcomponents/dist/TableCell.js"; (for ui5-table-cell)

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
accessibleName
accessible-name
string
Defines the accessible ARIA name of the component.
since v1.3.0
accessibleNameRef
accessible-name-ref
string
""
Receives id(or many ids) of the elements that label the component.
since v1.3.0
busy
boolean
false
Defines if the table is in busy state. In this state the component's opacity is reduced and busy indicator is displayed at the bottom of the table.
since v1.0.0-rc.12
busyDelay
busy-delay
Integer
1000
Defines the delay in milliseconds, after which the busy indicator will show up for this component.
growing
TableGrowingMode
"None"
Defines whether the table will have growing capability either by pressing a More button, or via user scroll. In both cases load-more event is fired.

Available options:

Button - Shows a More button at the bottom of the table, pressing of which triggers the load-more event.
Scroll - The load-more event is triggered when the user scrolls to the bottom of the table;
None (default) - The growing is off.

Restrictions: growing="Scroll" is not supported for Internet Explorer, and the component will fallback to growing="Button".
since v1.0.0-rc.12
growingButtonSubtext
growing-button-subtext
string
""
Defines the subtext that will be displayed under the growingButtonText.

Note: This property takes effect if growing is set to Button.
since v1.0.0-rc.15
growingButtonText
growing-button-text
string
""
Defines the text that will be displayed inside the growing button at the bottom of the table, meant for loading more rows upon press.

Note: If not specified a built-in text will be displayed.
Note: This property takes effect if growing is set to Button.
since v1.0.0-rc.15
hideNoData
hide-no-data
boolean
false
Defines if the value of noDataText will be diplayed when there is no rows present in the table.
since v1.0.0-rc.15
mode
TableMode
"None"
Defines the mode of the component.

Available options are:
  • MultiSelect
  • SingleSelect
  • None
      • since v1.0.0-rc.15
noDataText
no-data-text
string
""
Defines the text that will be displayed when there is no data and hideNoData is not present.
stickyColumnHeader
sticky-column-header
boolean
false
Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport.

Restrictions:
  • Browsers that do not support this feature:
    • Internet Explorer
    • Microsoft Edge lower than version 41 (EdgeHTML 16)
    • Mozilla Firefox lower than version 59
  • Scrolling behavior:
    • If the Web Component is placed in layout containers that have the overflow: hidden or overflow: auto style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
columns
HTMLElement [0..n]
Defines the configuration for the columns of the component.

Note: Use ui5-table-column for the intended design.
default
HTMLElement [0..n]
Defines the component rows.

Note: Use ui5-table-row for the intended design.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
load-more
Fired when the user presses the More button or scrolls to the table's end.

Note: The event will be fired if growing is set to Button or Scroll.
since v1.0.0-rc.11
popin-change
Fired when ui5-table-column is shown as a pop-in instead of hiding it.
since v1.0.0-rc.6
poppedColumns
type: Array
description: popped-in columns.
row-click
Fired when a row in Active mode is clicked or Enter key is pressed.
row
type: HTMLElement
description: the activated row.
selection-change
Fired when selection is changed by user interaction in SingleSelect and MultiSelect modes.
since v1.0.0-rc.15
selectedRows
type: Array
description: An array of the selected rows.
previouslySelectedRows
type: Array
description: An array of the previously selected rows.

TableColumn

Overview

The ui5-table-column component allows to define column specific properties that are applied when rendering the ui5-table component.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-table-column exposes the following CSS Shadow Parts:
  • column - Used to style the native th element

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
demandPopin
demand-popin
boolean
false
According to your minWidth settings, the component can be hidden in different screen sizes.

Setting this property to true, shows this column as pop-in instead of hiding it.
minWidth
min-width
sap.ui.webc.base.types.Integer
Infinity
Defines the minimum table width required to display this column. By default it is always displayed.

The responsive behavior of the ui5-table is determined by this property. As an example, by setting minWidth property to 400 sets the minimum width to 400 pixels, and shows this column on tablet (and desktop) but hides it on mobile.
For further responsive design options, see demandPopin property.
popinDisplay
popin-display
TableColumnPopinDisplay
"Block"
Defines how the popin row is displayed.

The available values are:
  • Block
  • Inline
popinText
popin-text
string
""
The text for the column when it pops in.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the content of the column header.

TableRow

Overview

The ui5-table-row component represents a row in the ui5-table.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-table-row exposes the following CSS Shadow Parts:
  • row - Used to style the native tr element
  • popin-row - Used to style the tr element when a row pops in

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
navigated
boolean
false
Indicates if the table row is navigated.
since v1.9.0
selected
boolean
false
Defines the row's selected state.
since v1.0.0-rc.15
type
sap.ui.webc.main.types.TableRowType
"Inactive"
Defines the visual indication and behavior of the component.

Available options are:
  • Active
  • Inactive


Note: When set to Active, the item will provide visual response upon press, while with type Inactive - will not.
since v1.0.0-rc.15

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
sap.ui.webc.main.ITableCell [0..n]
Defines the cells of the component.

Note: Use ui5-table-cell for the intended design.

TableGroupRow

Overview

The ui5-table-group-row component represents a group row in the ui5-table.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-table-group-row exposes the following CSS Shadow Parts:
  • group-row - Used to style the native tr element.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the text of the component.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.

TableCell

Overview

The ui5-table-cell component defines the structure of the data in a single ui5-table cell.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-table-cell exposes the following CSS Shadow Parts:
  • cell - Used to style the native td element

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Specifies the content of the component.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel