Skip to Content

sap.m.table css grid


How can I draw cell border in sap.m.table using CSS?

Does the values of the column can combine into 1 value if they are having the same value?



12.png (50.8 kB)
Add comment
10|10000 characters needed characters exceeded

  • [Updated] I'm able to remove the grey line between the rows and use Merge properties to merge in the table but still not manage to loop the objects and draw the border for the columns that having same value. Anyone have such experience?

    I added below properties in the CSS file to remove the row separator. Does this approach is a best practice of doing this?

    .sapMLIBShowSeparator>td { border-top: 0px solid #ff0000; }

    23.png (34.5 kB)
  • Get RSS Feed

1 Answer

  • Best Answer
    Dec 13, 2017 at 09:01 AM


    This is not going to be pretty.

    You can work on the CSS side but you'll have a lot of issues if you'd need to set the design dynamically.

    I'm attaching a code snippet that registers an event in the "onInit" named "updateFinished" that is handled later in the function "onUpdateFinished".

    In it, I randomly took the second item (you can put your own logic on deciding which one to style its border) and via the DOM reference I changed it's style to have borders (see var domRef).

    There are many issues with this example, especially if your app is in some supper app, but you would have to deal with that.

    The code I manipulated is based on the Fiori work-list app.

    The relevant code in Worklist.controller.js:

    		onInit: function() {
    			var oViewModel,
    				oTable = this.byId("table");
    			// Put down worklist table's original value for busy indicator delay,
    			// so it can be restored later on. Busy handling on the table is
    			// taken care of by the table itself.
    			iOriginalBusyDelay = oTable.getBusyIndicatorDelay();
    			// keeps the search state
    			this._aTableSearchState = [];
    			// Model used to manipulate control states
    			oViewModel = new JSONModel({
    				worklistTableTitle: this.getResourceBundle().getText("worklistTableTitle"),
    				saveAsTileTitle: this.getResourceBundle().getText("saveAsTileTitle", this.getResourceBundle().getText("worklistViewTitle")),
    				shareOnJamTitle: this.getResourceBundle().getText("worklistTitle"),
    				shareSendEmailSubject: this.getResourceBundle().getText("shareSendEmailWorklistSubject"),
    				shareSendEmailMessage: this.getResourceBundle().getText("shareSendEmailWorklistMessage", [location.href]),
    				tableNoDataText: this.getResourceBundle().getText("tableNoDataText"),
    				tableBusyDelay: 0
    			this.setModel(oViewModel, "worklistView");
    			// Make sure, busy indication is showing immediately so there is no
    			// break after the busy indication for loading the view's meta data is
    			// ended (see promise 'oWhenMetadataIsLoaded' in AppController)
    			oTable.attachEventOnce("updateFinished", function() {
    				// Restore original busy indicator delay for worklist's table
    				oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
    		/* =========================================================== */
    		/* event handlers                                              */
    		/* =========================================================== */
    		 * Triggered by the table's 'updateFinished' event: after new table
    		 * data is available, this handler method updates the table counter.
    		 * This should only happen if the update was successful, which is
    		 * why this handler is attached to 'updateFinished' and not to the
    		 * table's list binding's 'dataReceived' method.
    		 * @param {sap.ui.base.Event} oEvent the update finished event
    		 * @public
    		onUpdateFinished: function(oEvent) {
    			// update the worklist's object counter after the table update
    			var sTitle,
    				oTable = oEvent.getSource(),
    				iTotalItems = oEvent.getParameter("total"),
    			        domRef = oTable.getItemsContainerDomRef();
    //Set some random item's border domRef.children[1].children[1].style = "border-top: 2px solid black !important;" + "border-bottom: 1px solid black !important; border-left: 2px solid black !important; border-right: 2px solid black !important"; // only update the counter if the length is final and // the table is not empty if (iTotalItems && oTable.getBinding("items").isLengthFinal()) { sTitle = this.getResourceBundle().getText("worklistTableTitleCount", [iTotalItems]); } else { sTitle = this.getResourceBundle().getText("worklistTableTitle"); } this.getModel("worklistView").setProperty("/worklistTableTitle", sTitle); },
    Add comment
    10|10000 characters needed characters exceeded

    • Hi,

      I'm happy you are seeing progress in your project.

      as for your questions:

      1. Your data is just another string that needs to be added to the HTML content string. You can even do this in the background and pass the whole string as your data to be placed as the HTML string. Build your styling logic to fit your needs - based on the data.
      2. Yes. But this is beyond this scope. You'll need to dig into the API and Google (start here).