Tabelle einklappbar

[Feffo]

Hallo😀

Ich würde gerne eine Tabelle erstellen die "einklappbar" ist. Sprich man hat die Überschriften bspw. in 3 Spalten und muss zunächst auf diese draufklicken, sodass man die Zeilen darunter lesen kann. Welcher Befehl ist dafür vorgesehen?

Liebe Grüße, Steffi

[Rolf B]

Hallo Feffo, oder Steffi,

Welcher Befehl ist dafür vorgesehen?

Keiner. HTML hat Elemente 😉

Eigentlich sind dafür <details> und <summary> da. Die werden von Firefox, Chrome und Safari unterstützt, von den Microsoft-Browsern nicht. Dort siehst Du dann ständig die aufgeklappte Tabelle.

Dumm ist nur, dass Du dann keine automatische Breitenaufteilung mehr verwenden kannst, weil Du die Tabelle zweiteilen musst. Die Überschriften kommen in <summary> hinein, die Datenzeilen darunter. D.h. du müsstest die Spaltenbreiten fest vorgeben und ggf. mit CSS dafür sorgen, dass keine Abstände und kein Versatz zwischen Überschrift und Inhalt entstehen.

Ohne <details>/<summary> wirst Du einen Button brauchen, der mit einer Prise JavaScript dafür sorgt, das die Sichtbarkeit des <tbody> umgeschaltet wird. Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt. Du kannst diesen Button auch in eins der th Elemente hineinsetzen.

Welchen Weg willst Du gehen?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ohne <details>/<summary> wirst Du einen Button brauchen, der mit einer Prise JavaScript dafür sorgt, das die Sichtbarkeit des <tbody> umgeschaltet wird.

Da ist in expand/collapse table nur ein Selektor zu ändern.

Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.

Also technisch unmöglich.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Also technisch unmöglich.

Seufz. Nein. Das wäre schön. Es ist ja leider technisch möglich. Wenn es technisch unmöglich wäre, würde ein solches Konstrukt vom Browser einfach nicht akzeptiert. Es wird aber.

Mausschubser und Touchtapser sind happy damit und merken nicht, dass es falsch ist. Und du darfst das Evangelium nach Heydon zum (n+1)-ten Mal vortragen.

Zur Definition von "technisch möglich": Frei gespannte, unisolierte Kupferlitze von der Wand zur 220V Deckenlampe ist technisch möglich. Die Lampe brennt, wenn Du den Schalter umlegst. Funktioniert, kann man sagen. Technisch sinnvoll ist es dagegen nicht. Die Gründe muss ich nicht aufzählen. Ein click-Event auf einem nichtinteraktiven Element ist etwas besser als die Kupferlitze: Man stirbt nicht wenn man dranfasst. Man stirbt nur, wenn Gunnar es mitbekommt 😉

Rolf

[Pit]

Hallo Rolf,

Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.

Ist das so? Inwiefern?

Ich frage nach, weil ich sowas in der Art sicher schonmal irgendwo genutzt habe :(

Pit

[Auge]

Hallo

Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.

Ist das so? Inwiefern?

Ich frage nach, weil ich sowas in der Art sicher schonmal irgendwo genutzt habe :(

Es ist ohne Maus oder Finger nicht bedienbar, weil th nunmal kein interaktives HTML-Element ist, wie zum Beispiel a oder button.

Tschö, Auge

[Pit]

Hi Auge,

Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.

Es ist ohne Maus oder Finger nicht bedienbar, weil th nunmal kein interaktives HTML-Element ist, wie zum Beispiel a oder button.

Ah, ok, verstehe. Es ging mir um den Begriff "unzulässig". Wäre es also zulässig, das so zu machen, wenn m an den kreis seiner User ganz sicher zu 100% auf Mausschubser und Touchtabser einschränken kann? 😉 Oder wenn die Seite so intern ist, dass sie nur für einen selber zugänglich ist?

Ich habe übrogens nachgesehen, ich habe sowas 2 x genutzt, aber einmal innerhalb einer Zeile einen +-Button eingefügt, der iene weitere zeile un-/sichtbar macht bzw. einmal einen Radiobutton hierfür genutzt, also insowfern alles in Ordnung.

Pit

[Auge]

Hallo

Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.

Es ist ohne Maus oder Finger nicht bedienbar, weil th nunmal kein interaktives HTML-Element ist, wie zum Beispiel a oder button.

Es ging mir um den Begriff "unzulässig". Wäre es also zulässig, das so zu machen, wenn man den kreis seiner User ganz sicher zu 100% auf Mausschubser und Touchtabser einschränken kann? 😉

Oder wenn die Seite so intern ist, dass sie nur für einen selber zugänglich ist?

1. Kann man das mit Sicherheit?
2. Wird man diesen Fehler, den man in einem internen Projekt als vernachlässigbar angesehen hat, mit einer gewissen Wahrscheinlichkeit nicht auch in einem Projekt, dass nicht auf „Mausschubser und Touchtabser“ beschränkt ist, machen? Schon allein deshalb, weil man solche Dinge gerne mit copy'n'paste aus einer (vermeintlich) funktionierenden Vorlage holt, ohne weiter darüber nachzudenken?

Selbst ohne quasireligiöse Strenge würde ich in einem solchen Szenario meine Faulheit „fürchten“. Wenn ich es hingegen gleich richtig™️ mache, kann ich es später, auch ohne unbemerkte Fehler fürchten zu müssen, kopieren.

Tschö, Auge

[Pit]

Hi Auge,

1. Kann man das mit Sicherheit?
2. Wird man diesen Fehler, den man in einem internen Projekt als vernachlässigbar angesehen hat, mit einer gewissen Wahrscheinlichkeit nicht auch in einem Projekt, dass nicht auf „Mausschubser und Touchtabser“ beschränkt ist, machen? Schon allein deshalb, weil man solche Dinge gerne mit copy'n'paste aus einer (vermeintlich) funktionierenden Vorlage holt, ohne weiter darüber nachzudenken?

2 x ja. 😉

1. Es gibt Fälle, in denen man das zu 100% sagen kann, bzw. es gewollt ist. Und wenn jemand ungewollt dort ist, muß er nicht auch noch tastaturkonform bedient werden 😉

2. Auch ja, Genau so ist es. Insofern sollte man es tatsächlich von vorne herein korrekt machen.

Pit

[Christian Kruse]

Hallo Pit,

1. Es gibt Fälle, in denen man das zu 100% sagen kann, bzw. es gewollt ist. Und wenn jemand ungewollt dort ist, muß er nicht auch noch tastaturkonform bedient werden 😉

Auch wenn du das zur Zeit denkst: machs von vornherein richtig. Anforderungen ändern sich, das ist die einzige Konstante, die ich erlebt habe.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

machs von vornherein richtig. Anforderungen ändern sich, das ist die einzige Konstante, die ich erlebt habe.

Und gleich richtig machen ist weniger Aufwand (zeitlicher, und Zeit ist Geld) als später nachrüsten zu müssen.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

machs von vornherein richtig. Anforderungen ändern sich, das ist die einzige Konstante, die ich erlebt habe.

Und gleich richtig machen ist weniger Aufwand (zeitlicher, und Zeit ist Geld) als später nachrüsten zu müssen.

Ja. Exakt das, was ich damit implizieren wollte.

LG,
CK

[marctrix]

Hej Christian,

machs von vornherein richtig. Anforderungen ändern sich, das ist die einzige Konstante, die ich erlebt habe.

Und gleich richtig machen ist weniger Aufwand (zeitlicher, und Zeit ist Geld) als später nachrüsten zu müssen.

Ja. Exakt das, was ich damit implizieren wollte.

Als Frontender weiß ich, dass eine semantische Auszeichnung von Dokumenten dazu führt, dass geänderte Anforderungen leichter und schneller umgesetzt werden könne, als beispielsweise in Dokumenten voller presentational markup.

Aber ich weiß natürlich nicht inwiefern sich das auf Programmierung übertragen lässt.

Marc

[ursus contionabundo]

Als Frontender weiß ich, dass eine semantische Auszeichnung von Dokumenten dazu führt, dass geänderte Anforderungen leichter und schneller umgesetzt werden könne, als beispielsweise in Dokumenten voller presentational markup.

Aber ich weiß natürlich nicht inwiefern sich das auf Programmierung übertragen lässt.

Wenn Du auch nur einmal ein, in einer deutschen Firma von einem Pole mit polnischen Variablen-, Funktionen- und Objektnamen verziertes "Programm" (in meinem Fall war es Excel-VBA) gesehen hättest, bei dem Daten und Programm auf eine geradezu wahnwitzige Art vermischt wurden, dann wüsstest Du, dass bei einer gewissen Ausdehnung des Begriffs der Sematik, eine "semantische" Auszeichnung von Programmbestandteilen (Konstanten, Variablen, Funktionen, Klassen, Methoden) und Daten nicht etwa nur förderlich ist, sondern Bedingung für die Pflegbarkeit ist.

Oder weisst Du, was

krjoli=strzprz(krajkri);

macht?

Ein anderes Beispiel mangelhafter und zur erschwerten Pflege führender "Semantik" wären frühere Basic-Dialekte mit der Begrenzung von Variablennamen auf zwei Zeichen:

kr=strzprz(kk)

Das ist in etwa genau so aussagekräftig... Aber auf den damaligen Systemen gab es eh nur maximal 64kB Arbeitsspeicher, so dass der neben dem Monitor hängende Zettel mit den Beschreibungen des Inhalts der Variablen durchaus nur die Größe eines A4-Blattes hatte.

[Gunnar Bittersmann]

@@ursus contionabundo

Oder weisst Du, was

krjoli=strzprz(krajkri);

macht?

Den Finger in den Hals stecken? Das erinnert mich an Strč prst skrz krk, aber das ist tschechisch.

LLAP 🖖

[ursus contionabundo]

Oder weisst Du, was

krjoli=strzprz(krajkri);

macht?

Den Finger in den Hals stecken? Das erinnert mich an Strč prst skrz krk, aber das ist tschechisch.

Ja, an den weltberühmten vokalfreien Satz "Steck den Finger durch den Hals!" war das Beispiel durchaus angelehnt.

[marctrix]

Hej Pit,

2. Auch ja, Genau so ist es. Insofern sollte man es tatsächlich von vorne herein korrekt machen.

Unbedingt. Man sollte so oft wie möglich wiederverwendbaren Code erzeugen - es sei denn man muss keinen erzeugen, weil man gerade welchen wiederverwendet.

Marc

[marctrix]

Hej marctrix,

2. Auch ja, Genau so ist es. Insofern sollte man es tatsächlich von vorne herein korrekt machen.

Unbedingt. Man sollte so oft wie möglich widerverwendbaren Code erzeugen - es sei denn man muss keinen erzeugen, weil man gerade welchen wiederverwendet.

Ergänzung (auch wenn es sich dann nicht mehr so schön als Zitat eignet 😉): bei Verwendung kann man noch mal kurz drüber gucken, ob nicht ein Fehler drin steckt oder es inzwischen bessere Lösungen gibt. So wird die Bibliothek nicht nur größer, sondern auch besser.

[Tabellenkalk]

Hallo,

widerverwendbaren Code

als Zitat

Kann bitte jemand (@Matthias Apsel ?) den Fehler im Zitat korrigieren, ich habs grad im Original getan.

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

Kann bitte jemand (@Matthias Apsel ?) den Fehler im Zitat korrigieren

✅ done.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

✅ done.

Danke!

Gruß
Kalk

[Bernd]

Wäre es also zulässig, das so zu machen, wenn m an den kreis seiner User ganz sicher zu 100% auf Mausschubser und Touchtabser einschränken kann? 😉 Oder wenn die Seite so intern ist, dass sie nur für einen selber zugänglich ist?

Einfach umsetzten wenn es funktioniert. Wenn User kommen die keine Tastatur oder Maus haben oder diese nicht benutzen wollen warum auch immer, Pech!

Du kennst deine Zielgruppe vor allem wenn es sich um ein internes Projekt handelt. Selbst bei einem externen Projekt ist es egal, die User haben dann eben nicht die Möglichkeit. Mach dir darüber nicht so viele Gedanken und lass dich auf keinen Fall verunsichern.

Glaubst du große Unternehmen wie Facebook hören auf irgendwelche Menschen die meinen sagen zu müssen, legt Firmen nicht zusammen, schaltet keinen Werbung, oder ach wie schlimm es doch ist, wenn Teens eine App installieren und uns wissentlich ihr Nutzer-Verhalten gegen gutes Geld übermitteln? Nein interessiert sie überhaupt nicht. Was am Ende des Tages zählt ist Umsatz und Gewinn, nicht mehr und nicht weniger.

[Christian Kruse]

Shoo, Troll dich.

[Gunnar Bittersmann]

@@Pit

Wäre es also zulässig, das so zu machen, wenn m an den kreis seiner User ganz sicher zu 100% auf Mausschubser und Touchtabser einschränken kann? 😉

“Everybody is a keyboard user when eating lunch with their mouse hand.” —Adrian Roselli

Oder wenn die Seite so intern ist, dass sie nur für einen selber zugänglich ist?

Auch man selbst kommt mal in die Situation. Und sei es, dass die Batterie der Maus alle ist …

LLAP 🖖

[ursus contionabundo]

“Everybody is a keyboard user when eating lunch with their mouse hand.” —Adrian Roselli

Jetzt habe ich kurz gestutzt.

• Aber vielleicht will ich zum Brötchen, Stückchen oder Schnittchen (links) vielleicht auch ein Schlückchen (rechts=Maushand).

• (Vor allem, viele) Araber dürften hingegen aus hier nicht weiter auszuführenden, geografisch-metereologisch-kulturellen Gründen sehr darüber verwirrt sein, dass jemand mit der linken Hand etwas anfasst, was danach noch gegessen werden soll.

• Von meinem eigenen Arbeitsplatz weiß ich, dass eine Mausbedienung temporär aus, sagen wir geometrischen Gründen, schwierig ist...

Auch man selbst kommt mal in die Situation. Und sei es, dass die Batterie der Maus alle ist …

Oder man sitzt im ICE und hasst Touchpads so sehr, dass die schon im Bios abgeschaltet sind und der Knubbel erscheint als zu mühseliger Umweg.

[Matthias Apsel]

Hallo Pit,

Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.

Ist das so? Inwiefern?

Es gibt Nutzer ohne Maus.

Bis demnächst
Matthias

[JürgenB]

Hallo,

dass man besser die vorgesehenen Elemente für Interaktionen nutzt, wurde ja schon gesagt.

In diesem Beispiel kann man sehen, wie man ein tr (nachträglich) klickbar machen kann, ohne das es sein Aussehen verändert.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

In diesem Beispiel kann man sehen, wie man ein tr (nachträglich) klickbar machen kann

Du meinst vermutlich th?

Da werden nicht th clickbar gemacht, sondern es wird jeweils ein button ins th eingefügt.

ohne das es sein Aussehen verändert.

Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Du meinst vermutlich th?

meine ich, vertippt.

Da werden nicht th clickbar gemacht, sondern es wird jeweils ein button ins th eingefügt.

das meinte ich mit „klickbar machen“

ohne das es sein Aussehen verändert.

Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist.

bisher wird hier das Defaultverhalten eines Buttons genommen, also gepunktete Linie bei Focus und Hand-Cursor bei Mouseover. Wie würdest du die Zellen gestalten?

Gruß
Jürgen

[Auge]

Hallo

ohne das es sein Aussehen verändert.

Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist.

bisher wird hier das Defaultverhalten eines Buttons genommen, also gepunktete Linie bei Focus und Hand-Cursor bei Mouseover. Wie würdest du die Zellen gestalten?

Ich vermute mal, Gunnar stellt auf „ohne das es sein Aussehen verändert“ ab.

Ein Benutzer kann nicht einfach so feststellen, dass die Überschrift der Tabellenspalte interaktiv ist. Das geht nur, indem der Fokus oder der Mauszeiger auf die Überschrift gesetzt wird, was man nur macht, wenn man weiß, dass die Überschrift interaktiv ist, was man nicht weiß, ohne den Fokus oder den Mauszeiger ….

Du siehst, ein Zirkelschluss.

Tschö, Auge

[Tabellenkalk]

Hallo,

Wie würdest du die Zellen gestalten?

Ich schlage zusätzliche Icons vor, jeweils ein unausgefüllter Pfeil nach oben und unten. Dort wo sortiert ist, entsprechend gefüllt.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Wie würdest du die Zellen gestalten? Ich schlage zusätzliche Icons vor, jeweils ein unausgefüllter Pfeil nach oben und unten. Dort wo sortiert ist, entsprechend gefüllt.

Ja, sowas wollte ich auch vorschlagen und auf dieses Beispiel verweisen. Ich wollte es bloß noch vorher fixen, muss aber nochmal nachlesen, was da zu tun ist … (Irgendwas hatte sich da an der Webcomponents-Spec geändert.)

LLAP 🖖

[JürgenB]

Hallo,

ich habe mal meine Version mit offenen Dreiecken versehen, weil ich dafür schon Platzhalter hatte. Was meint ihr?

Hier habe ich für die Dreiecke einen Textknoten an den Text im th gehängt. Sollte man hier lieber eine Klasse (up, down, no) nehmen und dann mit ::after arbeiten?

Gruß
Jürgen

[Tabellenkalk]

Hallo,

ich habe mal meine Version mit offenen Dreiecken versehen, weil ich dafür schon Platzhalter hatte. Was meint ihr?

Ja, so oder immer zwei Dreiecke (über- oder nebeneinander) und eins davon bei Bedarf ausgefüllt.

Gruß
Kalk

[Auge]

Hallo

ich habe mal meine Version mit offenen Dreiecken versehen, weil ich dafür schon Platzhalter hatte. Was meint ihr?

Mal unabhängig von der resultierenden HTML-Struktur sieht das mMn definitiv verständlicher aus.

Tschö, Auge

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ja, sowas wollte ich auch vorschlagen und auf dieses Beispiel verweisen. Ich wollte es bloß noch vorher fixen, muss aber nochmal nachlesen, was da zu tun ist … (Irgendwas hatte sich da an der Webcomponents-Spec geändert.)

@Orlok⁠s Posting wiedergefunden und mich dann endlich mal rangesetzt: Web components: sortable table, revisited

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

@Orlok⁠s Posting wiedergefunden und mich dann endlich mal rangesetzt: Web components: sortable table, revisited

Den von dir kritisierten Makel

ohne das es sein Aussehen verändert.

Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist.

weist dein Pen auch auf.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Web components: sortable table, revisited

Den von dir kritisierten Makel

Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist. weist dein Pen auch auf.

Sehen die Tabellenköpfe nicht genügend nach Buttons aus?

Ich hab das Hintergrundgrau jetzt etwas dunkler gemacht.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Sehen die Tabellenköpfe nicht genügend nach Buttons aus?

Ich hab das Hintergrundgrau jetzt etwas dunkler gemacht.

nein, das sieht wie eine Tabellenüberschriftszeile aus. Nur beim Focus mit der TAB-Taste sieht es wegen des Rahmens klickbar aus.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Sehen die Tabellenköpfe nicht genügend nach Buttons aus? nein, das sieht wie eine Tabellenüberschriftszeile aus. Nur beim Focus mit der TAB-Taste sieht es wegen des Rahmens klickbar aus.

Hm, wenn eine der Spaltenüberschriften so’n Dreieck hat, ist das Hinweis genug, dass die Tabelle nach dieser Spalte sortiert ist und dass man sie auch nach anderen Spalten sortieren kann?

Im Finder sieht das auch so aus und ich denke, im Explorer unter Windows ähnlich:

LLAP 🖖

[JürgenB]

Hallo Gunnar,

in meiner Version ist aber beim Start keine der Spalten sortiert. Daher hat auch keine Spalte das Symbol. Was hältst du von dieser Variante?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

in meiner Version ist aber beim Start keine der Spalten sortiert. Daher hat auch keine Spalte das Symbol. Was hältst du von dieser Variante?

Lädt auch nicht so richtig zum Draufclicken ein, IMHO.

Wie man das gestaltet, hängt auch von der Zielgruppe der Anwendung ab. Für ein Admin-UI ist die von mir gewählte Darstellung sicher genügend. Auf einer Website für heterogenen Nutzerkreis mag das anders aussehen.

Das title-Attribut ist hier vielleicht ein nützlicher Zusatz (hab ich jetzt bei mir auch eingebaut), sollte aber nicht die alleinige Beschreibung der Funktion der Buttons sein. Ich hab das über visuell versteckten Text gelöst:

<button title="sort by title"><span visually-hidden="true">sort by </span>title</button>

mit den bekannten CSS-Angaben für [visually-hidden].

Es macht durchaus Sinn, bei numerischen Werten (incl. Kalenderdaten) auf- und abwärts sortieren zu können. Bei Textspalten sehe ich den Sinn Z→A nicht.

„Ich kann das Alphabet auch rückwärts aufsagen.“ —kein Nutzer, jemals

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Es macht durchaus Sinn, bei numerischen Werten (incl. Kalenderdaten) auf- und abwärts sortieren zu können. Bei Textspalten sehe ich den Sinn Z→A nicht.

„Ich kann das Alphabet auch rückwärts aufsagen.“ —kein Nutzer, jemals

In einer Liste von Städten möchte ich Informationen über Zwickau.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Bei Textspalten sehe ich den Sinn Z→A nicht.

„Ich kann das Alphabet auch rückwärts aufsagen.“ —kein Nutzer, jemals

In einer Liste von Städten möchte ich Informationen über Zwickau.

Dann weißt du, dass Zwickau ziemlich weit unten steht und scrollst nach unten.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Es macht durchaus Sinn, bei numerischen Werten (incl. Kalenderdaten) auf- und abwärts sortieren zu können. Bei Textspalten sehe ich den Sinn Z→A nicht.

beim Sortierer im Wiki sollte man nicht zu viel einbauen, da geht es ja auch ums Prinzip, Zugänglichkeit ist da wichtiger.

Bei meinem „großen“ Sortierer kann man natürlich rauf und runter sortieren und über Klassenparameter kann man auch steuern, ob eine Spalte sortierbar ist.

Auf unserer Mitarbeiterseite habe ich einfach alle Spalten sortierbar gelassen. Wer will, kann auch nach E-Mail-Adresse oder Telefonnummern sortieren.

Gruß
Jürgen

[Christian Kruse]

Hallo Gunnar,

Es macht durchaus Sinn, bei numerischen Werten (incl. Kalenderdaten) auf- und abwärts sortieren zu können. Bei Textspalten sehe ich den Sinn Z→A nicht.

„Ich kann das Alphabet auch rückwärts aufsagen.“ —kein Nutzer, jemals

Schön plakativ, aber unzutreffend.

Umzusortieren ist eine häufig genutzte Abkürzung anstatt ewig zu scrollen und/oder zu blättern. Wenn es fehlt, werde ich danach gefragt.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

„Ich kann das Alphabet auch rückwärts aufsagen.“ —kein Nutzer, jemals Schön plakativ, aber unzutreffend.

Ach ja?

Umzusortieren ist eine häufig genutzte Abkürzung anstatt ewig zu scrollen und/oder zu blättern.

Ich würde denken, dass man schneller zu Quedlinburg kommt, indem man runterscrollt und Q wie gewohnt nach P und vor R findet anstatt die Sortierung umzukehren und dann verwirrt zu sein, dass Q nach R und vor P eingeordnet ist.

Meine Vermutung. Nutzertests würden mich umstimmen. Ungetestete anderslautende Vermutungen nicht.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Ich würde denken, dass man schneller zu Quedlinburg kommt, indem man runterscrollt und Q wie gewohnt nach P und vor R findet anstatt die Sortierung umzukehren und dann verwirrt zu sein, dass Q nach R und vor P eingeordnet ist.

Noch schneller kommt man da hin, indem man Cmd+f drückt und „Qued“ eintippt. Macht aber halt keiner.

Meine Vermutung. Nutzertests würden mich umstimmen. Ungetestete anderslautende Vermutungen nicht.

Ich habe keine Vermutung geäußert, sondern meine Erfahrungen mit meinen Nutzern. Wenn dir das nicht reicht, ist das natürlich OK und dein Bier, aber eine Vermutung ist das nicht.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Ich würde denken, dass man schneller zu Quedlinburg kommt, indem man runterscrollt und Q wie gewohnt nach P und vor R findet anstatt die Sortierung umzukehren und dann verwirrt zu sein, dass Q nach R und vor P eingeordnet ist.

Noch schneller kommt man da hin, indem man Cmd+f drückt und „Qued“ eintippt. Macht aber halt keiner.

Ah, da kommen wir dem Problem schon näher. Ein Nutzer will eine ganz bestimmte Tabellenzeile finden – und kennt die Suchfunktion seines Browsers nicht. Dann gilt es, dieses Problem zu lösen.

Nutzer: Ich will so schnell wie möglich Quedlinburg in der Tabelle finden.
Techniker: Q ist in der zweiten Hälfte des Alphabets – dann biete ich dir halt an, rückwärts zu sortieren. 😫

Nein, das ist nicht die Lösung des Problems. Sortierung ist nicht die Lösung für eine Suche. Eine Suchfunktion ist die Lösung für eine Suche: entweder den Benutzer auf die browsereigene Suchfunktion hinweisen oder zusätzlich noch eine (einen Filter) anbieten.

Eine Sortierung ist eher dazu da, einen Gesamtüberblick über alle Daten unter bestimmten Gesichtspunkten zu bekommen, bspw. einen zeitlichen Verlauf. Und den kann man wahlweise vorwärts oder rückwärts haben wollen. Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.

Nutzertests würden mich umstimmen. Ungetestete anderslautende Vermutungen nicht.

Ich habe keine Vermutung geäußert, sondern meine Erfahrungen mit meinen Nutzern. Wenn dir das nicht reicht, ist das natürlich OK und dein Bier, aber eine Vermutung ist das nicht.

Ich sprach von Test. Darauf zu hören, was Nutzer sagen, was sie denken zu brauchen, ist kein Test. Darauf zu schauen, wie Nutzer wirklich arbeiten und welche Probleme dabei auftreten, das ist einer.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Ah, da kommen wir dem Problem schon näher. Ein Nutzer will eine ganz bestimmte Tabellenzeile finden – und kennt die Suchfunktion seines Browsers nicht.

Zum Beispiel.

Nutzer: Ich will so schnell wie möglich Quedlinburg in der Tabelle finden.
Techniker: Q ist in der zweiten Hälfte des Alphabets – dann biete ich dir halt an, rückwärts zu sortieren. 😫

Sei nicht so verdammt arrogant! Es gibt natürlich eine zusätzliche Suchfunktion, direkt über den Tabellen. Die nutzt nur keiner. Warum? Keine Ahnung, das können sie mir nicht beantworten.

„Warum hast du nicht die Suchfunktion benutzt?“ „Ich weiss nicht…“

Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.

Der Trick ist seine User zu beobachten und dann zu fragen, warum sie so arbeiten wie sie arbeiten. Kann ich nur empfehlen 😉

Nutzertests würden mich umstimmen. Ungetestete anderslautende Vermutungen nicht.

Ich habe keine Vermutung geäußert, sondern meine Erfahrungen mit meinen Nutzern. Wenn dir das nicht reicht, ist das natürlich OK und dein Bier, aber eine Vermutung ist das nicht.

Ich sprach von Test. Darauf zu hören, was Nutzer sagen, was sie denken zu brauchen, ist kein Test. Darauf zu schauen, wie Nutzer wirklich arbeiten und welche Probleme dabei auftreten, das ist einer.

Erstens habe ich nicht behauptet einen Test gemacht zu haben. Und zweitens ist das, was du beschreibst, kein Test, sondern eine Studie. Und davon hane ich schon diverse gemacht.

LG,
CK

[JürgenB]

Hallo ihr Beiden,

irgendwie verstehe ich die Diskussion um die Notwendigkeit einer Rückwärtssuche nicht. Die technische Umsetzung kostet kaum mehr, und ob der Besucher sie nutzt, z.B. durch einen zweiten Klick, ist doch ihm überlassen.

Als Anbieter eines Tabellensortier-Scripts weiß ich nicht, auf welche Daten der Sortierer angewendet wird. Ich biete die Methoden an und der Seitenautor entscheidet, wie er sie nutzt, z.B. Rückwärtssuche beim ersten Klick oder Spalte nicht sortierbar. Aber bisher hat sich keiner gewünscht, die Rückwärtssuche zu unterdrücken.

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

Als Anbieter eines Tabellensortier-Scripts weiß ich nicht, auf welche Daten der Sortierer angewendet wird. Ich biete die Methoden an und der Seitenautor entscheidet, wie er sie nutzt, z.B. Rückwärtssuche beim ersten Klick oder Spalte nicht sortierbar. Aber bisher hat sich keiner gewünscht, die Rückwärtssuche zu unterdrücken.

Es wäre auch so gar nicht sinnvoll, die Möglichkeiten der Benutzer einzuschränken.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Es wäre auch so gar nicht sinnvoll, die Möglichkeiten der Benutzer einzuschränken.

In Gegenteil: es ist sinnvoll. Funktionen, welche die Nutzer zur Erfüllung ihrer Aufgaben nicht unterstützen, sondern gar davon ablenken, haben im Nutzerinterface nichts zu suchen.

Und das allgemein, nicht nur speziell für die Frage, ob alphabetisch rückwärts zielführend ist oder nicht.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Es wäre auch so gar nicht sinnvoll, die Möglichkeiten der Benutzer einzuschränken.

In Gegenteil: es ist sinnvoll. Funktionen, welche die Nutzer zur Erfüllung ihrer Aufgaben nicht unterstützen, sondern gar davon ablenken, haben im Nutzerinterface nichts zu suchen.

Ich fände es zumindest befremdlich, wenn in einer Tabelle nur nach einigen Spalten sortiert werden könnte.

Bis demnächst
Matthias

[JürgenB]

Hallo Gunnar,

In Gegenteil: es ist sinnvoll. Funktionen, welche die Nutzer zur Erfüllung ihrer Aufgaben nicht unterstützen, sondern gar davon ablenken, haben im Nutzerinterface nichts zu suchen.

und wer entscheidet, was „die Nutzer zur Erfüllung ihrer Aufgaben nicht unterstütz(en)t“? Der Scriptprogrammierer, der Seitenautor, der Seitenbesucher, …?

Gruß
Jürgen

[Christian Kruse]

Hallo JürgenB,

irgendwie verstehe ich die Diskussion um die Notwendigkeit einer Rückwärtssuche nicht.

Ich wollte nicht darüber diskutieren. Ich wollte darlegen, dass es User gibt, die sie nutzen wollen. Die Diskussion ging erst los, als Gunnar davon ausging, ich sei zu blöd um auf die offensichtliche Lösung zu kommen.

Die technische Umsetzung kostet kaum mehr, und ob der Besucher sie nutzt, z.B. durch einen zweiten Klick, ist doch ihm überlassen.

Ja. Eben.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Die Diskussion ging erst los, als Gunnar davon ausging, ich sei zu blöd um auf die offensichtliche Lösung zu kommen.

Könntest du versuchen, nicht jede fachliche Diskussion persönlich zu nehmen? Danke.

Die technische Umsetzung kostet kaum mehr, und ob der Besucher sie nutzt, z.B. durch einen zweiten Klick, ist doch ihm überlassen.

Ja. Eben.

Eben nicht. Siehe meine Antwort an Matthias.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Die Diskussion ging erst los, als Gunnar davon ausging, ich sei zu blöd um auf die offensichtliche Lösung zu kommen.

Könntest du versuchen, nicht jede fachliche Diskussion persönlich zu nehmen? Danke.

Dann arbeite an deiner Ausdrucksweise?

Nutzer: Ich will so schnell wie möglich Quedlinburg in der Tabelle finden.
Techniker: Q ist in der zweiten Hälfte des Alphabets – dann biete ich dir halt an, rückwärts zu sortieren. 😫

Ich hatte vorher berichtet, dass die User danach fragen, wenn das Feature fehlt:

Wenn es fehlt, werde ich danach gefragt.

Und du ziehst es trotzdem vor die schlechtestmögliche Auslegung zu wählen und das „Techniker haben User-Bedüfnisse nicht im Blick“-Narrativ zu füttern. Inwiefern wundert es dich, dass mich das anpisst?

Die technische Umsetzung kostet kaum mehr, und ob der Besucher sie nutzt, z.B. durch einen zweiten Klick, ist doch ihm überlassen.

Ja. Eben.

Eben nicht. Siehe meine Antwort an Matthias.

Du hast Recht mit dem, was du Matthias geantwortet hast. Du hast unrecht mit der Auslegung, dass die umgekehrte alphabetische Sortierung eine Ablenkung darstellt. Das Gegenteil ist der Fall.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Nutzer: Ich will so schnell wie möglich Quedlinburg in der Tabelle finden.
Techniker: Q ist in der zweiten Hälfte des Alphabets – dann biete ich dir halt an, rückwärts zu sortieren. 😫

Sei nicht so verdammt arrogant!

Ich bin arrogant?? Nein, die Arroganz liegt auf Seiten des Technikers, der meint, er könne auch UIs designen ohne jemanden zu fragen, der sich damit auskennt.

Es gibt natürlich eine zusätzliche Suchfunktion, direkt über den Tabellen. Die nutzt nur keiner. Warum? Keine Ahnung, das können sie mir nicht beantworten.

Genau das wäre die Aufgabe eines Designers: das herauszufinden. Und zu verbessern.

Der Trick ist seine User zu beobachten und dann zu fragen, warum sie so arbeiten wie sie arbeiten.

Ja. Aber das ist nur ein Teil des Tricks. Der zweite Teil ist, daraus Schlüsse zu ziehen. Und Nutzern Verbesserungen ihres Arbeitsablaufs anzubieten. Auf andere Wege kommen Nutzer eher nicht; es bringt also nicht unbedingt was zu fragen: was wollt ihr?

„Wenn ich die Menschen gefragt hätte, was sie wollen, hätten sie gesagt: schnellere Pferde.“ —Henry Ford (Autobauer)

Nutzertests würden mich umstimmen. Erstens habe ich nicht behauptet einen Test gemacht zu haben.

’nuff said.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Nein, die Arroganz liegt auf Seiten des Technikers, der meint, er könne auch UIs designen ohne jemanden zu fragen, der sich damit auskennt.

Wie stellst du dir das denn im Ernstfall vor?

Es gibt natürlich eine zusätzliche Suchfunktion, direkt über den Tabellen. Die nutzt nur keiner. Warum? Keine Ahnung, das können sie mir nicht beantworten.

Genau das wäre die Aufgabe eines Designers: das herauszufinden. Und zu verbessern.

Wie geht das, außer indem man die Nutzer fragt?

Ja. Aber das ist nur ein Teil des Tricks. Der zweite Teil ist, daraus Schlüsse zu ziehen. Und Nutzern Verbesserungen ihres Arbeitsablaufs anzubieten. Auf andere Wege kommen Nutzer eher nicht; es bringt also nicht unbedingt was zu fragen: was wollt ihr?

Und ob das wirklich den Workflow verbessert, findest du wie raus?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Nein, die Arroganz liegt auf Seiten des Technikers, der meint, er könne auch UIs designen ohne jemanden zu fragen, der sich damit auskennt.

Wie stellst du dir das denn im Ernstfall vor?

Einen Designer beauftragen/mit einem Designer zusammenarbeiten, wenn man nicht selbst Designer und Software-/Webentwickler in Personalunion ist.

Es gibt natürlich eine zusätzliche Suchfunktion, direkt über den Tabellen. Die nutzt nur keiner. Warum? Keine Ahnung, das können sie mir nicht beantworten.

Genau das wäre die Aufgabe eines Designers: das herauszufinden. Und zu verbessern.

Wie geht das, außer indem man die Nutzer fragt?

Nutzertests.

(Da testet man natürlich nicht Nutzer, sondern seine Anwendung.)

Ja. Aber das ist nur ein Teil des Tricks. Der zweite Teil ist, daraus Schlüsse zu ziehen. Und Nutzern Verbesserungen ihres Arbeitsablaufs anzubieten. Auf andere Wege kommen Nutzer eher nicht; es bringt also nicht unbedingt was zu fragen: was wollt ihr?

Und ob das wirklich den Workflow verbessert, findest du wie raus?

Durch Nutzertests. Das können z.B. A/B-Tests sein.

LLAP 🖖

[ursus contionabundo]

Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.

Also, zumindest im Filmsystembrowser benutze ich die Sortierfunktionen sehr oft. Besonders wenn ich nicht ein, sondern eine Gruppe von Objekten suche, für die ich nicht etwa einen eigenen Ordner sondern einen Präfix im Name verwende. Das ist immer noch oft genug schneller als die Nutzung der Suchfunktion. Und oft will ich ja gar nicht einen bestimmtes Objekt, sondern die Gruppe sehen. Und manchmal hab ich vergessen, ob ich in CamelCase oder mit Trenn-zei_chen notiert habe.

Und wenn ich dann etwas suche, was mit V beginnt, dann bin ich sehr glücklich, wenn ich mit einem Klick die Sortierung rumdrehen kann.

Was ich jetzt nicht verstehe:

Einerseits bist Du ein Verfechter der Zugänglichkeit. Andererseits lehnst Du hier eine Funktion ab, die nach meinem Ermessen auch dem bequemen Zugriff und damit letztendlich auch der Zugänglichkeit dient.

[Auge]

Hallo

Was ich jetzt nicht verstehe:

Einerseits bist Du ein Verfechter der Zugänglichkeit. Andererseits lehnst Du hier eine Funktion ab, die nach meinem Ermessen auch dem bequemen Zugriff und damit letztendlich auch der Zugänglichkeit dient.

Tja, für ihn ist es halt undenkbar, dass eine Sortierung nach Alphabet für irgendwen™️ sinnvoll sein kann. Und da nicht sein kann, was nicht sein darf …

kopfschüttelnd, Auge

[Gunnar Bittersmann]

@@Auge

Andererseits lehnst Du hier eine Funktion ab

Ach tu ich das?

Tja, für ihn ist es halt undenkbar, dass eine Sortierung nach Alphabet für irgendwen™️ sinnvoll sein kann.

Was ich sagte:

• „Bei Textspalten sehe ich den Sinn Z→A nicht.“

• „Ich würde denken, … Meine Vermutung.“

• „Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.“

Und jetzt kommt gleich wieder einer um die Ecke und sagt, dass immer der Sender Schuld ist, ween der Empfänger das herausliest, was er lesen will …

kopfschüttelnd, Auge

Da schüttel ich mit.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Was ich sagte:

• „Bei Textspalten sehe ich den Sinn Z→A nicht.“

• „Ich würde denken, … Meine Vermutung.“

• „Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.“

Aber auch kein Nutzer, jemals

Und jetzt kommt gleich wieder einer um die Ecke und sagt, dass immer der Sender Schuld ist, ween der Empfänger das herausliest, was er lesen will …

Nö.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Aber auch kein Nutzer, jemals

In anderem Zusammenhang.

Den Unterschied zwischen „Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf“ und „Ich kann das Alphabet auch rückwärts aufsagen“ muss ich nicht erläutern?

LLAP 🖖

[Auge]

Hallo

Tja, für ihn ist es halt undenkbar, dass eine Sortierung nach Alphabet für irgendwen™️ sinnvoll sein kann.

Was ich sagte:

• „Bei Textspalten sehe ich den Sinn Z→A nicht.“

• „Ich würde denken, … Meine Vermutung.“

• „Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.“

Du kannst hier wieder und wieder die Zitate vom ich rauskopieren, alles andere, was du um das ich herum schreibst, sagt eindeutig nicht ich.

Und jetzt kommt gleich wieder einer um die Ecke und sagt, dass immer der Sender Schuld ist, ween der Empfänger das herausliest, was er lesen will …

Tja Pech. Du formulierst halt so, dass deine Meinung als allein seligmachende Wahrheit da steht. Das ist sie halt nicht. Komm' mit dem Echo klar.

Tschö, Auge

[marctrix]

Hej Christian,

Ich würde denken, dass man schneller zu Quedlinburg kommt, indem man runterscrollt und Q wie gewohnt nach P und vor R findet anstatt die Sortierung umzukehren und dann verwirrt zu sein, dass Q nach R und vor P eingeordnet ist.

Noch schneller kommt man da hin, indem man Cmd+f drückt und „Qued“ eintippt. Macht aber halt keiner.

Entwickler, unter anderem ich. Ich gebe auch gerne solche Tipps auf Webseiten, in der Hoffnung, dass es sich rumspricht unter denen, die das mögen. Schön ist es ja erst, wenn jeder auf seine Art glücklich wird. Wer sortieren will, sollte das auch können. Cmd+F geht ja eh immer…

Marc

[sm]

Bei großen Listen arbeite ich in der Tat IMMER so: absteigend sortieren statt ewig scrollen.

[marctrix]

Hej sm,

Bei großen Listen arbeite ich in der Tat IMMER so: absteigend sortieren statt ewig scrollen.

Ich auch. Besonders wenn die auch noch über mehrere Seiten aufgeteilt sind. Außerdem ärgere ich mich, wenn ich nach zwei von drei Spalten sortieren, ich aber nach der einzigen sortieren möchte, nach der ich nicht sortieren kann.

Marc

[Gunnar Bittersmann]

@@sm

Bei großen Listen arbeite ich in der Tat IMMER so: absteigend sortieren statt ewig scrollen.

Gegen ewig scrollen ist ein seiteninterner Link angebracht, der einen ans Ende der Tabelle/Liste führt. Dann kann man von Z hochscrollen und findet Q wie gewohnt zwischen P und R. Meine Vermutung ist, dass das einfacher ist als verkehrtherum zu sortieren und in Gedanken das Alphabet umkehren zu müssen. Die verkehrtrumme Sortierung betrifft ja nicht nur den ersten Buchstaben.

Die Hypothese wäre in einem Nutzertest zu prüfen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Gegen ewig scrollen ist ein seiteninterner Link angebracht, der einen ans Ende der Tabelle/Liste führt.

Möglichkeiten gibt es viele. Zum Beispiel auch eine Leiste mit dem Alphabet, das gleich zum richtigen Anfangsbuchstaben führt. Das geht aber nur, wenn es nur ein Sortierkriterium gibt, wie etwa bei der Kontaktliste im Handy. Oder auch bei http://selfhtml.apsel-mv.de/java-javascript/.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Möglichkeiten gibt es viele.

Ja. Und die gilt es zu finden und gegeneinander abzuwägen. Vorher muss man natürlich überlegen, was das eigentliche Problem ist, was gelöst werden soll. Das nennt sich Design.

Das erfordert aber etwas Denkaufwand. Mal schnell auf Minus drücken geht so viel einfacher.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Möglichkeiten gibt es viele.

Ja. Und die gilt es zu finden und gegeneinander abzuwägen.

Warum gegeneinander? Warum nicht miteinander?

Vorher muss man natürlich überlegen, was das eigentliche Problem ist, was gelöst werden soll. Das nennt sich Design.

Das erfordert aber etwas Denkaufwand. Mal schnell auf Minus drücken geht so viel einfacher.

Eins der Minusse ist von mir. Ich bleibe dabei: Es ist nicht nutzerfreundlich, wenn in einer Tabelle nur einige Spalten sortierbar sind. Dass es auch weitere und wahrscheinlich auch bessere Möglichkeiten gibt (Suchfunktion), ist unbestritten. Dennoch ist mir die Antwort „Dann musst der Nutzer eben nach unten scrollen“^[1], jedes Minus wert.

Bis demnächst
Matthias

---

1. Ich weiß, du hast geschrieben: „Dann weißt du, dass Zwickau ziemlich weit unten steht und scrollst nach unten.“ ↩︎

[Gunnar Bittersmann]

@@Christian Kruse

Umzusortieren ist eine häufig genutzte Abkürzung anstatt ewig zu scrollen und/oder zu blättern. Wenn es fehlt, werde ich danach gefragt.

Ja, und?

Gib Nutzern nicht das, was sie wollen, sondern das, was sie brauchen!

Siehe:

• Don’t design what users want
• Nutzer wissen nicht was sie wollen

LLAP 🖖

[Just try it!]

„Ich kann das Alphabet auch rückwärts aufsagen.“ —kein Nutzer, jemals

Habe das gerade getan. Ging zwar deutlich langsamer als vorwärts, aber ich kann es.

[Tabellenkalk]

Hallo,

„Ich kann das Alphabet auch rückwärts aufsagen.“ —kein Nutzer, jemals

Habe das gerade getan. Ging zwar deutlich langsamer als vorwärts, aber ich kann es.

Ja, Glückwunsch!
Aber bist du jemals Nutzer?

Gruß
Kalk

[JürgenB]

Hallo Gunnar,

Web components: sortable table, revisited

im Safari liegt das Dreieck auf dem letzten e, im FF (OS X) sieht es gut aus, aber in beiden Browsern sortiert es bei klick auf die Spaltenüberschrift nicht.

Aber ich sehe, du legst das Dreieck in ein ::after, z.Zt. auch mein Favorit.

Gruß
Jürgen

[JürgenB]

Hallo,

… aber in beiden Browsern sortiert es bei klick auf die Spaltenüberschrift nicht.

gerade gesehen, ich verwende die falschen Browser.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Web components: sortable table, revisited

im Safari liegt das Dreieck auf dem letzten e

Gefixt.

im FF (OS X) sieht es gut aus, aber in beiden Browsern sortiert es bei klick auf die Spaltenüberschrift nicht.

Im Firefox sollte es gehen; es sei denn, du hast Updates verpasst.

Safari “supports ‘Autonomous custom elements’ but not ‘Customized built-in elements.’” [CanIUse] Die Sortierung kann also nicht gehen. Buh, Safari.

In Chrome ging es vorher auch nicht. Ich hatte eine falsche Vergleichsfunktion, die einen booleschen anstatt eines numerischen Werts zurückgab. Firefox akzeptiert das bei Array.sort() oder castet das; Chrome nicht. Vergleichsfunktion gefixt.

LLAP 🖖

[Gunnar Bittersmann]

@@JürgenB

Web components: sortable table, revisited Aber ich sehe, du legst das Dreieck in ein ::after, z.Zt. auch mein Favorit.

Und jetzt auch richtig herum: bei aufsteigender Sortierung A→Z bzw. alt→neu zeigt das Dreieck nach oben.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

jetzt gehts, das FF-Update ist gerade erst gekommen.

Aber bei dir sieht man auch noch nicht, das die th klickbar sind.

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

Aber bei dir sieht man auch noch nicht, das die th klickbar sind.

Ich würde in dem Fall die Buttons wie Links (inklusive border-bottom) gestalten:

| ▼ Datum ▲

Und die aktuelle Spalte in Textfarbe und lediglich die andere Sortierung im Linkstyle, dabei aber trotzdem den gesamten Button, besser das gesamte th interaktiv lassen.

EDIT: Obwohl das ein Unterschied zu den anderen Spalten wäre

Bis demnächst
Matthias

[JürgenB]

Hallo Mathias,

unterstreichen bzw. border-bottom finde ich nicht so gut, da es ja auch sein kann, das die Spaltenüberschrift unterstrichen ist. Was hältst du von dieser Variante?

Gruß
Jürgen