How to Implement Cut, Copy, and Paste Support in React Spreadsheet

TL;DR: Modern spreadsheets aren’t complete without intuitive clipboard support. This guide shows how to implement and customize cut, copy, and paste operations in a React Spreadsheet, whether through the UI or APIs. You’ll also learn how to handle data from external sources and restrict specific paste actions to preserve data integrity.

Clipboard support is one of those features users only notice when it doesn’t work. If you’re building an app with a spreadsheet-like UI, people expect Excel-style cut/copy/paste, keyboard shortcuts, and sane behavior when they paste data from outside your app.

In this post, we’ll walk through how to handle clipboard operations in the Syncfusion ^® React Spreadsheet, including:

• Cut, copy, and paste.
• Paste options (All / Values / Formats).
• Pasting from external sources (Excel, Google Sheets, etc.).
• Preventing paste entirely.
• Allowing external paste but forcing values-only to keep your sheet clean.

Why clipboard handling matters (in real apps)

Developers usually run into clipboard issues in a few common scenarios:

• Data-entry screens: Users paste formatted tables and blow up your styling, column formats, or validations.
• Template-based sheets: You want to protect formulas and layout, but still let users paste values.
• Controlled environments: You may need to disable cut/paste for compliance or to avoid accidental edits.
• Interop with Excel: Users expect copy/paste from Excel to “just work,” including number formats.

This is where built-in clipboard support helps, but the key is knowing how to control it.

Clipboard operations in Syncfusion React Spreadsheet

When you’re working with Spreadsheets, cut, copy, and paste aren’t just basic actions; they’re the backbone of smooth data handling. The component offers a robust set of options for managing data:

• Cut, copy, and paste: Perform standard clipboard operations on cells, ranges, and formulas.
• External clipboard support: Copy data from external sources such as Excel or other applications and paste it into the Spreadsheet.
• Paste options: Choose whether to paste entire cells, values only, or formats only for more control over data handling.
• Rich content handling: Copy and paste charts, images, and hyperlinks within the Spreadsheet.
• Keyboard shortcuts: Use familiar shortcuts such as Ctrl+C, Ctrl+X, and Ctrl+V for quick clipboard actions.

Enable clipboard operations

The Syncfusion React Spreadsheet includes built-in clipboard functionality, making these operations easy to use. If you need to enable/disable them globally, use the enableClipboard property (enabled by default).

<SpreadsheetComponent enableClipboard={true} />

Cut like a pro

Need to move data around in your Spreadsheet? That’s where the Cut operation comes in. It allows you to move data without creating duplicates. When you cut cells, rows, or columns, the content is stored in the clipboard but remains in place until you paste it. The original data is removed only after the paste action is completed.

The Syncfusion React Spreadsheet makes moving data straightforward. Here are the different ways to perform a cut:

• Ribbon shortcut: Click the Cut button in the HOME tab of the Ribbon.

Cut data via the Home Tab

• Context Menu: Right-click the target cell and select Cut option from the context menu.

Cut data via context menu

• Keyboard shortcut: Press Ctrl + X (Windows) or Command + X on Mac for the quickest way to cut data.
• API support: Use the cut() method to trigger the cut action programmatically. When called without parameters, it cuts data based on the current selection. When a range address is provided, it cuts data from the specified range. Try this in your code:

// cuts the currently selected range
spreadsheet.cut();
// cuts the given address range
spreadsheet.cut('A2:C5');

Copy made simple: Duplicate data in the Syncfusion React Spreadsheet

Sometimes you don’t need to move data; just create an extra copy. The Copy operation lets you duplicate selected cells, rows, or columns and store them in the clipboard, ready to be pasted anywhere in the Spreadsheet.

The Syncfusion React Spreadsheet offers multiple ways to copy data, allowing you to choose the most convenient approach:

• Ribbon shortcut: Click the Copy button in the HOME tab.

Copy data via Ribbon Tab

• Context Menu: Right-click the target cell or range and select Copy from the context menu.

Copy data via context menu

• Keyboard shortcut: Press Ctrl + C (Windows) or Command + C (Mac) for quick copying.
• API support: Use the cut() method when copying through code. When called without parameters, it copies data based on the current selection. When a range address is provided, it copies data from the specified range. Code snippet:

// copy the currently selected range
spreadsheet.copy();
// copy data from the specified range
spreadsheet.copy('A2:C5')

Paste in React Spreadsheet

The Paste operation allows you to insert clipboard content into cells, rows, or columns quickly and accurately. It enables you to move copied or cut data into the Spreadsheet with full control over what gets pasted.

Paste options available:

• Paste All: Pastes both values and their original formatting.
• Paste Values: Pastes only the values, without any formatting.
• Paste Formats: Applies formatting such as font styles, colors, background colors, and number formats (date, currency, etc.) without modifying existing values.

Paste Special via Ribbon

Paste from anywhere: External clipboard made easy

The React Spreadsheet supports pasting data copied from external applications such as Excel. Supported content includes values, number formats (date, currency, percentage), text formatting (bold, italic, font color), and basic cell formatting like background color and borders. This ensures imported data retains its readability and structure.

Ways to paste data in Syncfusion React Spreadsheet:

• Ribbon shortcut: Click the Paste button in the HOME tab as shown below.

Paste data via Ribbon

• Context Menu: Right-click a cell and choose the Paste or Paste Special option from the context menu.

Paste data via context menu

• Keyboard shortcut: Press Ctrl + V (Windows) or Command + V (Mac) for the quickest way to paste.
• API support: Use the paste() method to control paste behavior programmatically. Calling paste() without parameters pastes content into the current selection. Providing a range address and an optional PasteSpecialType enumeration, lets you specify both the target location and paste behavior. Here’s how you can do it in code:

// Paste the selected cell.
spreadsheet.paste();
// Paste all the clipboard content to the specified range.
spreadsheet.paste('B2', 'All');

// Paste only the values to the specified range.
spreadsheet.paste('B3', 'Values');

// Apply only the formats to the specified range.
spreadsheet.paste('B4', 'Formats');

In the code example above, the paste() method gives you full control over where and how clipboard data is inserted, making it easy to handle simple and advanced paste scenarios.

This article was originally published at Syncfusion.com.