A Web-Based Spreadsheet In Pure JavaScript

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

Features

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
$ 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: [
        'C3:D4',
      ],
      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.

mySpreadSheet.validate();

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) => {});