Skip to main content

DHTMLX Spreadsheet. Load data from URL example

This demo shows how to load data into DHTMLX Spreadsheet using the load() method with a remote JSON URL.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet");
// loading data in JSON format
spreadsheet.load("https://snippet.dhtmlx.com/codebase/data/spreadsheet/02/dataset.json");
<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>

Every spreadsheet application starts with data. Whether sourced from a database, an API response, or a static file, the component needs a reliable way to fetch and render that content. Remote loading is a common starting point when spreadsheet data is stored outside the page itself.

This example creates a Spreadsheet instance and loads a remote JSON file by calling spreadsheet.load("https://snippet.dhtmlx.com/codebase/data/spreadsheet/02/dataset.json"). Spreadsheet fetches the file and renders the returned dataset after the request completes.

Solution overview​

  1. Create the Spreadsheet with new dhx.Spreadsheet("spreadsheet")
  2. Call spreadsheet.load("https://snippet.dhtmlx.com/codebase/data/spreadsheet/02/dataset.json")
  3. Let Spreadsheet fetch and render the returned JSON dataset

Key points​

  • Remote loading: spreadsheet.load(url) fetches data from an external JSON source
  • Async behavior: load() returns a Promise, so any post-load logic should run after the request completes
  • JSON default: The sample relies on the default JSON loading behavior by passing only the URL

API reference​

  • load(): Loads data from an external URL.

Additional resources​