Skip to main content

DHTMLX Spreadsheet. Import and export to JSON example

This demo shows how to import and export JSON data in DHTMLX Spreadsheet using parse(), load(), and export.json().

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    menu: true,
});

spreadsheet.parse(dataset);

function json(download) {
    if (download) {
        spreadsheet.export.json();
    } else {
        spreadsheet.load("", "json"); 
    }
}
<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
  <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="json(false)">Import json</button>
  <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="json(true)">Export json</button>
</section>

<!-- component container -->
<div id="spreadsheet" style="height: calc(100% - 60px); width: 100%"></div>

<!-- dataset -->

<script>
const dataset = {
        styles: {
            bold: {
                "font-weight": "bold",
            },
            right: {
                "justify-content": "flex-end",
                "text-align": "right",
            },
        },
        data: [
            { cell: "a1", value: "Country", css:"bold", locked: true },
            { cell: "b1", value: "Product", css:"bold" },
            { cell: "c1", value: "Price", css:"right bold" },
            { cell: "d1", value: "Amount", css:"right bold" },
            { cell: "e1", value: "Total Price", css:"right bold" },

            { cell: "a2", value: "Ecuador" },
            { cell: "b2", value: "Banana" },
            { cell: "c2", value: 6.68, format: "currency" },
            { cell: "d2", value: 430 },
            { cell: "e2", value: 2872.4, format: "currency" },

            { cell: "a3", value: "Belarus" },
            { cell: "b3", value: "Apple" },
            { cell: "c3", value: 3.75, format: "currency" },
            { cell: "d3", value: 600 },
            { cell: "e3", value: 2250, format: "currency" },

            { cell: "a4", value: "Peru" },
            { cell: "b4", value: "Grapes" },
            { cell: "c4", value: 7.69, format: "currency" },
            { cell: "d4", value: 740 },
            { cell: "e4", value: 5690.6, format: "currency" },

            { cell: "a5", value: "Egypt" },
            { cell: "b5", value: "Orange" },
            { cell: "c5", value: 5.86, format: "currency" },
            { cell: "d5", value: 560 },
            { cell: "e5", value: 3281.6, format: "currency" },

            { cell: "a6", value: "South Africa" },
            { cell: "b6", value: "Grapefruit" },
            { cell: "c6", value: 8.58, format: "currency" },
            { cell: "d6", value: 800 },
            { cell: "e6", value: 6864, format: "currency" },

            { cell: "a7", value: "Spain" },
            { cell: "b7", value: "Lemon" },
            { cell: "c7", value: 9.12, format: "currency" },
            { cell: "d7", value: 650 },
            { cell: "e7", value: 5928, format: "currency" },

            { cell: "a8", value: "Iran" },
            { cell: "b8", value: "Pomegranate" },
            { cell: "c8", value: 9.67, format: "currency" },
            { cell: "d8", value: 300 },
            { cell: "e8", value: 2901, format: "currency" },

            { 
              cell: "a9", 
              link: {
                text: "Link example",
                href: "https://dhtmlx.com/"
            } 
          },
        ],
    };
</script>

JSON is the standard data interchange format for web applications. Being able to load spreadsheet data from JSON and export the current spreadsheet state as a JSON file helps with persistence, sharing, and integration with other systems.

This example demonstrates three JSON workflows: parse(dataset) loads an inline JSON object, load("", "json") opens a file picker for JSON files, and export.json() downloads the current spreadsheet as a JSON file.

Solution overview​

  1. Create the Spreadsheet with new dhx.Spreadsheet("spreadsheet", { menu: true }) and call spreadsheet.parse(dataset) to load inline data
  2. Call spreadsheet.load("", "json") to open a file dialog for importing a .json file
  3. Call spreadsheet.export.json() to download the spreadsheet data as a JSON file

Key points​

  • Inline plus file-based JSON: The example combines inline parse(dataset) loading with file-based import and export controls
  • Async file import: load() returns a Promise
  • Explicit JSON type: The sample passes "json" explicitly to load("", "json") when opening the file picker

API reference​

  • parse(): Loads inline JSON data into the Spreadsheet.
  • load(): Loads data from a URL or opens a file picker.
  • export.json(): Exports Spreadsheet data to a downloadable JSON file.

Additional resources​