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