Documentationkeyboard_arrow_rightClipboard

Spreadsheet Clipboard

The clipboard in Jspreadsheet enables you to copy and paste data between grids, including formats, styles, and formulas, with automatic updates. It also supports overwriting existing data on paste and provides configuration options and events to customize behavior.

What's New with Version 12

  • Pasting from external applications now preserves cell styles.
  • New Paste Special functionality to paste data or styles only.

Documentation

Clipboard Management Methods

The following methods handle clipboard operations in 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 position
paste(x: Number, y: Number, data: String|String[[]]) => void

Clipboard Operation Events

These events are fired during copy and paste actions in the spreadsheet.

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[], clipboard: Object) => false | Record<string, any>[][] | undefined;
It occurs before pasting data into the spreadsheet, allowing interception or modification.
onpaste onpaste(worksheet: Object, records: [])
After the paste action.

Clipboard Behavior

Settings

Starting in version 12, the default copy behavior places both data and formatting on the clipboard, allowing formatting to be copied to and from other spreadsheet software.

Property Description
fullCopy When true send data and style to the clipboard. Default: false
fullPaste When true bring data and style from the clipboard. Default: false

Examples

Overwriting Copied Data

You can use the clipboard API to intercept and replace the copied data before it goes to the clipboard.

<html> <script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v6/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ ['Product A', 100, 'Confidential'], ['Product B', 250, 'Internal Use'], ['Product C', 180, 'Public'], ['Product D', 320, 'Confidential'], ], columns: [ { title: "Product", width: 120 }, { title: "Price", width: 100 }, { title: "Status", width: 120 } ] }], oncopy: function(worksheet, highlighted, str, cut) { // Replace confidential data with placeholder text in the CSV string return str.replace(/Confidential/g, '[REDACTED]'); } }); </script> </html> 
import React, {useRef} from "react"; import { Spreadsheet, Worksheet,jspreadsheet } from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default function App() { const spreadsheet = useRef(); const data = [ ['Product A', 100, 'Confidential'], ['Product B', 250, 'Internal Use'], ['Product C', 180, 'Public'], ['Product D', 320, 'Confidential'], ]; const columns = [ { title: "Product", width: 120 }, { title: "Price", width: 100 }, { title: "Status", width: 120 } ]; const oncopy = function(worksheet, highlighted, str, cut) { // Replace confidential data with placeholder text in the CSV string return str.replace(/Confidential/g, '[REDACTED]'); }; return ( <Spreadsheet ref={spreadsheet} license={license} oncopy={oncopy}> <Worksheet data={data} columns={columns} /> </Spreadsheet> ); } 
<template> <Spreadsheet ref="spreadsheet" :oncopy="oncopy"> <Worksheet :data="data" :columns="columns" /> </Spreadsheet> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default { components: { Spreadsheet, Worksheet, }, data() { const data = [ ['Product A', 100, 'Confidential'], ['Product B', 250, 'Internal Use'], ['Product C', 180, 'Public'], ['Product D', 320, 'Confidential'], ]; const columns = [ { title: "Product", width: 120 }, { title: "Price", width: 100 }, { title: "Status", width: 120 } ]; const oncopy = function(worksheet, highlighted, str, cut) { // Replace confidential data with placeholder text in the CSV string return str.replace(/Confidential/g, '[REDACTED]'); }; return { data, columns, oncopy, license, }; } } </script> 
import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import "jspreadsheet/dist/jspreadsheet.css" import "jsuites/dist/jsuites.css" // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); @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() { this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [{ data: [ ['Product A', 100, 'Confidential'], ['Product B', 250, 'Internal Use'], ['Product C', 180, 'Public'], ['Product D', 320, 'Confidential'], ], columns: [ { title: "Product", width: 120 }, { title: "Price", width: 100 }, { title: "Status", width: 120 } ] }], oncopy: function(worksheet: any, highlighted: any, str: string, cut: boolean) { // Replace confidential data with placeholder text in the CSV string return str.replace(/Confidential/g, '[REDACTED]'); } }); } }

Cancelling a Paste Action

The following example demonstrates how to intercept a paste event and cancel the action before data is written into the grid.

<html> <script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v6/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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, jspreadsheet } from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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" :onbeforepaste="onbeforepaste"> <Worksheet :data="data" /> </Spreadsheet> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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"; import "jspreadsheet/dist/jspreadsheet.css" import "jsuites/dist/jsuites.css" // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // 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; } }); } }

Paste Data Only

This example demonstrates how to ignore styles and editor settings from the clipboard so that only plain cell values are pasted.

<html> <script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v6/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <script> // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create the spreadsheet 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 "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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"; import "jspreadsheet/dist/jspreadsheet.css" import "jsuites/dist/jsuites.css" // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzIzOTEwOGU5YTk0MWI4MjViYTQwZDlmOWFkYjhiY2RlMWIxYzNlYWI4NDJmOTE5ZDU3M2NkM2IyMWU3NmZiNjU1YjczYjkwMTAxMTU4MzZmZWE3ZDdkZWViOTI4NGVkM2Y0YTJjNGE3OGZlMWU3ZTI2N2Q1NGQ1ZWU0ZDJiNTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1UWTJORGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // 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; }, }); } }