public-ui / kolibri

The accessible HTML-Standard
https://public-ui.github.io
European Union Public License 1.2
173 stars 34 forks source link

Fix table column consistency #7047

Open anicyne opened 2 weeks ago

anicyne commented 2 weeks ago

Refs: #6890

The A11y and PO reviews will only take place after all other DoD steps have been completed by the Developer:

github-actions[bot] commented 2 weeks ago

Netlify Draft Deployment URL: https://674466378442ed1df3c38cc0--kolibri-public-ui.netlify.app Logs: https://app.netlify.com/sites/kolibri-public-ui/deploys/674466378442ed1df3c38cc0

deleonio commented 1 week ago

Hi @sdvg, @AlexanderSchmidtCE ,

irgendwie ist der Snapshot jetzt anders ... die Tabelle ist nicht mehr leer?

Wurde das Sample gefixed oder die Component?

Müsste das nicht https://public-ui.github.io/v2/sample-react/#/table/stateless fixen?

sdvg commented 1 week ago

irgendwie ist der Snapshot jetzt anders ... die Tabelle ist nicht mehr leer?

Hier ist ein kleiner Abstand entstanden. Das sollte noch behoben werden.

screenshot 2024-11-14-11 35 53@2x

Wurde das Sample gefixed oder die Component?

Es wurde direkt in der Tabelle gefixt. Reviewed ist die Änderung noch nicht.

Müsste das nicht public-ui.github.io/v2/sample-react#/table/stateless fixen?

Um dieses Beispiel geht es im Ticket, ja. Da wurden jetzt leere Zellen eingefügt, wo vorher keine waren.

deleonio commented 5 days ago

@sdvg ist das eher so, wie Du wolltest?

sdvg commented 5 days ago

@sdvg ist das eher so, wie Du wolltest?

Noch nicht so ganz:

Im Beispiel sind weiterhin die Spalten verschoben. screenshot 2024-11-20-18 02 20@2x

Das ließe sich lösen, indem wir eine leere Headerspalte als Platzhalter für die vertikalen Header hinzufügen. Dies würde wie folgt aussehen:

_headerCells={{
    horizontal: [
        [
+           { label: '', asTd: true },
            { key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
            { key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
            { key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
            { key: 'nosort', label: 'no sort option' },
        ],
    ],

Wenn die Tabelle korrekt befüllt ist, ist es auch nicht mehr notwendig, Daten "abzuschneiden", die über die Header-Spalten herausragen, wie gerade implementiert. Diese Logik würde ich tatsächlich lieber wieder entfernen, weil ich es im Zweifelsfall besser fände, wenn Daten und Header nicht ganz zusammenpassen, als wenn Daten entfernt werden.

Für mich wäre eine solche Fehlerbehebung direkt im Beispiel ausreichend. Wenn wir zusätzlich Probleme in der Tabelle selbst abfangen wollen, würde ich gerne noch einmal über die Details sprechen (@deleonio).

sdvg commented 2 days ago

@sdvg Ich glaube, hier ist aus Versehen ein Fehler passiert. v3stuff containt

Danke für den Hinweis. Da war ich gestern noch auf dem falschen Branch unterwegs. Ist korrigiert.

deleonio commented 15 hours ago

Der PR ist noch nicht fertig, weil er noch die Selection-Col berücksichtigen muss. Das sieht man jetzt schön, wenn die Linie von den spacer-TR gezeichnet wird.