Guide · Open source

How to use x-spreadsheet: install, load data and edit cells

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

x-spreadsheet is an MIT-licensed JavaScript component that places an interactive spreadsheet grid inside a web page. It is built for developers who want an Excel-like editing area in their own app rather than a standalone spreadsheet. This guide shows you how to install it, create a grid, load and update cell data, listen for edits and find the features it supports.

x-spreadsheetmyliang/x-spreadsheet · ★ 14.6k · MIT Install options & downloads

Quick start

1Install the package. Run npm install x-data-spreadsheet in your project. Confirm you have a Node.js version your project supports, since the README does not state one.
2Add a container. Place an empty div with an id in your HTML page where the grid should appear.
3Create the spreadsheet. Import Spreadsheet and call new Spreadsheet with your container selector, then chain loadData with your data.
4Save changes. Use the change callback or the cell-edited event to send edited data to your storage.
5Update cells in code. Call cellText with row, column and text, then reRender to refresh the grid.
6Adjust options. Pass an options object to set mode, toolbar and grid visibility, or default sizes and fonts.

What x-spreadsheet is and who it is for

x-spreadsheet is a web-based JavaScript spreadsheet. You place it in a page, load data into it, and users can edit cells, format them and use common spreadsheet features.

It suits web developers building a spreadsheet-style editor into their own application, and teams building internal tools that need cell editing, formulas or data entry in the browser. It is a component for developers, not an application you can open and use on its own.

Install x-spreadsheet with npm or a CDN

The README gives two routes. For a project using a package manager, install the npm package. The README does not state a required Node.js version, so check your project's own setup before installing.

To use it without a build step, the README shows CDN links to the CSS and JavaScript files hosted on unpkg.

npm install x-data-spreadsheet

Create a spreadsheet on your page

Add an empty container element to your HTML, then import the library and create a spreadsheet pointed at that element. The README's example passes a CSS selector string, and calling loadData with an empty object starts you with a blank sheet.

The README also shows a CDN version that calls x_spreadsheet on a selector, which is useful for quick tests.

Add a div with an id, for example x-spreadsheet-demo.
Import Spreadsheet from x-data-spreadsheet.
Create it with new Spreadsheet on the selector.

import Spreadsheet from "x-data-spreadsheet";
const s = new Spreadsheet("#x-spreadsheet-demo")
  .loadData({})
  .change(data => {
    // save data to db
  });

Set options and default layout

You can override the defaults by passing an options object as the second argument. The README lists the defaults, including edit mode, toolbar and grid visibility, the number of rows and columns, and default font and style values.

Two useful settings are mode, which is edit or read, and showToolbar. Set them when you want a view-only grid or a grid without the toolbar.

mode: 'edit' or 'read'
showToolbar and showGrid: true by default
row.len defaults to 100 and col.len defaults to 26
style.font defaults to Helvetica at size 10

const options = {};
new Spreadsheet('#x-spreadsheet-demo', options);

Read, update and listen to cells

Once the grid exists, you can change text in a cell by row and column index, read a cell or its style, and reRender to show the changes. Indexes are zero-based row and column numbers, and the optional sheetIndex defaults to 0.

To react to user actions, bind events. The README documents cell-selected, cells-selected and cell-edited. Use cell-edited to save changes, or the change callback shown earlier to receive the data.

cellText(ri, ci, text, sheetIndex) sets text, then call reRender().
cell(ri, ci) and cellStyle(ri, ci) read values.
on('cell-edited', handler) fires after a user edits a cell.

const s = new Spreadsheet("#x-spreadsheet-demo")
s.on('cell-edited', (text, ri, ci) => {});
s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();

Import and export xlsx files

The README does not describe xlsx import or export inside x-spreadsheet itself. It links to a SheetJS demo for x-spreadsheet that covers saving data. Follow that demo if you need Excel file support, and note that the README only points to it.

It also states that data validation is available through a validate call on the instance.

Change the language of the interface

The README shows how to load a locale file. In an npm project you import the locale and call Spreadsheet.locale with it. The README's example uses the zh-cn locale, and the CDN version calls x_spreadsheet.locale on a loaded locale script.

Spreadsheet.locale('zh-cn', zhCN);

What people use it for

Adding an editable grid for data entry inside a internal admin tool
Letting users edit a table of records in a web app with formatting and formulas
Building a read-only grid by setting mode to read
Creating a multi-sheet view using the sheet index argument on cell methods

Frequently asked questions

How do I install x-spreadsheet?

Run npm install x-data-spreadsheet in your project, then import Spreadsheet from x-data-spreadsheet. The README also offers CDN links to the CSS and JavaScript files if you do not use a package manager.

Is x-spreadsheet free to use?

Yes, the project is licensed under MIT, as stated in the README. Check the license file in the repository for the full terms.

Does x-spreadsheet support xlsx import and export?

The README does not build this in. It links to a SheetJS demo for x-spreadsheet that shows how to save data, so use that demo as your starting point.

Is x-spreadsheet still maintained?

The project description says it has migrated to @wolf-table/table, and the last push was in August 2024. Consider that project before starting something new on x-spreadsheet.

What are the alternatives to x-spreadsheet?

Projects often compared with it include SheetJS, Handsontable, Luckysheet and jExcel. Compare their features, licences and maintenance status against your own requirements.

Can x-spreadsheet handle very large datasets?

The README says nothing about performance at scale, so test with your own data volume before relying on it for large or calculation-heavy sheets.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

x-spreadsheet suits developers who want a spreadsheet-style editing grid inside their own browser app, and it is MIT licensed with a small API. It is a poor fit if you need a ready-made spreadsheet app, very large datasets, or a project under active maintenance, since the project description points to @wolf-table/table as its successor.

Install options & downloads