A Web-Based Spreadsheet In Pure JavaScript | x-spreadsheet

JavaScript Spreadsheet Libraryx-spreadsheet is a pure JS library used to create an Excel-style spreadsheet and Google Sheets for the web.


  • Undo & Redo
  • Paint format
  • Clear format
  • Format
  • Font
  • Font size
  • Font bold
  • Font italic
  • Underline
  • Strike
  • Text color
  • Fill color
  • Borders
  • Merge cells
  • Align
  • Text wrapping
  • Freeze cell
  • Functions
  • Resize row height, col-width
  • Copy, Cut, and Paste
  • Autofill
  • Insert row, column
  • Delete row, column
  • hide a row, column
  • multiple sheets
  • print
  • Data validations

Must Read: Quick Spreadsheet/CSV Viewer in Vanilla JavaScript | Heihō

How to make use of it:

Install & download the x-spreadsheet.

$ npm install x-data-spreadsheet --save

Import the Spreadsheet module.

import Spreadsheet from 'x-data-spreadsheet';

Load the JavaScript & CSS files from a CDN.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/xspreadsheet.css" />
<script src="https://unpkg.com/[email protected]/dist/xspreadsheet.js"></script>

Create a container component to hold the spreadsheet.

<div id="demo"></div>

Prepare your information to be loaded within the spreadsheet.

const myData = [{
      name: 'sheet-test-1',
      freeze: 'B3',
      styles: [
          bgcolor: '#f4f5f8',
          textwrap: true,
          color: '#900b09',
          border: {
            top: ['thin', '#0366d6'],
            bottom: ['thin', '#0366d6'],
            right: ['thin', '#0366d6'],
            left: ['thin', '#0366d6'],
      merges: [
      rows: {
        1: {
          cells: {
            0: { text: 'testingtesttestetst' },
            2: { text: 'testing' },
        2: {
          cells: {
            0: { text: 'render', style: 0 },
            1: { text: 'Hello' },
            2: { text: 'haha', merge: [1, 1] },
        8: {
          cells: {
            8: { text: 'border test', style: 0 },
    { name: 'sheet-test' }

Create a new spreadsheet within the container component you created.

const mySpreadSheet = new Spreadsheet(document.getElementById('demo')).loadData(myData);

Save the data after modification.

mySpreadSheet.change(data => {
  // save data to db

Validate the info.


Possible choices. Override the default values and go to the options object because the second parameter to the Spreadsheet function.

const mySpreadSheet = new Spreadsheet(document.getElementById('demo'),{
        mode: 'edit', // edit | read
        showToolbar: true,
        showGrid: true,
        showContextmenu: true,
        view: {
          height: () => document.documentElement.clientHeight,
          width: () => document.documentElement.clientWidth,
        row: {
          len: 100,
          height: 25,
        col: {
          len: 26,
          width: 100,
          indexWidth: 60,
          minWidth: 60,
        style: {
          bgcolor: '#ffffff',
          align: 'left',
          valign: 'middle',
          textwrap: false,
          strike: false,
          underline: false,
          color: '#0a0a0a',
          font: {
            name: 'Helvetica',
            size: 10,
            bold: false,
            italic: false,

Event handlers.

// fired after selected
mySpreadSheet.on('cell-selected', (cell, ri, ci) => {});
mySpreadSheet.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
// fired after edited
mySpreadSheet.on('cell-edited', (text, ri, ci) => {});

See Demo And Download


Official Website(myliang): Click Here

This superior jQuery/javascript plugin is developed by myliang. For extra advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…

Leave a Reply

Your email address will not be published. Required fields are marked *