TreeTable

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>Selection Screen Table Sample</title>
  <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
  <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.unified,sap.ui.table" data-sap-ui-xx-bindingSyntax="complex"></script>

  <!-- 2.) Create a UI5 button and place it onto the page -->
  <script>
    //Define some sample data 
    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
        }

      }
    };

    for (var i = 0; i < 20; i++) {
      oData["root"][2][i] = {
        name: "subitem3-" + i,
        description: "subitem3-" + i + " description",
        checked: false
      };
    }

    //Create an instance of the table control
    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,
      toggleOpenState: function(oEvent) {
        var iRowIndex = oEvent.getParameter("rowIndex");
        var oRowContext = oEvent.getParameter("rowContext");
        var bExpanded = oEvent.getParameter("expanded");
        alert("rowIndex: " + iRowIndex +
          " - rowContext: " + oRowContext.getPath() +
          " - expanded? " + bExpanded);
      }
    });

    //Create a model and bind the table rows to this model
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData(oData);
    oTable.setModel(oModel);
    oTable.bindRows("/root");

    //Bring the table onto the UI 
    oTable.placeAt("uiArea");
  </script>
</head>

<body class="sapUiBody">

  <!-- This is where you place the UI5 button -->
  <div id="uiArea"></div>
</body>

</html>

// Code goes here

/* Styles go here */