Global Window Object Guide

Using `window.ks.jsonRenderers.renderToDom`

When you import the bundle, it attaches the ks global object to window. Inside this object, the function window.ks.jsonRenderers.renderToDom is available to build and mount HTML tables into the DOM.

How the Global Object is Structured

The bundle creates a nested namespace on the browser window:

1. window.ks

The root global object attached directly to the browser window.

2. jsonRenderers

The module namespace object inside window.ks containing render tools.

3. renderToDom()

The execution function that compiles your JSON and builds the table in the target HTML element.

Hierarchy: window → ks → jsonRenderers → renderToDom({ ... })

Code to Build the Table

Import the bundle, load JSON data, and run window.ks.jsonRenderers.renderToDom.

import "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";

import data from "./batches.json" with { type: "json" };

const start = () => {
  try {
    window.ks.jsonRenderers.renderToDom({
      type: "table",
      data: data.slice(0, 50),
      targetHtmlId: "dom-render-container",
      columns: ["itemName", "baseUnit"],
      showLog: true
    });

  } catch (err) {
    console.log("error : ", err);
  }
};

start();

HTML Target Container

Ensure your HTML contains a container whose id matches targetHtmlId:

<div id="dom-render-container"></div>

Options Passed to renderToDom

Parameter	Type	Description
type	string	Set to `"table"` to build and render an HTML table.
data	Array<Object>	The array of objects containing the row records (e.g. `data.slice(0, 50)`).
targetHtmlId	string	The DOM element ID where the table will be rendered (`"dom-render-container"`).
columns	Array<string>	Array of object keys to display as table headers and columns (e.g. `["itemName", "baseUnit"]`).
showLog	boolean	Optional. Set to `true` to print build logs in the browser console.

Live Table Output

Rendered automatically by calling window.ks.jsonRenderers.renderToDom

Mounted to #dom-render-container