Method 1 • Direct CDN Import

How to Render HTML Tables
Using Direct CDN Import

Learn how to import the render function directly from jsDelivr into your browser ES Module without any build step, bundlers, or npm installations.

💡 How It Works 📄 Code Walkthrough ⚡ Interactive CDN Demo 📂 Open samples/table/byCdn →

💡

How CDN Import Works in Simple Words

With CDN import, your JavaScript file imports the renderer directly from the web URL as an ES Module. The browser downloads the bundle, resolves dependencies, and gives you a standard JavaScript function named render().

1. Zero Tooling

No Webpack, Vite, or npm install required. Open your HTML in any modern browser.

2. Clean Scope

Does not pollute the global window object. The function stays safely scoped inside your module.

3. Always Updated

Served via jsDelivr with global edge caching for lightning fast downloads.

Implementation Files

The 2 Files Needed to Render via CDN

This matches the exact setup found in samples/table/byCdn/.

1. index.html (The Page)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Table DOM Renderer Demo</title>
  <!-- Bootstrap CSS for clean styling -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
  <main class="container-fluid py-4">
    <h1>Table DOM Renderer Demo</h1>

    <!-- Target container where table will be mounted -->
    <div id="dom-render-container">
      <div class="text-center py-5 text-muted">Rendering table...</div>
    </div>
  </main>

  <!-- Load your module script -->
  <script type="module" src="./index.js"></script>
</body>
</html>

Key Requirement: A container element with an id (e.g. dom-render-container) and a script tag with type="module".

2. index.js (The JavaScript)

// 1. Import render directly from jsDelivr CDN
import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";

// 2. Import your JSON data
import data from "./batches.json" with { type: "json" };

const start = () => {
  try {
    // 3. Mount table into the container
    render({
      type: "table",
      data: data.slice(0, 50),
      targetHtmlId: "dom-render-container",
      columns: ["itemName", "baseUnit"],
      showLog: true
    });
  } catch (err) {
    console.log("error : ", err);
  }
};

start();

Key Requirement: Direct import statement pointing to the minified CDN bundle. You pass your rows and visible columns.

🌐

Alternative: Fetching Data from API or Remote JSON

If your browser environment doesn't support import with { type: "json" }, or if you are retrieving rows dynamically from a backend REST API endpoint, use standard modern fetch():

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

async function loadTable() {
  try {
    const res = await fetch("./batches.json");
    const data = await res.json();

    render({
      type: "table",
      data: data.slice(0, 25),
      targetHtmlId: "dom-render-container",
      columns: ["itemName", "baseUnit"],
      showLog: true
    });
  } catch (error) {
    console.error("Failed to render table:", error);
  }
}

loadTable();

Configuration

Render Parameters Explained

type Required

Must be set to "table" to instruct the builder to generate an HTML table.

targetHtmlId Required

The HTML id of the element where the table will be inserted.

data Required

Array of objects containing row records to be converted into table rows.

columns Recommended

Array of key names to show as columns. Filters out any unwanted keys.

showLog Optional

Set to true to enable informative debug logs in the browser console.

appendPosition Optional

Set to "prepend" to place the table before existing children, or omit to replace.

Try It Live

Interactive CDN Import Playground

Configure options and render a live table using the CDN render function right now.

Playground Controls

Select Columns to Display:

itemName baseUnit category stock

Rows to Render: 5

Live Code Snippet:

import render from "https://cdn.jsdelivr.net/...";

render({
  type: "table",
  data: data.slice(0, 5),
  targetHtmlId: "cdn-live-output",
  columns: ["itemName", "baseUnit", "category"],
  showLog: true
});