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>
);
}
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.
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.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.