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
  • …
 
<html>
  
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
​
    <title>OData Date Table Multiple Sorters</title>
    <link rel="stylesheet" type="text/css" href="">
​
    <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection">
    </script>
    <script>
    var aColumnData = [{
        columnId: "col1"
    }, {
        columnId: "col2"
    }, {
        columnId: "col3"
    }, {
        columnId: "col4"
    }, {
        columnId: "col5"
    }];
​
​
    var aData = [{
        col1: "Row 1 col 1",
        col2: "Row 1 col 2",
        col3: "Row 1 col 3",
        col4: "Row 1 col 4",
        col5: "Row 1 col 5"
    }, {
        col1: "Row 2 col 1",
        col2: "Row 2 col 2",
        col3: "Row 2 col 3",
        col4: "Row 2 col 4",
        col5: "Row 2 col 5"
    }];
    var oModel = new sap.ui.model.json.JSONModel();
​
    oModel.setData({
        columns: aColumnData,
        rows: aData
    });
​
    var oTable = new sap.ui.table.Table({
        title: "Table column and data binding",
        showNoData : true,  
        columnHeaderHeight : 10,
        visibleRowCount: 7
    });
    oTable.setModel(oModel);
    oTable.bindColumns("/columns", function(index, context) {
         var sColumnId = context.getObject().columnId;
        return new sap.ui.table.Column({
            id : sColumnId,
            label: sColumnId, 
            template: sColumnId, 
            sortProperty: sColumnId, 
            filterProperty: sColumnId
        });
    });
    oTable.bindRows("/rows");
    oTable.placeAt("content");
    </script>
​
</head>
​
<body class="sapUiBody" id="body" role="application">
    <div id="content"></div>
</body>
​
</html>
​
Output

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

Dismiss x
public
Bin info
jasper07pro
0viewers