Skip to content

Instantly share code, notes, and snippets.

@dennisseah

dennisseah/gist:c7b8ce929392c4549e06

Created August 23, 2014 18:03
Show Gist options
  • Save dennisseah/c7b8ce929392c4549e06 to your computer and use it in GitHub Desktop.
Save dennisseah/c7b8ce929392c4549e06 to your computer and use it in GitHub Desktop.
Download ZIP
SAPUI5: alternate colors for rows in sap.ui.table.Table
Raw
gistfile1.js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
data-sap-ui-libs="sap.ui.table,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
<style>
.alternate-color .sapUiTableRowEven {
background-color: #0c0;
}
.alternate-color .sapUiTableRowEven:hover td {
background-color: #0f0 !important;
}
.alternate-color .sapUiTableRowOdd {
background-color: #00c;
}
.alternate-color .sapUiTableRowOdd input {
color: #fff;
}
.alternate-color .sapUiTableRowOdd:hover td {
background-color: #00f !important;
}
.alternate-color .sapUiTableRowOdd:hover input {
color: #fff;
}
</style>
<script>
jQuery(function() {
var oTable = new sap.ui.table.Table({
width: '300px',
selectionMode: sap.ui.table.SelectionMode.None
}).addStyleClass('alternate-color');
oTable.addColumn(new sap.ui.table.Column({
label: 'Column1',
template: new sap.ui.commons.TextField({
value: '{col1}'
})
}));
oTable.addColumn(new sap.ui.table.Column({
label: 'Column2',
template: new sap.ui.commons.TextField({
value: '{col2}'
})
}));
oTable.bindRows('/');
var model = new sap.ui.model.json.JSONModel();
model.setData([
{col1: 1, col2: 'Ann'},
{col1: 2, col2: 'John'},
{col1: 3, col2: 'Mary'},
{col1: 4, col2: 'Michael'}
]);
oTable.setModel(model);
oTable.placeAt('content');
})
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment