Spreadsheet Web App In Pure JavaScript – x-spreadsheet

Category: Javascript , Recommended | April 3, 2020
Author: myliang
Views Total: 1,018
Official Page: Go to website
Last Update: April 3, 2020
License: MIT

Preview:

Spreadsheet Web App In Pure JavaScript – x-spreadsheet

Description:

x-spreadsheet is a pure JavaScript library used to generate an Excel & Google Sheets style spreadsheet for the web.

Features:

  • Undo/redo
  • Paint/clear format
  • Text format
  • Font family
  • Font size
  • Bold
  • Italic
  • Strikethrough
  • Text color
  • Fill color
  • Borders
  • Alignment
  • Text wrapping
  • Freeze cell
  • Functions: Sum, Average, Max, Min, and Concat.
  • Insert/delete cells, rows & columns.

How to use it:

Install & download the x-spreadsheet.

# NPM
$ npm install x-data-spreadsheet --save

Import the Spreadsheet module.

import Spreadsheet from 'x-data-spreadsheet';

Or 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 element to hold the spreadsheet.

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

Prepare your data to be loaded in 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 in the container element you created.

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

Save the data after changed.

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

Validate the data.

mySpreadSheet.validate();

Possible options. Override the default values and pass the options object as 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) => {});

Changelog:

v1.0.36 (04/03/2020)

  • Bugs fixed
  • Supports setting multiple borders

v1.0.33 (03/19/2020)

  • Bugs fixed
  • Support readonly mode
  • Doc update

v1.0.29 (03/12/2020)

  • Allow to hide column/row
  • Adaptive context menu
  • draw.js txt => ${txt}

v1.0.29 (02/25/2020)

  • Support for multiple sheet

v1.0.28 (02/18/2020)

  • Supports print

v1.0.25 (02/06/2020)

  • Supports alt + enter
  • Supports data copy

v1.0.24 (07/27/2019)

  • scrollbar bugfix in macos

v1.0.14 (04/10/2019)

  • bugfix

v1.0.12 (03/31/2019)

  • bugfix

v1.0.9 (03/08/2019)

  • bugfix

v1.0.4 (02/11/2019)

  • if the width of the line is an odd number of pixels, draw n.5 else n.0

v1.0.2 (01/31/2019)

  • firefox mousewheel bug

You Might Be Interested In:


Leave a Reply