Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
​
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
​
<title>Table - sap.ui.table</title>
<link rel="shortcut icon" type="image/x-icon" href="images/controls/sap.ui.table.Table.gif">
​
<!-- ********************************************************************** -->
<!-- SAPUI5 Bootstrap:                                                     -->
<!-- Extend the "libs" property if you like to import additional libraries  -->
<!-- ********************************************************************** -->
<script id="sap-ui-bootstrap" 
    type="text/javascript"
    data-sap-ui-libs="sap.ui.commons,sap.ui.table"
    data-sap-ui-theme="sap_goldreflection"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
​
<script type="text/javascript"> 
    
    // TABLE TEST DATA
    var aData = [
        {lastName: "Dente", firstName: "Al"},
        {lastName: "Friese", firstName: "Andy"},
        {lastName: "Mann", firstName: "Anita"},
        {lastName: "Schutt", firstName: "Doris"},
        {lastName: "Open", firstName: "Doris"},
        {lastName: "Dewit", firstName: "Kenya"},
        {lastName: "Zar", firstName: "Lou"},
        {lastName: "Burr", firstName: "Tim"},
        {lastName: "Hughes", firstName: "Tish"},
        {lastName: "Lester", firstName: "Mo"},
        {lastName: "Case", firstName: "Justin"},
        {lastName: "Time", firstName: "Justin"},
        {lastName: "Barr", firstName: "Gaye"},
        {lastName: "Poole", firstName: "Gene"},
        {lastName: "Ander", firstName: "Corey"},
        {lastName: "Early", firstName: "Brighton"},
        {lastName: "Noring", firstName: "Constance"},
        {lastName: "Haas", firstName: "Jack"},
        {lastName: "Tress", firstName: "Matt"},
        {lastName: "Turner", firstName: "Paige"}
    ];
​
    var oTable = new sap.ui.table.Table("table", {
        visibleRowCount: 5
    });
    
    var oControl = new sap.ui.commons.TextView().bindProperty("text", "lastName");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Last Name"}), template: oControl, sortProperty: "lastName",filterProperty: "lastName" }));
    oControl = new sap.ui.commons.TextField().bindProperty("value", "firstName");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "First Name"}), template: oControl, sortProperty: "firstName"}));
    
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({modelData: aData});
    oTable.setModel(oModel);
    oTable.bindRows("/modelData");
    
    oTable.placeAt("content");
​
​
  
​
    
    
</script>
</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
    <p>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
CmImpro
0viewers