Clipboard
LyteNyte Grid offers three API methods for copying, cutting, and pasting data between the grid and clipboard. Each method provides options to transform data before executing the action. A full example is shown below. The following sections cover other parts of the clipboard API.
"use client";
import {
LyteNyteGrid,
useLyteNytePro,
useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: ColumnProReact[] = [
{ id: "age", type: "number" },
{ id: "job" },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
{ id: "default" },
{ id: "housing" },
{ id: "loan" },
{ id: "contact" },
{ id: "day", type: "number" },
{ id: "month" },
{ id: "duration" },
{ id: "campaign" },
{ id: "pdays" },
{ id: "previous" },
{ id: "poutcome" },
{ id: "y" },
];
export function Clipboard() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
cellSelections: [{ rowStart: 2, rowEnd: 6, columnStart: 2, columnEnd: 5 }],
cellSelectionMode: "range",
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<button
onClick={async () => {
const s = grid.state.cellSelections.peek()?.[0];
grid.api.clipboardCopyCells(s);
}}
>
Copy
</button>
<button
onClick={async () => {
const s = grid.state.cellSelections.peek()?.[0];
grid.api.clipboardCutCells(s);
}}
>
Cut
</button>
<button
onClick={async () => {
const s = grid.state.cellSelections.peek()?.[0];
if (!s) return;
grid.api.clipboardPasteCells(s);
}}
>
Paste
</button>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}Copy and Cut
The clipboardCopyCells and clipboardCutCells API methods allow you to copy or cut cells
from LyteNyte Grid. Note that cutting cells requires a row data source
that supports data updates.
Copy and Cut Options
Both clipboardCopyCells and clipboardCutCells accept options as a second parameter to
customize clipboard operations.
By default, copying cells excludes column headers and group headers. To include these elements,
set the includeHeaders and includeHeaderGroups properties to true.
When you need to modify how values are copied, several transform hooks are available. LyteNyte Grid uses these callbacks to process data before writing to the clipboard:
transformCellValue: Modifies individual cell values before they're written to the clipboard.transformHeader: Customizes how header values appear in clipboard content.transformHeaderGroup: Adjusts header group values for clipboard export.transformCopy: Processes the entire dataset just before it's written to the clipboard.
Paste Cells
The clipboardPasteCells API method enables pasting clipboard data into the grid. The expected
format is space-separated columns with new lines separating rows. For data in different formats,
you can provide a transformPaste callback through the clipboard paste options parameter.