JsonToTable Documentation

Overview

JsonToTable renders a responsive table from an array of objects (or from a JSON API), then provides built-in filtering, searching, sorting, paging, and CSV export — all via a simple fluent API.

Key Features

Auto columns or custom definition
Modal filters (checkbox, text, range, etc)
Global Search (Multi-word AND logic)
Sortable Headers (ASC/DESC)
CSV Export (Filtered or All)

Tech Stack

Requires Bootstrap 5 (CSS + JS Bundle)
Optional FontAwesome for icons
Zero dependencies otherwise (Native JS)

Requirements

Include Bootstrap 5 and the library in your project.

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- JsonToTable Lib -->
<script src="../assets/js/JsonToTable.js"></script>

Quick Start

1. Base Example (Auto-Columns)

Create a table using only the constructor and `.load()`.

// Define container ID and data
new JsonToTable("demo_base").load(DEMO_DATA);

2. Fetch from API

new JsonToTable("grid2").fetch("/api/users/list");

Public API

config(cfg) load(data) fetch(url) applyFilters() resetFilters() exportCSV(name, filtered) onFiltered(fn)

Most methods are chainable (fluent API style).

Configuration & UI

Use `.config()` to control pagination, UI elements, and behavior.

.config({
  pageSize: 25,             // Rows per page
  title: "Filter Data",     // Modal title
  storageKey: "MyTable_1",  // LocalStorage key for state
  ui: {
    SearchBar: true,        // Global search input
    FilterButton: true,     // Filter modal button
    ExportCSV: true         // Export icon in footer
  }
})

Example: Small Page Size

new JsonToTable("demo_pagesize")
  .config({ pageSize: 2 })
  .load(DEMO_DATA);

Columns Schema

The `columns` array defines how to read, label, and render data.

columns: [
  { 
    key: "FIELD_NAME",    // Required: JSON key
    label: "Title",       // Optional: Header text
    sortable: true,       // Optional: Enable sorting
    render: "money",      // Optional: Formatter
    filter: { ... }       // Optional: Filter config
  }
]

Example: Custom Labels & Disabled Sort

new JsonToTable("demo_label").config({
  columns: [
    { key: "ID", label: "Ref #" },
    { key: "DESCRIPTION", sortable: false }, // Sorting disabled
    { key: "AMOUNT" },
    { key: "STATUS" },
    { key: "TIME" }
  ]
}).load(DEMO_DATA);

Render Modes

Built-in formatters for common data types.

render: "money"

Formats numbers with 2 decimals. Colors positive green and negative red.

{ key: "AMOUNT", render: "money" }

render: "unixSecondsToLocal"

Converts Unix Timestamp (seconds) to local browser date string.

{ key: "TIME", render: "unixSecondsToLocal" }

Live Render Example

Filters

Filters appear in the modal dialog. Each column can have a unique filter type.

Supported Types

text - Search/contains/starts
checkbox - Multi-select unique values
radio - Single select options
sign - Positive / Negative / All
number-range - Min / Max inputs
date-range - Date pickers (for unix times)

Example: Text & Range Filters

new JsonToTable("demo_filter_text").config({
  columns: [
    { key: "DESCRIPTION", filter: { type: "text", datalist: true } },
    { key: "AMOUNT", filter: { type: "number-range" } },
    { key: "STATUS", filter: { type: "checkbox", searchable: true } }
  ]
}).load(DEMO_DATA);

Row Actions

Add interactive buttons to every row. Requires idKey to identify rows.

.config({
  actions: {
    idKey: "ID",
    view: (row) => `#view-${row.ID}`,
    edit: (row) => `#edit-${row.ID}`,
    delete: async (row) => alert("Deleting " + row.ID)
  }
})

CSV Export

The export button appears in the center of the footer.

Click: Exports currently Filtered data.
Shift + Click: Exports All data.

// Enable/Disable export button
ui: { ExportCSV: true }

State Management

The library automatically saves the following to localStorage:

Global search query
Active sort column and direction
All filter inputs and selections

State is restored on page load. Use resetFilters() to clear it.

JsonToTable Docs