3 Architectural Modes for ln-table
Ashlar provides three distinct architectural paradigms for data grids, allowing you to choose the exact trade-off between SEO/initial paint, client memory, and network throughput:
1. SSR Pre-Rendered Table
HTML <tr> DOM elements emitted by backend (PHP/Node). Instant initial paint & SEO. Zero client template compile. In-memory DOM sorting & filtering.
2. Remote API & Virtual Window
Paginates infinite backend data on-demand via ln-api-connector. Ideal for huge databases (100k+ records) with server-side SQL/querying.
3. Injected JSON Seed (Active)
Backend injects 10,000 JSON records directly into <script type="application/json">. Ingested into ln-data-store in 0ms. Rendered via Cheetah/Glide virtual DOM row recycling pool (~35 recycled rows).
How Injected Seed + Virtual Row Recycling Works
Unlike traditional client-side SPAs that display loading spinners while fetching remote JSON after mount, the Injected Seed pattern allows backend engines (Laravel, Symfony, Django, Rails, Go, ASP.NET) to embed datasets directly into HTML:
- Zero Network Roundtrip (0ms latency): 10,000 enterprise records arrive embedded inside
<script type="application/json">nested directly inside<li data-ln-data-store>(or externally referenced viadata-ln-data-store-seed). Zero secondary fetch requests. - Instant ln-data-store Ingestion:
ln-data-storeautomatically parses the JSON, builds query indexes, and immediately serves read queries from memory or IndexedDB. - Cheetah / Glide-Style DOM Pool: Instead of creating 10,000
<tr>elements (which consumes 150MB+ of DOM heap and causes catastrophic browser freezing),ln-tablecreates a fixed pool of ~35-60 recycled rows. As the user scrolls, cell texts and attributes update in-place with zero element allocation. - Sub-Millisecond Search & Sort: Search keywords and popover filters run against local indices with 0ms network latency.
Live Engine Telemetry
<tr> Pool Nodes
Interactive Grid — 10,000 Records with Instant Search, Sort & Filter
|
Title
|
Department
|
Status
|
Priority
|
Owner
|
Size
|
Updated
|
|
|---|---|---|---|---|---|---|---|
No matching records found
Try refining your search keyword or clearing active popover filters.