Overview & Architecture
This page demonstrates a pure Client-Side Data Architecture coordinating ln-table, ln-data-store, and ln-api-connector via ln-data-coordinator. There are no pre-rendered SSR rows in <tbody> — rows are fetched remotely from the backend (api.php) on demand and rendered dynamically using <template data-ln-template="hybrid-docs-row">.
Data Flow & Lifecycle
- Mount & Request Initial. On initialization,
ln-tableenters sliding-window mode and emitsln-table:request-datafor page 0. - Transport & Cache.
ln-api-connectorfetches the slice fromapi.phpand forwards records toln-data-store(with optional IndexedDB persistence). - Template Rendering.
ln-tableingests the records and stamps them out viahybrid-docs-rowtemplate into<tbody>. - Virtual Windowing. As the user scrolls, searches, or filters, only the active viewport rows are kept in the DOM, while offscreen records are virtualized for maximum performance with 10,000+ items.
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.
Integration Log Terminal
Interactive Table Demo
|
Title
|
Department
|
Status
|
Priority
|
Owner
|
Size
|
Updated
|
||
|---|---|---|---|---|---|---|---|---|
No documents found
No results found
Try refining your search terms.