Table — Injected JSON Seed

Mode

Skin

Theme

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.

View SSR Demo →

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.

View Remote API Demo →

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).

Active Demo

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:

  1. 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 via data-ln-data-store-seed). Zero secondary fetch requests.
  2. Instant ln-data-store Ingestion: ln-data-store automatically parses the JSON, builds query indexes, and immediately serves read queries from memory or IndexedDB.
  3. Cheetah / Glide-Style DOM Pool: Instead of creating 10,000 <tr> elements (which consumes 150MB+ of DOM heap and causes catastrophic browser freezing), ln-table creates a fixed pool of ~35-60 recycled rows. As the user scrolls, cell texts and attributes update in-place with zero element allocation.
  4. Sub-Millisecond Search & Sort: Search keywords and popover filters run against local indices with 0ms network latency.

Live Engine Telemetry

10,000
Total Injected Records
~38
DOM <tr> Pool Nodes
0
HTTP API Requests
< 1 ms
Filter/Search Latency

Interactive Grid — 10,000 Records with Instant Search, Sort & Filter

Injected Documents Grid

Title
Department
Status
Priority
Owner
Size
Updated

items

0ms In-Memory Engine