The Spreadsheet Clipboard
The Jspreadsheet clipboard feature allows for copying formats, styles, and automatic formula updates between Data Grids. It supports data overwriting during paste actions and includes customization options and events, as discussed in this section.
Documentation
Clipboard Management Methods
These methods are designed to assist with clipboard operations within the data grid.
Method | Description |
---|---|
copy | Copy the selected cells @param {boolean} Clear the data before pasting. copy(cut: Boolean) => void |
paste | Paste the data to the current cursor positionpaste(x: Number, y: Number, data: String|String[[]]) => void |
Clipboard Operation Events
These events are triggered during clipboard interactions involving spreadsheet data.
Event | Description |
---|---|
oncopy | oncopy(worksheet: Object, highlighted: Number[], str: String, cut: Boolean) The data copied to the clipboard. |
onbeforepaste | onbeforepaste(worksheet: Object, data: Array, x: Number, y: Number, properties: Object[]) It occurs before pasting data into the spreadsheet, allowing interception or modification. |
onpaste | onpaste(worksheet: Object, records: []) After the paste action. |
Upgrades on Version 11
In Version 11, the
onbeforepaste
andonpaste
events were updated. These methods now handle arrays of objects when pasting occurs from another spreadsheet and arrays of data when pasting is from an external source.
Examples
Overwrite Copied Data
Developers can use this method to overwrite what has been copied.
Intercept Pasted Data
Cancel the Paste Action
The example below cancels the user's paste action.
<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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('YmUxYTE1NjUyMTUzMDJjYjc4ODNmMjQyZGE4MDlmYjU2MWQxYmEwZDBmMjc5MzNhNzQ0YTBlZDIxNzA5YjQ1Mjc5YjliYzEzMzRjYzU1M2U4YzcyOWViZmZlYzQzYWQwYzZjNDFlMTFhODk2MmNjMTJiZWE0NjczZTVkNGUwY2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
]
}],
onbeforepaste: function() {
alert('Not allowed to paste');
return false;
}
});
</script>
</html>
import React, {useRef} from "react";
import {Spreadsheet, Worksheet} from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YmUxYTE1NjUyMTUzMDJjYjc4ODNmMjQyZGE4MDlmYjU2MWQxYmEwZDBmMjc5MzNhNzQ0YTBlZDIxNzA5YjQ1Mjc5YjliYzEzMzRjYzU1M2U4YzcyOWViZmZlYzQzYWQwYzZjNDFlMTFhODk2MmNjMTJiZWE0NjczZTVkNGUwY2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Data
const data = [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
];
const onbeforepaste = function () {
alert('Not allowed to paste');
return false;
}
// Render data grid component
return (
<Spreadsheet ref={spreadsheet} license={license} onbeforepaste={onbeforepaste}>
<Worksheet data={data}/>
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" :onbeforepaste="onbeforepaste">
<Worksheet :data="data" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YmUxYTE1NjUyMTUzMDJjYjc4ODNmMjQyZGE4MDlmYjU2MWQxYmEwZDBmMjc5MzNhNzQ0YTBlZDIxNzA5YjQ1Mjc5YjliYzEzMzRjYzU1M2U4YzcyOWViZmZlYzQzYWQwYzZjNDFlMTFhODk2MmNjMTJiZWE0NjczZTVkNGUwY2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
// Data
const data = [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
];
const onbeforepaste = function() {
alert('Not allowed to paste');
return false;
}
return {
data,
onbeforepaste,
license,
}
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmUxYTE1NjUyMTUzMDJjYjc4ODNmMjQyZGE4MDlmYjU2MWQxYmEwZDBmMjc5MzNhNzQ0YTBlZDIxNzA5YjQ1Mjc5YjliYzEzMzRjYzU1M2U4YzcyOWViZmZlYzQzYWQwYzZjNDFlMTFhODk2MmNjMTJiZWE0NjczZTVkNGUwY2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Create component
@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: [{
data: [
['Mazda', 2001, 2000],
['Peugeot', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
]
}],
onbeforepaste: function() {
alert('Not allowed to paste');
return false;
}
});
}
}
Copy Data Only
The example below removes styles and editor configurations from the pasted content, pasting only values into the cells.
<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [5,5],
data: [['A']],
cells: {
A1: { type: 'dropdown', source: ['A','B'] }
},
style: {
A1: 'background-color: red',
}
}],
onbeforepaste: function(worksheet, data) {
for (let j = 0; j < data.length; j++) {
for (let i = 0; i < data[j].length; i++) {
if (typeof data[j][i].options !== 'undefined') {
// Do not paste information about the editors
delete data[j][i].options;
}
if (typeof data[j][i].style !== 'undefined') {
// Do not paste style
delete data[j][i].style;
}
}
}
}
});
</script>
</html>
import React, {useRef} from "content/docs/react";
import {Spreadsheet, Worksheet, jspreadsheet} from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
jspreadsheet.setLicense('YmUxYTE1NjUyMTUzMDJjYjc4ODNmMjQyZGE4MDlmYjU2MWQxYmEwZDBmMjc5MzNhNzQ0YTBlZDIxNzA5YjQ1Mjc5YjliYzEzMzRjYzU1M2U4YzcyOWViZmZlYzQzYWQwYzZjNDFlMTFhODk2MmNjMTJiZWE0NjczZTVkNGUwY2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Data
const data = [['A']];
const cells = {
A1: { type: 'dropdown', source: ['A','B'] }
}
const style = {
A1: 'background-color: red',
}
const onbeforepaste = (worksheet, data) => {
for (let j = 0; j < data.length; j++) {
for (let i = 0; i < data[j].length; i++) {
if (typeof data[j][i].options !== 'undefined') {
// Do not paste information about the editors
delete data[j][i].options;
}
if (typeof data[j][i].style !== 'undefined') {
// Do not paste style
delete data[j][i].style;
}
}
}
}
// Render data grid component
return (
<Spreadsheet ref={spreadsheet} onbeforepaste={onbeforepaste}>
<Worksheet data={data} cells={cells} style={style} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :onbeforepaste="onbeforepaste">
<Worksheet :data="data" :cells="cells" :style="style" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
jspreadsheet.setLicense('YmUxYTE1NjUyMTUzMDJjYjc4ODNmMjQyZGE4MDlmYjU2MWQxYmEwZDBmMjc5MzNhNzQ0YTBlZDIxNzA5YjQ1Mjc5YjliYzEzMzRjYzU1M2U4YzcyOWViZmZlYzQzYWQwYzZjNDFlMTFhODk2MmNjMTJiZWE0NjczZTVkNGUwY2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
const data = [['A']];
const cells = {
A1: { type: 'dropdown', source: ['A','B'] }
}
const style = {
A1: 'background-color: red',
}
const onbeforepaste = function() {
alert('Not allowed to paste');
return false;
}
return {
data,
style,
cells,
onbeforepaste
}
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YmUxYTE1NjUyMTUzMDJjYjc4ODNmMjQyZGE4MDlmYjU2MWQxYmEwZDBmMjc5MzNhNzQ0YTBlZDIxNzA5YjQ1Mjc5YjliYzEzMzRjYzU1M2U4YzcyOWViZmZlYzQzYWQwYzZjNDFlMTFhODk2MmNjMTJiZWE0NjczZTVkNGUwY2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pOalE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Create component
@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: [5, 5],
data: [['A']],
cells: {
A1: { type: 'dropdown', source: ['A', 'B'] },
},
style: {
A1: 'background-color: red',
},
},
],
onbeforepaste: function (worksheet: any, data: any) {
for (let j = 0; j < data.length; j++) {
for (let i = 0; i < data[j].length; i++) {
if (typeof data[j][i].options !== 'undefined') {
// Do not paste information about the editors
delete data[j][i].options;
}
if (typeof data[j][i].style !== 'undefined') {
// Do not paste style
delete data[j][i].style;
}
}
}
return data;
},
});
}
}