Spreadsheet Cell Editors
Introduction to editors
The Jspreadsheet editors aim to improve the user experience and provide a comprehensive data management tool for any application. It offers various built-in editors; developers can design or include plugins to create customized data editors. Currently, the following native editors are available:
- text;
- numeric;
- hidden;
- dropdown;
- checkbox;
- radio;
- calendar;
- image;
- color;
- email;
- url;
- progressbar;
- rating;
- autonumber;
- HTML;
- percent;
- notes;
Native editors
The type property can be used to declare the editor at the column or cell levels. When you have both columns and cells, the editor declared in the cell level will overwrite the first.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<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>
jspreadsheet.setLicense('MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [5,5],
columns: [
{ type: 'text' }
],
cells: {
A1: { type: 'dropdown', source: ['Male','Female'] }
}
}]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const spreadsheet = useRef();
const columns = [
{ type: 'text' }
];
const cells = {
A1: { type: 'dropdown', source: ['Male','Female'] }
};
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet columns={columns} cells={cells} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :columns="columns" :cells="cells" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
const columns = [
{ type: 'text' }
];
const cells = {
A1: { type: 'dropdown', source: ['Male','Female'] }
};
return {
cells,
columns,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
minDimensions: [5,5],
columns: [
{ type: 'text' }
],
cells: {
A1: { type: 'dropdown', source: ['Male','Female'] }
}
}]
});
}
}
Custom editors
Customizing cell data entry using custom editors can enhance the user experience and data collection in your data grid. A custom editor is defined as a JS object with several methods described below.
Method |
Description |
createCell |
When a new cell is created.
createCell(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object) : void |
updateCell |
When the cell value changes.
updateCell(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object) : void |
openEditor |
When the user starts editing a cell.
openEditor(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object) : void |
closeEditor |
When the user finalizes the edit of a cell.
closeEditor(cell: Object, confirmChanges: Boolean, x: Number, y: Number, instance: Object, options: Object) : void |
destroyCell |
When a cell is destroyed.
destroyCell(cell: Object, x: Number, y: Number, instance: Object) : void |
get |
Transform the raw data into processed data. It will show text instead of an id in the type dropdown, for example.
get(options: Object, value: Any) : Any |
Methods Example


<div id="spreadsheet"></div>
<script>
const Editor = {
updateCell: function(cell, value, x, y, instance) {
value = Number(value) || 0;
if (cell) {
cell.innerText = value + '%';
}
return value / 100;
},
createCell: function(cell, value, x, y, instance) {
value = Number(value) || 0;
if (cell) {
cell.innerText = value + '%';
}
return value / 100;
},
openEditor: function(cell, value, x, y, instance) {
instance.parent.input.onblur = function() {
instance.closeEditor(cell, true);
};
if (value) {
instance.parent.input.innerText = (Number(value)) * 100;
}
jSuites.focus(instance.parent.input);
},
closeEditor: function(cell, save, x, y, instance) {
let value;
if (save) {
value = Number(instance.parent.input.innerText);
} else {
value = '';
}
return value;
},
get: function(options, val) {
return (val * 100) + '%';
}
}
const data = [
['PHP', '1'],
['Javascript', '0.4'],
];
jspreadsheet.setLicense('MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet(document.getElementById('spreadsheet'), {
data: data,
columns: [
{
type: 'text',
title: 'Course Title',
width: '300px'
},
{
type: Editor,
title: 'Percent',
width: '200px'
},
]
});
</script>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import { createRoot } from "react-dom/client";
import Switch from "@mui/material/Switch";
const license = 'MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
const Editor = {
createCell: (cell, value, x, y, instance, options) => {
let o = { ...options, defaultChecked: !!value };
delete o.type;
const onChange = function(event, newValue) {
instance.setValue(cell, newValue);
}
createRoot(cell).render(<Switch {...o} onChange={onChange} />);
},
updateCell: (cell, value) => {
let input = cell.querySelector('input');
input.checked = !! value;
},
openEditor: (cell, value, x, y, instance) => {
instance.setValue(cell, !value);
return false;
},
closeEditor: () => {
return false;
}
}
export default function App() {
const spreadsheet = useRef();
const data = [[true]],
columns: [
{
type: Editor,
color: "warning",
}
];
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet data={data} columns={columns} />
</Spreadsheet>
);
}
Examples
Native editors
Basic example using multiple different editors.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<script>
jspreadsheet.setLicense('MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: [
['Jazz', 'Honda', '2019-02-12', '/templates/default/img/nophoto.jpg', true, 2000.00, '#777700'],
['Civic', 'Honda', '2018-07-11', '/templates/default/img/nophoto.jpg', true, 4000.01, '#007777'],
],
filters: true,
columns: [
{
type:'text',
title:'Car',
width:120
},
{
type: 'dropdown',
title:'Make',
width:180,
source:[
"Alfa Romeo",
"Audi",
"Bmw",
"Chevrolet",
"Chrysler",
"Dodge",
"Ferrari",
"Fiat",
"Ford",
"Honda",
"Hyundai",
"Jaguar",
"Jeep",
"Kia",
"Mazda",
"Mercedes-Benz",
"Mitsubishi",
"Nissan",
"Peugeot",
"Porsche",
"Subaru",
"Suzuki",
"Toyota",
"Volkswagen"
]
},
{
type: 'calendar',
title:'Available',
width:120,
options:{ format:'DD/MM/YYYY' }
},
{
type: 'image',
title:'Photo',
width:120
},
{
type: 'checkbox',
title:'Stock',
width:80
},
{
type: 'text',
title:'Price',
mask:'$ #.##0,00',
width:100,
decimal:',',
disabledMaskOnEdition: true
},
{
type: 'color',
width:100,
render:'square',
},
]
}],
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const spreadsheet = useRef();
const data = [
['Jazz', 'Honda', '2019-02-12', '/templates/default/img/nophoto.jpg', true, 2000.00, '#777700'],
['Civic', 'Honda', '2018-07-11', '/templates/default/img/nophoto.jpg', true, 4000.01, '#007777'],
];
const columns = [
{
type:'text',
title:'Car',
width:120
},
{
type: 'dropdown',
title:'Make',
width:180,
source:[
"Alfa Romeo",
"Audi",
"Bmw",
"Chevrolet",
]
},
{
type: 'calendar',
title:'Available',
width:120,
options:{ format:'DD/MM/YYYY' }
},
{
type: 'image',
title:'Photo',
width:120
},
{
type: 'checkbox',
title:'Stock',
width:80
},
{
type: 'text',
title:'Price',
mask:'$ #.##0,00',
width:100,
decimal:',',
disabledMaskOnEdition: true
},
{
type: 'color',
width:100,
render:'square',
},
];
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet data={data} columns={columns} filters />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" :columns="columns" :filters="true" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
const data = [
['Jazz', 'Honda', '2019-02-12', '/templates/default/img/nophoto.jpg', true, 2000.00, '#777700'],
['Civic', 'Honda', '2018-07-11', '/templates/default/img/nophoto.jpg', true, 4000.01, '#007777'],
];
const columns = [
{
type:'text',
title:'Car',
width:120
},
{
type: 'dropdown',
title:'Make',
width:180,
source:[
"Alfa Romeo",
"Audi",
"Bmw",
"Chevrolet",
]
},
{
type: 'calendar',
title:'Available',
width:120,
options:{ format:'DD/MM/YYYY' }
},
{
type: 'image',
title:'Photo',
width:120
},
{
type: 'checkbox',
title:'Stock',
width:80
},
{
type: 'text',
title:'Price',
mask:'$ #.##0,00',
width:100,
decimal:',',
disabledMaskOnEdition: true
},
{
type: 'color',
width:100,
render:'square',
},
];
return {
data,
columns,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
['Jazz', 'Honda', '2019-02-12', '/templates/default/img/nophoto.jpg', true, 2000.00, '#777700'],
['Civic', 'Honda', '2018-07-11', '/templates/default/img/nophoto.jpg', true, 4000.01, '#007777'],
],
filters: true,
columns: [
{
type:'text',
title:'Car',
width:120
},
{
type: 'dropdown',
title:'Make',
width:180,
source:[
"Alfa Romeo",
"Audi",
"Bmw",
"Chevrolet",
"Chrysler",
"Dodge",
"Ferrari",
"Fiat",
"Ford",
"Honda",
"Hyundai",
"Jaguar",
"Jeep",
"Kia",
"Mazda",
"Mercedes-Benz",
"Mitsubishi",
"Nissan",
"Peugeot",
"Porsche",
"Subaru",
"Suzuki",
"Toyota",
"Volkswagen"
]
},
{
type: 'calendar',
title:'Available',
width:120,
options:{ format:'DD/MM/YYYY' }
},
{
type: 'image',
title:'Photo',
width:120
},
{
type: 'checkbox',
title:'Stock',
width:80
},
{
type: 'text',
title:'Price',
mask:'$ #.##0,00',
width:100,
decimal:',',
disabledMaskOnEdition: true
},
{
type: 'color',
width:100,
render:'square',
},
]
}]
});
}
}
Action button
Create a edit button in a cell.
|
---|
1 | Google | starstarstarstarstar | search |
2 | Bing | starstarstarstar | search |
3 | Yahoo | star | search |
4 | Duckduckgo | starstarstarstarstar | search |
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<script>
let action = function() {
let methods = {};
methods.createCell = function(cell, value, x, y, instance, options) {
let input = document.createElement('i');
input.className = 'material-icons';
input.style.cursor = 'pointer';
input.style.fontSize = '22px';
input.innerHTML = "search";
input.onclick = function() {
let id = instance.getRowId(y);
alert(id);
}
cell.appendChild(input);
}
return methods;
}();
jspreadsheet.setLicense('MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: [
{ id:'1', data:['Google', '5', ''] },
{ id:'2', data:['Bing', '4', ''] },
{ id:'3', data:['Yahoo', '1', ''] },
{ id:'4', data:['Duckduckgo', '5', ''] },
],
columns: [
{ type: 'text', width:'400px' },
{ type: 'rating', width:'100px' },
{ type: action, width:'100px', readOnly: true },
]
}]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
const Action = function() {
let methods = {};
methods.createCell = (cell, value, x, y, instance, options) => {
let input = document.createElement('i');
input.className = 'material-icons';
input.style.cursor = 'pointer';
input.style.fontSize = '22px';
input.innerHTML = "search";
input.onclick = function() {
alert(instance.getRowId(y));
}
cell.appendChild(input);
}
return methods;
}();
export default function App() {
const spreadsheet = useRef();
const data = [
{ id:'1', data:['Google', '5', ''] },
{ id:'2', data:['Bing', '4', ''] },
{ id:'3', data:['Yahoo', '1', ''] },
{ id:'4', data:['Duckduckgo', '5', ''] },
]
const columns = [
{ type: 'text', width:'400px' },
{ type: 'rating', width:'100px' },
{ type: Action, width:'100px', readOnly: true },
];
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet columns={columns} cells={cells} filters />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" :columns="columns" filters />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
const Action = function() {
let methods = {};
methods.createCell = (cell, value, x, y, instance, options) => {
let input = document.createElement('i');
input.className = 'material-icons';
input.style.cursor = 'pointer';
input.style.fontSize = '22px';
input.innerHTML = "search";
input.onclick = function() {
alert(instance.getRowId(y));
}
cell.appendChild(input);
}
return methods;
}();
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
const data = [
{ id:'1', data:['Google', '5', ''] },
{ id:'2', data:['Bing', '4', ''] },
{ id:'3', data:['Yahoo', '1', ''] },
{ id:'4', data:['Duckduckgo', '5', ''] },
]
const columns = [
{ type: 'text', width:'400px' },
{ type: 'rating', width:'100px' },
{ type: Action, width:'100px', readOnly: true },
];
return {
data,
columns,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('MDc3ZDQ0ODFkYzk2Nzc1YjZhZTNjMmQ3Yjc0YzYxMGU1MTA3Zjc3NzQ4YmExMWVjY2Y5ZDM2ZDA4Yjc1ODgxM2U0NTA2Zjc0YjY1YjdiNTQ0YjQzNDA0NWNmYTg5Y2FjYWE5ODBlOTAwMDBjOWZlY2Y0NDEwYjAxMTZiOTExZmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9UQXlNRGMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
const Action = function() {
let methods = {};
methods.createCell = (cell, value, x, y, instance, options) => {
let input = document.createElement('i');
input.className = 'material-icons';
input.style.cursor = 'pointer';
input.style.fontSize = '22px';
input.innerHTML = "search";
input.onclick = function() {
alert(instance.getRowId(y));
}
cell.appendChild(input);
}
return methods;
}();
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
{ id:'1', data:['Google', '5', ''] },
{ id:'2', data:['Bing', '4', ''] },
{ id:'3', data:['Yahoo', '1', ''] },
{ id:'4', data:['Duckduckgo', '5', ''] },
],
columns: [
{ type: 'text', width:'400px' },
{ type: 'rating', width:'100px' },
{ type: action, width:'100px', readOnly: true },
]
}]
});
}
}