Clipboard Plugin

The Clipboard plugin brings familiar copy/paste functionality to your grid with full keyboard shortcut support (Ctrl+C, Ctrl+V). It handles single cells, multi-cell selections, and integrates seamlessly with Excel and other spreadsheet applications via tab-delimited output.

Tip

Works best with SelectionPlugin for copying/pasting selected cells. Without it, copies the entire grid and pastes at row 0, column 0.

Installation

import '@toolbox-web/grid/features/clipboard';

Basic Usage

Just enable the feature and you’re ready to go—keyboard shortcuts work automatically. Configure options like includeHeaders for copying column headers or delimiter for custom CSV formats.

Vanilla JS

import { queryGrid } from '@toolbox-web/grid';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'department', header: 'Department' }
  ],
  features: {
    clipboard: {
      includeHeaders: true,
      quoteStrings: true, // Wrap text in quotes for CSV compatibility
    },
  },
};

React

import '@toolbox-web/grid-react/features/selection';
import '@toolbox-web/grid-react/features/clipboard';
import { DataGrid } from '@toolbox-web/grid-react';

function MyGrid({ data }) {
  return (
    <DataGrid
      rows={data}
      columns={[
        { field: 'name', header: 'Name' },
        { field: 'email', header: 'Email' },
        { field: 'department', header: 'Department' }
      ]}
      selection="range"
      clipboard={{ includeHeaders: true, quoteStrings: true }}
    />
  );
}

Vue

<script setup>
import '@toolbox-web/grid-vue/features/selection';
import '@toolbox-web/grid-vue/features/clipboard';
import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';

const data = [
  { name: 'Alice', email: 'alice@example.com', department: 'Engineering' },
  { name: 'Bob', email: 'bob@example.com', department: 'Marketing' },
];
</script>

<template>
  <TbwGrid
    :rows="data"
    selection="range"
    :clipboard="{ includeHeaders: true, quoteStrings: true }"
  >
    <TbwGridColumn field="name" header="Name" />
    <TbwGridColumn field="email" header="Email" />
    <TbwGridColumn field="department" header="Department" />
  </TbwGrid>
</template>

Angular

// Feature imports - enable the [selection] and [clipboard] inputs
import '@toolbox-web/grid-angular/features/selection';
import '@toolbox-web/grid-angular/features/clipboard';

import { Component } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';
import type { ColumnConfig } from '@toolbox-web/grid';

@Component({
  selector: 'app-my-grid',
  imports: [Grid],
  template: `
    <tbw-grid
      [rows]="rows"
      [columns]="columns"
      [selection]="'range'"
      [clipboard]="{ includeHeaders: true, quoteStrings: true }"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class MyGridComponent {
  rows = [...];

  columns: ColumnConfig[] = [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'department', header: 'Department' }
  ];
}

Demos

Default Clipboard

CLIPBOARD

Include headers Include column headers when copying

Quote strings Wrap string values in quotes

Show source

Select cells and use Ctrl+C to copy, Ctrl+V to paste.

Copy & Paste (Auto-Paste)

X1 Y1 Z1 X2 Y2 Z2

Try it: Select the sample data above → Ctrl+C → Click a cell in the grid → Ctrl+V to paste.
Or paste tab/comma-separated data from Excel or Sheets!
Also try to select an area to paste in. Pasting will be restricted to that area only.

Show source

By default, the ClipboardPlugin handles paste operations automatically—no event handling needed. Just add the plugin and paste works out of the box.

Custom Paste Handler

Show source

For advanced use cases, provide a custom pasteHandler to validate, transform, or integrate with state management.

Single Cell Mode

Click a cell and press Ctrl+C to copy its value. No range selection — only the focused cell is copied.

Show source

Without a SelectionPlugin, the clipboard operates on a single focused cell — press Ctrl+C to copy just that cell’s value.

Configuration Options

Option	Type	Default	Description
includeHeaders	boolean	false	Include column headers in copied data
delimiter	string	'\t'	Column delimiter (tab for Excel compatibility)
newline	string	'\n'	Row delimiter
quoteStrings	boolean	false	Wrap string values in quotes
processCell	(value, field, row) => string	-	Custom cell value processor for copy operations
pasteHandler	PasteHandler | null	defaultPasteHandler	Custom paste handler. Set to null to disable auto-paste and handle the paste event manually

Paste Behavior

The clipboard plugin respects both selection bounds and the editable column property when pasting:

Editable Columns

Paste only works on columns marked editable: true. Non-editable columns are skipped during paste, preserving column alignment:

columns: [
  { field: 'id', header: 'ID' },                    // NOT editable - paste skipped
  { field: 'name', header: 'Name', editable: true }, // Paste allowed
  { field: 'email', header: 'Email', editable: true }, // Paste allowed
]

If you paste "1\t2\t3" into this grid, only the name and email columns receive values (2 and 3). The id column remains unchanged.

Tip

This works independently of the EditingPlugin. You can use editable: true to control paste behavior even without enabling inline editing.

Selection Bounds

Selection Type	Paste Behavior
Single cell	Paste expands freely from that cell, adding rows if needed
Range selection	Paste is clipped to fit within the selected range
Row selection	Paste is clipped to the selected rows (all columns within those rows)
No selection	Paste starts at row 0, column 0

Example: If you have a 2×2 range selected and paste 3×3 data, only the 2×2 portion that fits will be applied.

Keyboard Shortcuts

Shortcut	Action
Ctrl+C / Cmd+C	Copy selected cells
Ctrl+V / Cmd+V	Paste into selected cells

Programmatic API

The ClipboardPlugin exposes methods for programmatic copy operations with fine-grained control over which columns and rows to include. This is ideal for workflows where users select rows in the grid, then choose columns via a dialog before copying.

Basic Copy

const plugin = grid.getPluginByName('clipboard');

// Copy current selection to clipboard
await plugin.copy();

// Copy with headers included
await plugin.copy({ includeHeaders: true });

Copy with Column/Row Control (CopyOptions)

The copy() method accepts CopyOptions to precisely control what gets copied—independently of the current selection:

const plugin = grid.getPluginByName('clipboard');

// Copy specific columns from specific rows
await plugin.copy({
  rowIndices: [0, 3, 7],         // Non-contiguous rows supported
  columns: ['name', 'email'],    // Only these columns
  includeHeaders: true,
});

// Copy specific rows with all visible columns
await plugin.copyRows([0, 5]);

// Copy specific rows with column filter
await plugin.copyRows([0, 5], { columns: ['name', 'department'] });

Preview Without Copying

Use getSelectionAsText() to get the formatted text without writing to the clipboard—useful for preview dialogs:

const text = plugin.getSelectionAsText({
  columns: ['name', 'email', 'department'],
  includeHeaders: true,
});
// "Name\tEmail\tDepartment\nAlice\talice@example.com\tEngineering\n..."

CopyOptions Reference

Option	Type	Default	Description
columns	string[]	-	Specific column fields to include
rowIndices	number[]	-	Specific row indices to copy (non-contiguous OK)
includeHeaders	boolean	config value	Include column headers in copied text
delimiter	string	config value	Column delimiter override
newline	string	config value	Row delimiter override
processCell	(value, field, row) => string	config value	Custom cell value processor for this operation

Paste

// Paste from clipboard
await plugin.paste();

// Get last copied info
const lastCopied = plugin.getLastCopied();
// { text: '...', timestamp: 1234567890 }

Excel Compatibility

The default tab delimiter ensures copied data pastes correctly into Excel:

features: {
  clipboard: {
    delimiter: '\t', // Tab for Excel
    includeHeaders: true, // Include column names
  },
},

Events

Select cells and use Ctrl+C / Ctrl+V to copy and paste.

Event Log: Clear

Event	Detail	Description
copy	{ text, rowCount, columnCount }	Fired after cells are copied
paste	{ rows, text, target, fields }	Fired after data is pasted

Styling

The clipboard plugin doesn’t add visible UI elements. Selection styling is handled by the SelectionPlugin.

See Also

• Selection — Cell and row selection
• Editing — Inline cell editing
• Export — Export to CSV/JSON