CODEWITHSUNDEEP
javascriptsapui5
Pooja Madiwal
Pooja Madiwal

Reputation: 45

How can we adjust the height of row in sap.m.table?

I am creating a table using sap.m.Table in controller. How can I adjust my row size of the table?

I am using sap.m.ColumnListItem to add each row, but there is no option provided by table or ColumnListItem to adjust the height of the row

onDataGotFromServer : function(data){
    var table = new sap.m.Table({
        showSeparators: "None"
    });
    var column1 = new sap.m.Column();
    var column2 = new sap.m.Column();
    table.addColumn(column1);
    table.addColumn(column2);
    for( var i=0; i < data.length; i++ ) {
        var eachData = data[i];
        var columnListItem = new sap.m.ColumnListItem({
            cells:[
                new sap.m.Text({
                    text: eachData.key
                }),
                new sap.m.Text({
                    text: eachData.value
                })
            ]
        });
        table.addItem(columnListItem);
    }
    this._layout.addContent(table);         
}

Here is the code for demo : https://plnkr.co/edit/sKYK9R5a5fFJdJ8D68GF?p=preview

Upvotes: 2

Views: 4811

Answers (2)

Nandan Chaturvedi
Nandan Chaturvedi

Reputation: 1098

Here is another quick way to work this out:

You can use HBox or VBox to put your Texts and then apply height on the HBox. Following is an example as per your plunker.

var columnListItem = new sap.m.ColumnListItem({
  cells: [

    new sap.m.HBox({
      height: "60px",
      items: [
        new sap.m.Text({
          text: "Test1"
        })
      ]
    }),
    new sap.m.HBox({
      items: [
        new sap.m.Text({
          text: "Test2"
        })
      ]
    })
  ]
});

Let me know if this helps!

Upvotes: 1

O.O
O.O

Reputation: 1419

There is no property provided for width setting according to the API Reference for sap.m.ColumnListItem.

But you can use css with unique IDs for the columnListItems to control individual cells. 

sap.ui.define([
  "sap/m/Text", "sap/m/Column", "sap/m/ColumnListItem", "sap/m/Table"

], function(Text, Column, ColumnListItem, Table) {
  "use strict";

  var table = new Table({
    width: "50%",
    showSeparators: "None"
  }).placeAt("content");

  var column1 = new Column();
  var column2 = new Column();
  table.addColumn(column1);
  table.addColumn(column2);

  for (var i = 0; i < 10; i++) {

    var columnListItem = new ColumnListItem("cols" + i, {
      vAlign: "Middle",
      cells: [
        new Text({
          text: "Test1",
          width: "3rem"

        }),
        new Text({
          text: "Test2",
          width: "3rem"
        })
      ]
    });
    table.addItem(columnListItem);
  }
});
/* Styles go here */

.sapMListTbl {
  width: 70% !important
}

.sapMListTblRow {
  height: 2rem !important;
}

.sapMListTblCell {
  text-align: center !important;
}

#cols0 { /* Row 1 */
  text-align: left !important;
  background: aqua;
  height: 5rem !important;
}

#cols1_cell1 { /* Row 2, cell2 */
   background: yellow;
}
<title>SAPUI5 Walkthrough</title>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-async="true" data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'>
</script>

<body class="sapUiBody" id="content">
</body>

Hope it helps.

Upvotes: 0

Related Questions