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">
        <meta charset="utf-8">
        
        <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m,sap.ui.table" 
            data-sap-ui-theme="sap_belize"></script>
        
        <script>
                  var oData = {
            root: {
                name: "root",
                description: "root description",
                checked: false,
                0: {
                    name: "item1",
                    description: "item1 description",
                    checked: true,
                    0: {
                        name: "subitem1-1",
                        description: "subitem1-1 description",
                        checked: true,
                        0: {
                            name: "subsubitem1-1-1",
                            description: "subsubitem1-1-1 description",
                            checked: true
                        },
                        1: {
                            name: "subsubitem1-1-2",
                            description: "subsubitem1-1-2 description",
                            checked: true
                        }
                    },
                    1: {
                        name: "subitem1-2",
                        description: "subitem1-2 description",
                        checked: true,
                        0: {
                            name: "subsubitem1-2-1",
                            description: "subsubitem1-2-1 description",
                            checked: true
                        }
                    }
​
                },
                1: {
                    name: "item2",
                    description: "item2 description",
                    checked: true,
                    0: {
                        name: "subitem2-1",
                        description: "subitem2-1 description",
                        checked: true
                    }
                },
                2: {
                    name: "item3",
                    description: "item3 description",
                    checked: true
                }
​
            }
        };
        var sDummyStartupParameter = 'item1';
​
        var oTable = new sap.ui.table.TreeTable({
            columns: [
                new sap.ui.table.Column({ label: "Name", template: "name" }),
                new sap.ui.table.Column({ label: "Description", template: "description" })
            ],
            selectionMode: sap.ui.table.SelectionMode.Single,
            enableColumnReordering: true,
            expandFirstLevel: true,
        });
​
        var afilters = [
            new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.Contains, sDummyStartupParameter)
        ];
​
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(oData);
        oTable.setModel(oModel);
        oTable.bindRows({ path: "/root", filters: afilters });
        oTable.placeAt('content');
            
        </script>
        
    </head>
    <body id="content" class="sapUiBody">
    </body>
</html>
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers