<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<title>Demo</title>
<script defer id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-on-init="onUI5Init"
data-sap-ui-resource-roots='{"demo": "./"}'
data-sap-ui-compat-version="edge"
data-sap-ui-exclude-jquery-compat="true"
data-sap-ui-xx-wait-for-theme="init"
></script>
<script>
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
viewName: "demo.view.App",
height: "100%",
models: new JSONModel(sap.ui.require.toUrl("demo/data.json")),
}).then(view => view.placeAt("content")));
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
sap.ui.define([
"sap/m/Table",
"sap/m/TableRenderer",
], function(Table, TableRenderer) {
"use strict";
return Table.extend("demo.control.MyResponsiveTable", {
renderer: TableRenderer,
metadata: {
properties: {
showSelectAll: {
type: "boolean",
bindable: true,
},
},
},
setShowSelectAll: function(bValue) {
this.bPreventMassSelection = !bValue;
this.setProperty("showSelectAll", bValue); // register and trigger invalidate
return this; // to allow method chaining
},
});
});
{
"showSelectAll": true,
"myCollection": [
{
"key": 1,
"text1": "Text 1",
"text2": "Text 2"
},
{
"key": 2,
"text1": "Text 1",
"text2": "Text 2"
},
{
"key": 3,
"text1": "Text 1",
"text2": "Text 2"
}
]
}
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:core="sap.ui.core"
displayBlock="true"
height="100%"
>
<App autoFocus="false">
<Page
title=""Select All"-CheckBox in Tables"
class="sapUiResponsiveContentPadding"
>
<headerContent>
<Switch state="{/showSelectAll}" />
</headerContent>
<core:Fragment fragmentName="demo.view.fragment.ResponsiveTable" type="XML" />
<core:Fragment fragmentName="demo.view.fragment.GridTable" type="XML" />
</Page>
</App>
</mvc:View>
<columnmenu:Menu id="myMenu" xmlns:columnmenu="sap.m.table.columnmenu">
<columnmenu:items>
<columnmenu:Item icon="sap-icon://sap-ui5" label="My Item" />
<!-- ... -->
</columnmenu:items>
<columnmenu:quickActions>
<!-- ... -->
</columnmenu:quickActions>
</columnmenu:Menu>
<table:Table xmlns:table="sap.ui.table"
xmlns="sap.m"
xmlns:core="sap.ui.core"
selectionMode="MultiToggle"
enableSelectAll="{/showSelectAll}"
class="sapUiSmallMarginTop"
rows="{
path: '/myCollection',
key: 'key'
}"
>
<table:extension>
<Toolbar class="sapMTBHeader-CTX">
<Title text="sap.ui.table.Table using "enableSelectAll"" />
</Toolbar>
</table:extension>
<table:Column label="Column 1" template="text1" headerMenu="myMenu">
<table:dependents>
<core:Fragment fragmentName="demo.view.fragment.ColumnMenu" type="XML" />
</table:dependents>
</table:Column>
<table:Column label="Column 2" template="text2" />
</table:Table>
<demo:MyResponsiveTable xmlns:demo="demo.control"
xmlns="sap.m"
xmlns:core="sap.ui.core"
headerText="Extended sap.m.Table"
showSelectAll="{/showSelectAll}"
mode="MultiSelect"
growing="true"
items="{
path: '/myCollection',
key: 'key'
}"
>
<demo:columns>
<Column headerMenu="responsive--myMenu">
<Text text="Column 1" />
<dependents>
<core:Fragment id="responsive"
fragmentName="demo.view.fragment.ColumnMenu"
type="XML"
/>
</dependents>
</Column>
<Column>
<Text text="Column 2" />
</Column>
</demo:columns>
<ColumnListItem>
<Text text="{text1}" />
<Text text="{text2}" />
</ColumnListItem>
</demo:MyResponsiveTable>