Press "Enter" to skip to content

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.

javascript spreadsheet free, javascript spreadsheet with formulas, html spreadsheet, javascript create spreadsheet, spreadsheet js, jexcel documentation, css spreadsheet

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 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/x-data-spreadsheet@latest/dist/xspreadsheet.css" />
<script src="https://unpkg.com/x-data-spreadsheet@latest/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 modified.

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

Validate the info.

mySpreadSheet.validate();

Possible choices. Override the default values and go 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) => {});

Spreadsheet Web App In Pure JavaScript, copy google spreadsheet, javascript spreadsheet Plugin/GitHub


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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.