Getting Started with Jspreadsheet CE v5

Overview

Jspreadsheet CE, formerly jExcel, is a free, lightweight JavaScript spreadsheet library to help developers bring Excel-like data grids and spreadsheet features to their applications. The library enables developers to build robust data management interfaces using React, Angular or pure JavaScript.

Why Choose Jspreadsheet CE?

Create rich, interactive data grid interfaces
Handle complex data inputs with Excel-like functionality
Direct Excel compatibility: Copy and paste using standard shortcuts
Proven success across thousands of implementations
Lightweight, fast, and intuitive
Easy integration with third-party plugins
Built for collaboration and sharing

Installation

Choose one of the following installation options:

NPM

Install jspreadsheet using NPM:

npm install jspreadsheet-ce@5.0.0-beta.3

CDN

Include jspreadsheet directly from JSDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce@5.0.0-beta.3/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce@5.0.0-beta.3/dist/jspreadsheet.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />

Download

Download and run jspreadsheet on your server or local machine:

https://bossanova.uk/jspreadsheet/v5/jspreadsheet.zip

License

This software is distributed under the MIT license.

Documentation

Global methods and properties

Method Description
Create a new spreadsheet. `jspreadsheet(element: HTMLDivElement \| HTMLTableElement, options: SpreadsheetOptions): WorksheetInstance[];`
Destroy a given spreadsheet. `jspreadsheet.destroy(element: JspreadsheetInstanceElement, destroyEventHandlers?: boolean): void;`
Destroy all spreadsheets in all namespaces. `jspreadsheet.destroyAll(): void;`
Translate Jspreadsheet components and extensions. `jspreadsheet.setDictionary(translations: Record<string, string>): void;`
Get a worksheet instance by name and namespace. `jspreadsheet.getWorksheetInstanceByName(worksheetName: string \| null \| undefined, namespace: string): WorksheetInstance \| Record<string, WorksheetInstance>;`

Examples

Create a new data grid

You can create a new data grid with spreadsheet-like controls from an HTML table element, a JS array, a CSV, a JSON file or an Excel XLSX file.

<html>
<script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id='spreadsheet'></div>

<script>
// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,6],
    }]
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/style.css";

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet minDimensions={[6,6]} />
            </Spreadsheet>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :minDimensions="[6,6]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

export default {
    components: {
        Spreadsheet,
        Worksheet,
    }
};
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";

import "jspreadsheet-ce/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [
                minDimensions: [6,6]
            }]
        });
    }
}

Destroying The Data Grid

The following example shows how to dynamically destroy and recreate a new data grid.

<html>
<script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id='jspreadsheet'></div>

<p><input type='button' value='Destroy' id="btn1" /> <input type='button' value='Create' id="btn2" /></p>

<script>
// Create a new spreadsheet
let create = function() {
    if (document.getElementById('jspreadsheet').spreadsheet) {
        destroy();
    }

    jspreadsheet(document.getElementById('jspreadsheet'), {
    	worksheets: [ { minDimensions:[5,5] } ]
    });
}

// Destroy the spreadsheet
let destroy = function() {
    jspreadsheet.destroy(document.getElementById('jspreadsheet'));
}

// Create the spreadsheet
jspreadsheet(document.getElementById('jspreadsheet'), {
    worksheets: [{
        minDimensions: [5,5],
    }]
});

document.getElementById("btn1").onclick = () => destroy()
document.getElementById("btn2").onclick = () => create()
</script>
</html>

import React, { useRef, useEffect } from "react";
import { jspreadsheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    const instance = useRef();

		const destroy = function() {
  	      jspreadsheet.destroy(spreadsheet.current);
		}

		const create = function() {
  	      if (instance.current) {
  	          destroy();
  	      }
	
  	      jspreadsheet(spreadsheet.current, {
  	          worksheets: [ { minDimensions:[5,5] } ]
  	      });
		}

    useEffect(() => {
        if (!instance.current && spreadsheet.current) {
            instance.current = jspreadsheet(spreadsheet.current, {
                worksheets: [ { minDimensions:[5,5] } ]
            })
        }
    }, [])

    // Render component
    return (
        <>
            <div ref={spreadsheet}></div>
						<button onClick={destroy}>Destroy</button>
						<button onClick={create}>Create</button>
        </>
    );
}

<template>
  <div>
    <div ref="spreadsheet"></div>
    <button @click="destroy">Destroy</button>
    <button @click="create">Create</button>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { jspreadsheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

export default {
  name: "App",
  setup() {
    const spreadsheet = ref(null);
    let instance = null;

    const destroy = () => {
      if (instance) {
        jspreadsheet.destroy(spreadsheet.value);
        instance = null;
      }
    };

    const create = () => {
      if (instance) {
        destroy();
      }
      instance = jspreadsheet(spreadsheet.value, {
        worksheets: [{ minDimensions: [5, 5] }],
      });
    };

    onMounted(() => {
      if (!instance && spreadsheet.value) {
        instance = jspreadsheet(spreadsheet.value, {
          worksheets: [{ minDimensions: [5, 5] }],
        });
      }
    });

    return {
      spreadsheet,
      destroy,
      create,
    };
  },
};
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";

import "jspreadsheet-ce/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

@Component({
    standalone: true,
    selector: "app-spreadsheet",
    template: `
        <div #spreadsheet id="jspreadsheet"></div>
        <p>
            <button (click)="destroy()">Destroy</button>
            <button (click)="create()">Create</button>
        </p>
    `,
})
export class SpreadsheetComponent {
    @ViewChild("spreadsheet") spreadsheetRef: ElementRef;
    worksheets: jspreadsheet.worksheetInstance[];

    ngAfterViewInit() {
        this.initialCreate();
    }

    initialCreate() {
        this.worksheets = jspreadsheet(this.spreadsheetRef.nativeElement, {
            worksheets: [{
                minDimensions: [5, 5]
            }]
        });
    }

    create() {
        if (this.spreadsheetRef.nativeElement.spreadsheet) {
            this.destroy();
        }

        this.worksheets = jspreadsheet(this.spreadsheetRef.nativeElement, {
            worksheets: [{
                minDimensions: [5, 5]
            }]
        });
    }

    destroy() {
        jspreadsheet.destroy(this.spreadsheetRef.nativeElement);
    }
}

Edit this page on GitHub