🏠 Home / docs / samples / table
Table Component • Navigation Hub

Table Component Guides

Choose your integration path for rendering tabular data from JSON. Explore the zero-build direct CDN ES module import guide or the enterprise window.ks runtime walkthrough.

Quick Concept • 3 min read ⚡

Using CDN Import

Fast, zero-build integration directly from jsDelivr using modern JavaScript ES modules. Ideal for rapid prototyping, modern web applications, and live interactive table demos.

What you will learn:
  • 1. Zero-Build CDN Import: Direct import renderDirect from "..." from jsDelivr.
  • 2. render Function Parameters: Specifying type: "table", data, columns, and target container.
  • 3. Interactive Sandbox: Live column toggles, row slider controls, and instant DOM updates.
  • 4. Lifecycle Telemetry: Real-time logging of rendering pipeline and container replacement.
Read CDN Guide →
Deep Dive • 15 min read 🌐

window.ks Global Runtime

Exhaustive enterprise guide on using the pre-bundled window.ks.jsonRenderers.renderToDom API for multi-page applications, server templates, and legacy script tags.

What you will learn:
  • 1. Global Runtime Setup: Attaching window.ks globally on page load.
  • 2. renderToDom API: Complete configuration options for table column schemas and data binding.
  • 3. Multi-Page Integration: Clean integration into traditional admin consoles and server-rendered views.
  • 4. Zero Overhead: Lightweight native browser DOM generation with no third-party UI framework bloat.
Read window.ks Guide →
Concept • Mental Model

The House-Building Story for Tables

How json-renderers constructs an HTML table from JSON data

📐 1. Architect

json-renderers-build

Prepares the blueprint. It takes your raw row objects and column array, and converts them into a declarative JSON tree specifying <table>, <thead>, and <tbody>.

👷 2. Worker

@keshavsoft/json-to-tag

Builds the physical elements. Reads the blueprint node by node and instantiates real browser DOM elements (document.createElement) with class names and attributes.

📋 3. Site Manager

json-renderers

Mounts the finished product. Validates your configuration, calls the architect, directs the construction worker, and mounts the table cleanly into your target #container.

💡
Golden Rule: You never write manual <tr> / <td> loops or unsafe innerHTML string concatenation. Pass JSON data and column keys — the pipeline generates a valid, styled, accessible table automatically.