<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<!-- Make sure to bootstrap from a specific UI5 version. DO NOT rely on the latest CDN release. The below `src` is for testing and demos only. -->
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
data-sap-ui-xx-componentpreload="off"
></script>
</head>
<body id="content" class="sapUiBody">
<div style="height: 100%;"
data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{ "id": "rootComponent" }'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent, Device) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json",
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
},
init () {
UIComponent.prototype.init.apply(this, arguments);
this.getModel("myTable").setProperty("/visibleRowCount", 5);
this.setDensity().getRouter().initialize();
},
setDensity ({
styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
targetElement = document.body,
} = {}) {
targetElement.classList.add(styleClass);
return this;
},
});
});
[
{
"hello": "Hello1",
"world": "World1",
"status": "Success"
},
{
"hello": "Hello2",
"world": "World2",
"status": "Warning"
},
{
"hello": "Hello3",
"world": "World3",
"status": "Error"
},
{
"hello": "Hello4",
"world": "World4",
"status": "Information"
},
{
"hello": "Hello5",
"world": "World5",
"status": "None"
},
{
"hello": "Hello6",
"world": "World6",
"status": "None"
},
{
"hello": "Hello7",
"world": "World7",
"status": "None"
},
{
"hello": "Hello8",
"world": "World8",
"status": "None"
},
{
"hello": "Hello9",
"world": "World9",
"status": "None"
},
{
"hello": "Hello10",
"world": "World10",
"status": "None"
},
{
"hello": "Hello11",
"world": "World11",
"status": "None"
},
{
"hello": "Hello12",
"world": "World12",
"status": "None"
},
{
"hello": "Hello13",
"world": "World13",
"status": "None"
},
{
"hello": "Hello14",
"world": "World14",
"status": "None"
},
{
"hello": "Hello15",
"world": "World15",
"status": "None"
},
{
"hello": "Hello16",
"world": "World16",
"status": "None"
},
{
"hello": "Hello17",
"world": "World17",
"status": "None"
},
{
"hello": "Hello18",
"world": "World18",
"status": "None"
},
{
"hello": "Hello19",
"world": "World19",
"status": "None"
},
{
"hello": "Hello20",
"world": "World20",
"status": "None"
},
{
"hello": "Hello21",
"world": "World21",
"status": "None"
},
{
"hello": "Hello22",
"world": "World22",
"status": "None"
},
{
"hello": "Hello23",
"world": "World23",
"status": "None"
},
{
"hello": "Hello24",
"world": "World24",
"status": "None"
},
{
"hello": "Hello25",
"world": "World25",
"status": "None"
},
{
"hello": "Hello26",
"world": "World26",
"status": "None"
},
{
"hello": "Hello27",
"world": "World27",
"status": "None"
},
{
"hello": "Hello28",
"world": "World28",
"status": "None"
},
{
"hello": "Hello29",
"world": "World29",
"status": "None"
},
{
"hello": "Hello30 0000",
"world": "World30 0000",
"status": "None"
}
]
{
"_version": "1.33.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "App Title",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"products": {
"uri": "localData/products.json",
"type": "JSON"
}
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.81.2",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.table": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"myProducts": {
"dataSource": "products",
"preload": true
},
"myTable": {
"type": "sap.ui.model.json.JSONModel"
}
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"async": true
},
"routing": {
"routes": {
"table": {
"pattern": "",
"target": "table"
}
},
"targets": {
"table": {
"id": "homeView",
"name": "Table",
"viewLevel": 1
},
"notFound": {
"id": "notFoundView",
"name": "Table",
"transition": "slide",
"viewLevel": 98
}
},
"config": {
"async": true,
"type": "View",
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"path": "demo.view",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"homeRoute": "table"
}
}
}
}
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true">
<App id="rootApp" />
</mvc:View>
<mvc:View
xmlns="sap.ui.table"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m"
controllerName="demo.controller.Table">
<m:Page
showHeader="false"
enableScrolling="true"
class="sapUiContentPadding">
<m:content>
<Table id="myTable"
class="sapUiSizeCondensed"
rows="{myProducts>/}"
selectionMode="MultiToggle"
selectionBehavior="Row"
rowsUpdated=".onRowsUpdated"
visibleRowCount="{myTable>/visibleRowCount}">
<extension>
<m:OverflowToolbar class="sapMTBHeader-CTX">
<m:Title level="H2" titleStyle="H2" text="Products"/>
<m:ToolbarSpacer />
<m:Label text="Visible rows:" labelFor="myStepInput"/>
<m:StepInput id="myStepInput"
textAlign="Center"
width="120px"
min="2"
max="{= ${myProducts>/}.length }"
value="{myTable>/visibleRowCount}"
step="5"
change="onStepChange"
/>
</m:OverflowToolbar>
</extension>
<columns>
<Column autoResizable="true">
<m:Text text="Hello" />
<template>
<m:Text
text="{myProducts>hello}"
wrapping="false"
/>
</template>
</Column>
<Column autoResizable="true">
<m:Text text="World" />
<template>
<m:Text
text="{myProducts>world}"
wrapping="false"
/>
</template>
</Column>
</columns>
<footer>
<m:OverflowToolbar style="Clear">
<m:ToolbarSpacer/>
<m:Button
type="Transparent"
text="Revert Column Widths"
press=".onRevertColumnWidthsBtnPress"
/>
<m:Button
type="Emphasized"
text="Auto Resize Columns"
press=".onAutoResizeColumnsBtnPress"
/>
</m:OverflowToolbar>
</footer>
</Table>
</m:content>
</m:Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
], function(Controller) {
"use strict";
return Controller.extend("demo.controller.Table", {
onRevertColumnWidthsBtnPress: function() {
this.byId("myTable").getColumns().map(col => col.setWidth("auto"));
},
onAutoResizeColumnsBtnPress: function() {
this.autoResizeColumns();
}, // Consider updating widths onRowsUpdated (i.e. on scroll)
// Alternative to onAutoResizeColumnsBtnPress
onRowsUpdated: function() {
// this.autoResizeColumns();
},
autoResizeColumns: function() {
const table = this.byId("myTable");
table.getColumns().map((col, index) => table.autoResizeColumn(index));
},
});
});