Skip to main content



Loads data from an external file


load(url: string, type?: string): promise;


  • url - (required) the URL of an external file
  • type - (optional) optional, the type of data to load: "json" (default), "csv", "xlsx"


The method returns a promise of data loading


const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
// config parameters
// load data in the JSON format (default)

// load data in the CSV format
spreadsheet.load("../common/data.csv", "csv");

// load data in the Excel format, (.xlsx only)
spreadsheet.load("../common/data.xlsx", "xlsx");

Related samples:


The component will make an AJAX call and expect the remote URL to provide valid data.

Data loading is asynchronous, so you need to wrap any after-loading code into a promise:


Loading Excel data


Please note that the component supports import from Excel files with the .xlsx extension only.

DHTMLX Spreadsheet uses the WebAssembly-based library Excel2Json for import of data from Excel. Check the details.

Loading JSON files

It is possible to allow end users to load a JSON file into the spreadsheet via the File Explorer. To do that:

  • Specify a button to open the File Explorer where ".json" files can be selected:
<section class="dhx_sample-controls">
<button class="dhx_sample-btn dhx_sample-btn--flat" onclick="json()">Import json</button>
  • Call the load() method with two parameters: an empty string as an URL and the type of data to load ("json"):
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
menu: true,


function json() {
spreadsheet.load("", "json"); // loads data from a .json file

Check the example.

Changelog: The ability to load a JSON file via the File Explorer was added in v4.3

Related articles: Data loading and export