Alternierende Zeilenfarben für die UI5 Tree Table

Eine Tree Table ist eine hierarchische Anordnung von Daten, die in Zeilen und Spalten organisiert und zu Knoten gruppiert sind. alternateRowColors ist ein Attribut der UI5 Table, das alternierende Zeilenfarben ermöglicht.

Leider unterstützt die Tree Table diese Eigenschaft nicht, was der folgende Screenshot aus der API-Dokumentation klar zeigt.

Die Eigenschaft alternateRowColors einer Tabelle lässt sich nutzen, um Zeilen voneinander zu unterscheiden und Daten mit einer besseren Benutzeroberfläche auszuwerten. In der Tree Table gilt ein hierarchischer Datensatz als ein Abschnitt, der sich aus zahlreichen Zeilen zusammensetzt und daher eine variable Höhe hat.

Die folgende Abbildung zeigt eine Tree Table mit vier Zeilen.

Klappt man die erste Baumzelle auf, wird die hierarchische Struktur sichtbar. Der unten hervorgehobene Bereich (dessen Höhe variieren kann) lässt sich als ein vollständiger Abschnitt (eine Zeile) betrachten.

Während sap.m.Table und sap.ui.table.Table die Eigenschaft altRowColors sinnvoll nutzen, unterstützt die TreeTable sie aufgrund ihrer variablen Zeilenhöhe nicht.

Hier ist ein kleines Experiment, das ich für dieses Szenario durchgeführt habe.

Mein erster Gedanke beim Angehen dieses Problems war, die Zeilen zu unterscheiden. Ich habe an mehreren Stellen gesucht, um herauszufinden, wie sich mehrere zusammengefasste Zeilen als eine einzige Zeile behandeln lassen. Dabei ist mir im DOM-Baum eine Eigenschaft namens "aria-level" aufgefallen. Nur sie konnte ich als Unterscheidungsmerkmal ausmachen. Damit wusste ich, wo ich ansetzen musste.

Ich habe eigenes CSS auf Basis von "aria-level" geschrieben und auf die Tabelle angewendet, und es hat funktioniert!

/**
* gets the table and applies background colors to the rows
*/
applyBgColorsToTableRows() {
const body = document.getElementsByTagName('body')[0];
const table = body.getElementsByTagName('table')[1];
const tableBody = table.getElementsByTagName('tbody')[0];
const rows = tableBody.getElementsByTagName('tr');
const tableLength = rows.length;
let rowNumber = 0;

for (let i = 0; i < tableLength; i += 1) {
  if (rows[i + 1]?.ariaLevel === '1') {
    rows[i].setAttribute('rowNumber', rowNumber);
    this.setClassToTableRows(rowNumber % 2 === 0, rows[i]);
    rowNumber += 1;
	  } else {
	    rows[i].setAttribute('rowNumber', rowNumber);
	    this.setClassToTableRows(rowNumber % 2 === 0, rows[i]);
	  }
	}
},

/**
* sets css custom class to table row
*/
setClassToTableRows(isRowEven, row) {
if (isRowEven) {
  row.classList.remove('evenRow', 'oddRow');
  row.classList.add('evenRow');
	} else {
	  row.classList.remove('evenRow', 'oddRow');
	  row.classList.add('oddRow');
	}
},

Damit trat allerdings das eigentliche Problem zutage. Meine Lösung war instabil, weil sich "aria-level" jedes Mal ändert, wenn eines der genannten oder eines von zahlreichen weiteren Events rund um die Tabellenansicht ausgelöst wird. Dazu zählen jede Änderung in einer Zeile, jedes Scrollen und jede Änderung der Auflösung.

In meinem ersten Versuch habe ich das Event "mousemove" verwendet. Das CSS wird dann bei jeder Mausbewegung angewendet, egal ob wir die Seite scrollen, Zeilen hinzufügen oder entfernen oder eine andere denkbare Bewegung ausführen. Das hat größtenteils wie beabsichtigt funktioniert, hatte aber einige Schwachstellen, etwa dass die Navigation per Tastatur nicht funktionierte, was offensichtlich ziemlich unsinnig und sicher nicht der richtige Weg ist.

Danach habe ich es mit setInterval versucht, was sicherstellt, dass das CSS alle zwei Sekunden angewendet wird, unabhängig davon, was mit der Tabelle, der Seite, der Auflösung und so weiter passiert. Anschließend habe ich auch requestAnimationFrame ausprobiert. All das war durchaus wirksam, aber es musste eine bessere Lösung geben.

Schließlich habe ich die Antwort allein in den API-Docs gefunden.

Die Eigenschaft "rowsUpdated" der Tabelle: Laut API-Spezifikation wird das Event ausgelöst, sobald die Tabellenzeilen infolge von Rendering, einer Modelländerung oder einer Benutzerinteraktion aktualisiert werden.

Daraus ließ sich ableiten, wann wir unser CSS anwenden müssen.

Die fertige Anwendung sieht in etwa so aus:

Fazit: Alternierende Zeilenfarben für eine Tree Table lassen sich über eigenes CSS und die Nutzung von "aria-level" als Unterscheidungsmerkmal realisieren. Diese Lösung stützt sich auf die in der API-Dokumentation beschriebene Eigenschaft "rowsUpdated". Sie sorgt für eine bessere Benutzeroberfläche bei hierarchischen Daten.

Probieren Sie die oben beschriebene Anwendung hier aus: https://feat-alt-row-colors-treetable.netlify.app