Skip to main content

DHTMLX Spreadsheet. Load CSV file example

This demo shows how to load CSV data into DHTMLX Spreadsheet from an external file using the load() method with the "csv" type parameter.

Live example​

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

Teams that store tabular data in CSV format, from exported database reports to simple comma-separated logs, need a way to view and edit that data in a spreadsheet interface without converting files manually. Loading CSV directly into a web-based spreadsheet eliminates the conversion step entirely.

This example calls spreadsheet.load(url, "csv") to fetch a CSV file from a remote URL. The method returns a Promise, so any post-load logic can be chained with .then(). The Spreadsheet parses the CSV content and loads it into the sheet.

Solution overview​

  1. Create the Spreadsheet with new dhx.Spreadsheet("spreadsheet")
  2. Call spreadsheet.load("path/to/file.csv", "csv") to fetch and parse the CSV data
  3. Chain .then() to execute code after the data has loaded

Key points​

  • Async loading: load() returns a Promise, so always use .then() for any code that depends on the loaded data being present
  • Default format: If the second parameter is omitted, load() defaults to "json" format, so "csv" must be specified explicitly

API reference​

  • load(): Loads data from an external file into the Spreadsheet.

Additional resources​