Estoy usando SAPUI5 sap.ui.table.TreeTable ( demo ) y me gustaría cambiar la sangría del icono de flecha y el color de fondo de la fila de la tabla para cada nivel del árbol.

Lo que estoy tratando de lograr: cada nivel de árbol expandido debe tener un tono de gris diferente y la sangría de (nivel * 5px). Por el momento, la sangría aumenta en 17px.

Me gustaría saber cómo lograrlo a través de CSS y a través de la extensión de control UI5.

Sé que para una fila de tabla genérica podría usar

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

Pero, ¿cómo hacer que sea dinámico que cada sangría de nivel aumente en (nivel * 5) píxeles?

También me gustaría lograr lo mismo al extender el control de la interfaz de usuario, pero no puedo encontrar en la biblioteca el lugar exacto que genera la sangría (nivel * 17px).

Eché un vistazo al archivo de biblioteca sap.ui.table.TableRenderer-dbg.js y puedo ver que la fila de iconos se genera mediante la siguiente función:

 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); };

Pero no puedo ver dónde se genera el margen izquierdo, no parece estar en ninguna de las clases de CSS mencionadas anteriormente. ¿Alguna idea de dónde viene?