TableView
Reactive rows with a stable SSR and hydration structure.
Data view
A table should keep changing data calm.
A generated in-memory data source exposes 1,000 rows through RemoteListProperty. The table requests only the visible ranges.
Remote in-memory book table
Grouped columns, row and cell selection, resizing, reordering and direction over a remote source.
50 initial rows · 1,000 total
Scroll through remote ranges or sort any column; the table keeps one stable virtual surface.
Book
Details
📖Title
Author
Year
This content header scrolls with the rows while the column header stays fixed.
Der Hobbit #1
J. R. R. Tolkien
1937
1984 #2
George Orwell
1949
Siddhartha #3
Hermann Hesse
1922
Der Prozess #4
Franz Kafka
1925
Der Zauberberg #5
Thomas Mann
1924
Tschick #6
Wolfgang Herrndorf
2010
Frankenstein #7
Mary Shelley
1818
Stolz und Vorurteil #8
Jane Austen
1813
Der Hobbit #9
J. R. R. Tolkien
1937
1984 #10
George Orwell
1949
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
Der Zauberberg #21
Thomas Mann
1924
Tschick #22
Wolfgang Herrndorf
2010
Frankenstein #23
Mary Shelley
1818
Stolz und Vorurteil #24
Jane Austen
1813
Der Hobbit #25
J. R. R. Tolkien
1937
1984 #26
George Orwell
1949
Siddhartha #27
Hermann Hesse
1922
Der Prozess #28
Franz Kafka
1925
Der Zauberberg #29
Thomas Mann
1924
Tschick #30
Wolfgang Herrndorf
2010
Frankenstein #31
Mary Shelley
1818
Stolz und Vorurteil #32
Jane Austen
1813
Der Hobbit #33
J. R. R. Tolkien
1937
1984 #34
George Orwell
1949
Siddhartha #35
Hermann Hesse
1922
Der Prozess #36
Franz Kafka
1925
Der Zauberberg #37
Thomas Mann
1924
Tschick #38
Wolfgang Herrndorf
2010
Frankenstein #39
Mary Shelley
1818
Stolz und Vorurteil #40
Jane Austen
1813
Der Hobbit #41
J. R. R. Tolkien
1937
1984 #42
George Orwell
1949
Siddhartha #43
Hermann Hesse
1922
Der Prozess #44
Franz Kafka
1925
Der Zauberberg #45
Thomas Mann
1924
Tschick #46
Wolfgang Herrndorf
2010
Frankenstein #47
Mary Shelley
1818
Stolz und Vorurteil #48
Jane Austen
1813
Der Hobbit #49
J. R. R. Tolkien
1937
1984 #50
George Orwell
1949
Rows loaded
160 / 1000
Selection mode
multiple
Selection target
rows
Selected rows
0
Selected cells
0
Focused row
—
Last double-click
Double-click a row to inspect it.
Sorting
Shift-click headers to sort by multiple columns. Enter or Space sorts a focused header; Shift keeps other sort columns.
Selection
Ctrl/Cmd-click toggles rows; Shift-click selects a range.
In cell mode, Shift-click and Shift+Arrow select an inclusive rectangle.
Disabled rows (V05) stay visible and keyboard-reachable, but cannot be selected or edited.
Columns
Drag a column edge to resize. Focus its grip and use arrow keys for keyboard resizing.
Drag a column header to move it. Or focus the header and press Alt+Shift+Left/Right.
The column menu button in the header corner hides and shows individual columns.
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
For horizontal navigation, use free widths and widen the columns.
Editable cells
Standard cells edit the property the column was given: text, check box, choice box, converting text and a read-only progress bar.
Last commit
—
Editing
Double-click a cell, or press Enter on a focused one, to start editing. Enter commits, Escape cancels.
The converting rating cell rejects anything outside 1 to 5 instead of writing it back.
Memory
The source stays local
A deterministic catalog generates 1,000 rows without a server or network request.
SSR
Initial structure is deterministic
Configuration runs before dynamic row and column mount points are created.
Remote
Large sources remain lazy
RemoteListProperty exposes range loading, placeholders, and sortable query state.
Table DSL
Columns keep their renderer next to the data they display.
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)
}
}
Editable standard cells
A standard cell edits the property its column resolved for the row.
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
The loader slices and sorts one generated 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)
)
)