DataGrid
Virtuelle Karten mit stabilen SSR- und Hydration-Fenstern.
Grid-Virtualisierung
Kartensammlungen sollten auch dann leichtgewichtig bleiben, wenn sie wachsen.
Eine entfernte In-Memory-Quelle stellt 180 Karten bereit. DataGrid rendert die sichtbaren Zeilen, lädt angrenzende Bereiche vor und erhält eine crawlbare HTML-Paginierung.
Entferntes Karten-Grid
Der mitscrollende Header und jede Karte werden durch kontextbezogene Scala JS UI 1.0-DSL-Renderer aufgebaut.
180 entfernte Karten · der Header scrollt mit der virtuellen Fläche
Operations
Signal Room 51
Metrics and ownership should still feel quiet at scale.
Editorial
Amber Draft 52
A story card with room for title, deck, and routing metadata.
Finance
Mint Ledger 53
Stable dimensions make grids predictable for dashboards too.
Archive
Violet Tape 54
Long collections stay light when only the viewport is rendered.
Research
Atlas Memo 55
Dense notes, references, and open questions in one card.
Commerce
Northwind 56
A product teaser with enough structure for catalog browsing.
Operations
Signal Room 57
Metrics and ownership should still feel quiet at scale.
Editorial
Amber Draft 58
A story card with room for title, deck, and routing metadata.
Finance
Mint Ledger 59
Stable dimensions make grids predictable for dashboards too.
Archive
Violet Tape 60
Long collections stay light when only the viewport is rendered.
Select a card to inspect the reactive cell state.
Größenanpassung
Bevorzugte Breite, flexible Spalten
Die bevorzugte Kartenbreite bestimmt die Spaltenzahl; die tatsächlichen Breiten füllen den Viewport.
Remote
Das Laden von Bereichen folgt dem Viewport
Ungeladene Positionen bleiben stabile Platzhalterzellen, während nahe Daten angefordert werden.
SSR-Hosting
Query-fähige Server rendern echte Fenster
offset und limit wählen auf einem anfragebasierten Server deterministisches HTML aus. Der GitHub-Pages-Snapshot wendet Query-Änderungen nach der Hydration an.
DataGrid-DSL
Der Renderer beschreibt eine Karte, während das Control Layout und Laden verwaltet.
scala
dataGrid[Tile](tiles) {
itemWidthPx = 240
itemHeightPx = 196
gapPx = 16
overscanRows = 1
prefetchItems = 24
crawlable = true
crawlId = "showcase-tiles"
cellRenderer = { (tile, index) =>
div { text(tile.title) {} }
}
header {
div { text("Scrolling grid header") {} }
}
}