DocumentationClipboard

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 13

  • Paste API: pasteArea pastes an area of a worksheet straight into another position with the fidelity of an internal copy, no copy needed and the clipboard untouched. getClipboard returns the origin of the last internal copy or cut, and isClipboardText tells whether the clipboard still holds it
  • Paste options: paste and pasteArea choose what travels: values, styles: false, properties: false, numberFormat, borders: false, transpose and formatOnly. Formulas follow a transposed paste
  • Excel move contract: cut and paste updates the formula references that point at the moved cells, on every worksheet, and a move across worksheets requalifies the references on both sides
  • Merges and notes: pasted content replaces the destination merges, only whole merges travel, and notes and comments move with the cells. A paste is one transactional history entry

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. The options choose what of each cell travels, see below.
paste(x: Number, y: Number, data: String|String[[]], options?: Object) => void
pasteArea Paste an area of the worksheet, or of another worksheet through source, straight into a position with the fidelity of an internal copy: values, styles, formats and merges travel, and cut clears the origin. No copy has to happen first and the clipboard stays untouched. Formulas shift on a copy and follow the move contract on a cut.
pasteArea(area: String|Number[], x: Number, y: Number, cut?: Boolean, source?: Object, options?: Object) => void
getClipboard The origin of the last copy or cut made inside the spreadsheet, or null when there is none.
getClipboard() => { worksheet: Object, selection: Number[], highlighted: Number[][], cut: Boolean, value: String } | null
isClipboardText Whether the text is still the one the last internal copy produced, and not something another application put on the clipboard since.
isClipboardText(text: String) => Boolean

Paste options

paste and pasteArea accept an options object to paste a part of each cell instead of everything.

Option Description
values: true Paste the result of the formulas instead of the formulas.
styles: false Do not paste the styles.
properties: false Do not paste the cell configuration.
numberFormat: true Of the cell configuration, paste only the number mask.
borders: false Paste the styles except the borders.
transpose: true Rows become columns. Spans and formula references follow: =SUM(I:I) becomes =SUM(10:10).
formatOnly: true The looks alone: styles, configuration and merges, leaving every value and note of the destination as it is.

The long standing valuesOnly, dataOnly and styleOnly options keep working.

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

What travels with a paste

  • Notes and comments belong to the cell: a copy carries them to the destination and a cut moves them, leaving none at the origin.
  • Merges: the pasted content replaces everything in the destination area, merges included. Only the merges the content carries are re-created, and a merge travels only when the copied area holds it whole.
  • Formulas on a cut follow the Excel move contract: a reference follows the cell it points at if, and only if, that cell moved along, inside the moved formulas and in every formula of the workbook that references the moved cells, with $ markers preserved. A move across worksheets requalifies the references on both sides.
  • History: a paste is a single entry. The value writes, the source clearing of a cut and the merge moves apply and revert as one transaction.

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/v13/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

@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/v13/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

// 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/v13/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

// 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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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('MWUyMmM4ZTQzNjE0MWEzNGUxMjBkMWZmNGViMzhmODY5MDZjN2JhMGVmOWY3ZjJkMDgwOGUyNjVhNTJhZmNmYmFhZmQxZmU1MzZjOTQ0Mjg4OGExYTEzZDgwNWRkNWEwZTg0MTFmNjgzY2EyODhmOTU3YzdjZWExYzllYjNlOTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qSTJPVGsxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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