myliang/x-spreadsheet

x-spreadsheet is a web-based spreadsheet written in JavaScript. It runs in the browser and gives a page something that looks and behaves like an Excel or Google Sheets grid, with rows, columns, cell editing, and a toolbar. The project description notes that work has moved to a successor called @wolf-table/table, so this repository is the older codebase. You can add it to a page in two ways. One is to load the CSS and JS files from a CDN link and call a single function on a div. The other is to install the package from npm under the name x-data-spreadsheet, then import it and create a new Spreadsheet attached to a div in your HTML. Once created, you can call loadData to fill the grid and listen for a change event to save edits back to your own database. The README lists a default options object you can override. It covers things like edit or read mode, whether the toolbar and grid lines show, the starting number of rows and columns, default row height and column width, and a style block for background color, alignment, font name, font size, bold, italic, and text color. There are also methods to read or set the text of a specific cell, read a cell's style, and bind events for when a cell is selected or edited. The features list in the README covers undo and redo, paint and clear format, font controls, text and fill color, borders, merge cells, alignment, text wrapping, freeze cell, functions, row and column resizing, copy and paste, autofill, insert and delete rows or columns, hiding rows or columns, multiple sheets, print, and data validations. Import and export of xlsx files is handled through a separate SheetJS demo that the README links to. The project supports internationalization through a locale system, with a Chinese translation shipped in the package. To work on it locally, you clone the repository, run npm install, then npm run dev and open a local address in your browser. It targets modern browsers such as Chrome, Firefox, and Safari, and is released under the MIT license.