I am using SAPUI5 sap.ui.table.TreeTable (demo) and would like to change the arrow icon indent and table row background colour for each level of the tree.

What I am trying to achieve - each expanded tree level should have a different shade of grey and the indent of (level * 5px). At the moment the indent increases by 17px.

I would like to know how to achieve it through CSS and through UI5 control extension.

I know that for one a generic table row I could use

tr>td>div>span.sapUiTableTreeIcon {
margin-left:5px !important;
background-color: #F8F8F8;
}

But how to make it dynamic that each level indent will increase by (level * 5) pixels?

Also I would like to achieve the same by extending the UI control, but can't find in the library the exact place that generates the (level * 17px ) indent.

I had a look at the library file sap.ui.table.TableRenderer-dbg.js and I can see that the icon row gets generated by the following function:

TableRenderer.renderTableCellControl = function(rm, oTable, oCell, bIsFirstColumn) {
        if (bIsFirstColumn && TableUtils.Grouping.isInTreeMode(oTable)) {
            var oRow = oCell.getParent();
            rm.openStart("span", oRow.getId() + "-treeicon");
            rm.class("sapUiTableTreeIcon");
            rm.attr("tabindex", "-1");
            oTable._getAccRenderExtension().writeAriaAttributesFor(rm, oTable, "TREEICON", {row: oRow});
            rm.openEnd();
            rm.close("span");
        }
        rm.renderControl(oCell);
    };

But I can't see where the margin-left get's generated, it doesn't seem to be in any of the CSS classes mentioned above. Any idea where it comes from?