SSR Table & Data Sync

Applied to a table container via <div data-ln-table id="..."> or <table>, ln-table bridges server-rendered DOM elements with dynamic client-side datasets. In SSR mode, it indexes server-rendered rows directly from <tbody>, while in data-driven mode (data-ln-table-source="store"), it listens for ln-data-store:data events, clones row templates, and mounts rendered rows using sliding-window virtual scrolling.

This page demonstrates SSR hydration with a local cache & remote sync layer: the server prints the first 100 rows into <tbody>, and ln-table hydrates them into the cache, then performs virtual windowed scrolling to fetch further pages on demand from a remote API.

What each control is wired to

The toolbar search and department/status popovers dispatch to ln-table. Each sortable header carries an ln-sort control whose ln-sort:change event is intercepted. The ln-data-coordinator coordinates fetching new pages from the backend (api.php) via the ln-api-connector and feeding the cached data store.

Server-side paging & Data Layer

This demo uses data-ln-table-source and data-ln-table-window to wire the table to the 3-Tier Data Layer. Scroll down to trigger remote chunk fetches dynamically.