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" style="width: 12rem">
		<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>
		

Table with No Data

Product Supplier Dimensions Weight Price
<ui5-table class="demo-table" no-data-text="No Data" show-no-data>
	<ui5-table-column slot="columns" style="width: 12rem">
		<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>
	

Overview

The ui5-table 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.

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
noDataText
no-data-text
string
""
Defines the text that will be displayed when there is no data and showNoData is present.
showNoData
show-no-data
boolean
false
Defines if the value of noDataText will be diplayed when there is no rows present in the table.
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.

Limitations:
  • 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 ui5-table.

Note: Use ui5-table-column for the intended design.
default
HTMLElement [0..n]
Defines the ui5-table 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
popin-change
Fired when the 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 is clicked.
row
type: HTMLElement
description: the clicked row.

TableColumn

Overview

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

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 ui5-table-column 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
number
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 40em shows this column on tablet (and desktop) but hides it on mobile.
For further responsive design options, see demandPopin property.
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.

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
HTMLElement [0..n]
Defines the cells of the ui5-table-row.

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

TableCell

Overview

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

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 ui5-table-cell.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel