TableView
Reaktive Zeilen mit einer stabilen SSR- und Hydration-Struktur.
Datenansicht
Eine Tabelle sollte auch veränderliche Daten ruhig darstellen.
Eine generierte In-Memory-Datenquelle stellt über RemoteListProperty 1.000 Zeilen bereit. Die Tabelle fordert nur die sichtbaren Bereiche an.
Entfernte In-Memory-Buchtabelle
Gruppierte Spalten, Zeilen- und Zellauswahl, Größenänderung, Umsortierung und Leserichtung über einer entfernten Quelle.
50 initiale Zeilen · 1.000 insgesamt
Scrolle durch entfernte Bereiche oder sortiere eine Spalte; die Tabelle behält eine stabile virtuelle Fläche.
Book
Details
📖Title
Author
Year
Dieser Inhalts-Header scrollt mit den Zeilen, während der Spalten-Header fixiert bleibt.
Siddhartha #11
Hermann Hesse
1922
Der Prozess #12
Franz Kafka
1925
Der Zauberberg #13
Thomas Mann
1924
Tschick #14
Wolfgang Herrndorf
2010
Frankenstein #15
Mary Shelley
1818
Stolz und Vorurteil #16
Jane Austen
1813
Der Hobbit #17
J. R. R. Tolkien
1937
1984 #18
George Orwell
1949
Siddhartha #19
Hermann Hesse
1922
Der Prozess #20
Franz Kafka
1925
Geladene Zeilen
160 / 1000
Auswahlmodus
multiple
Auswahlziel
rows
Ausgewählte Zeilen
0
Ausgewählte Zellen
0
Fokussierte Zeile
—
Letzter Doppelklick
Double-click a row to inspect it.
Sortierung
Shift-Klick auf Spaltenköpfe sortiert nach mehreren Spalten. Enter oder Leertaste sortiert den fokussierten Spaltenkopf; Shift behält andere Sortierspalten bei.
Auswahl
Ctrl/Cmd-Klick wählt Zeilen an oder ab; Shift-Klick wählt einen Bereich.
Im Zellmodus wählen Shift-Klick und Shift+Pfeil einen einschließenden Rechteckbereich.
Disabled rows (V05) stay visible and keyboard-reachable, but cannot be selected or edited.
Spalten
Ziehe am Spaltenrand, um die Breite zu ändern. Fokussiere den Ziehgriff und nutze die Pfeiltasten für die Tastaturbedienung.
Ziehe einen Spaltenkopf zum Verschieben. Oder fokussiere ihn und drücke Alt+Shift+Links/Rechts.
Der Spaltenmenü-Button in der Header-Ecke blendet einzelne Spalten aus und wieder ein.
Dragging the \"Book\" group's own edge resizes Title and Author together, spilling into Year only once both are at their own limit.
The snap-to-grid policy replaces every built-in strategy at once, including how the \"Book\" group's own edge behaves.
The Year cell highlights itself when it is focused or selected (D05), using the same per-cell state a custom row already gets for the whole row.
Navigation
Für horizontale Navigation auf freie Breiten umschalten und die Spalten verbreitern.
Editierbare Zellen
Standardzellen bearbeiten die Property, die der Spalte übergeben wurde: Text, Kontrollkästchen, Auswahlfeld, konvertierender Text und ein schreibgeschützter Fortschrittsbalken.
Letzte Übernahme
—
Bearbeiten
Doppelklicke eine Zelle oder drücke Enter auf der fokussierten Zelle, um die Bearbeitung zu starten. Enter übernimmt, Escape bricht ab.
Die konvertierende Bewertungszelle weist alles außerhalb von 1 bis 5 ab, statt es zurückzuschreiben.
Speicher
Die Quelle bleibt lokal
Ein deterministischer Katalog erzeugt 1.000 Zeilen ohne Server oder Netzwerkanfrage.
SSR
Die initiale Struktur ist deterministisch
Die Konfiguration läuft, bevor dynamische Mount-Punkte für Zeilen und Spalten erstellt werden.
Remote
Große Quellen bleiben lazy
RemoteListProperty stellt das Laden von Bereichen, Platzhalter und einen sortierbaren Abfragezustand bereit.
Tabellen-DSL
Spalten halten ihren Renderer direkt bei den Daten, die sie darstellen.
scala
div {
style {
height = "420px"
minHeight = "0"
}
tableView[Book](books) {
style { height = "100%" }
rowHeight = 44.0
tableMenuButtonVisible = true
columnGroup[Book]("Book") {
column[Book, String]("Title") {
prefWidth = 280.0
sortable = true
sortKey = "title"
cell { book =>
text(book.title) {}
}
}
}
header {
div { text("Scrolling content header") {} }
}
onRowDoubleClick(openBook)
}
}
Editierbare Standardzellen
Eine Standardzelle bearbeitet die Property, die ihre Spalte für die Zeile aufgelöst hat.
scala
tableView[Reading](readings) {
editable = true
column[Reading, String]("Title") {
cellValueFactory = _.value.title
textFieldCell()
onEditCommit(event => log(event.newValue))
}
column[Reading, Boolean]("Finished") {
cellValueFactory = _.value.finished
checkBoxCell
}
column[Reading, String]("Shelf") {
cellValueFactory = _.value.shelf
choiceBoxCell(shelves)
}
column[Reading, Int]("Rating") {
cellValueFactory = _.value.rating
convertingTextFieldCell(text =>
text.toIntOption.toRight("Whole number required")
)
}
}
In-Memory-RemoteListProperty
Der Loader schneidet und sortiert einen generierten Vector.
scala
val books = RemoteListProperty[Book, BookQuery](
loader = RemoteLoader { query =>
val sorted = sortBooks(generatedBooks, query.sorting)
val page = sorted.slice(query.offset, query.offset + query.limit)
Future.successful(
RemotePage(
items = page,
offset = Some(query.offset),
totalCount = Some(sorted.length)
)
)
},
initialQuery = BookQuery(offset = 0, limit = 50),
rangeQueryUpdater = Some((query, offset, limit) =>
query.copy(offset = offset, limit = limit)
)
)