Export & Clipboard

Clipboard

Use the grid's cell selection and export API to copy grid data to the clipboard.

Implement clipboard support by combining exportData with cell selection and bulk data editing. Use this approach to build copy, cut, and paste functionality.

Clipboard Workflow

The demo below shows clipboard interactions. Click and drag to select cells. Press Ctrl C to copy, Ctrl X to cut, and Ctrl V to paste.

Clipboard

1
"use client";
2

3
import "./demo.css";
4
import "@1771technologies/lytenyte-pro/components.css";
5
import "@1771technologies/lytenyte-pro/light-dark.css";
6
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
7
import {
8
  CountryCell,
9
  CustomerRating,
10
  DateCell,
11
  DurationCell,
12
  NameCell,
13
  NumberCell,
14
  OverdueCell,
15
} from "./components.js";
16
import { useCallback, useMemo, useState } from "react";
17
import { loanData, type LoanDataItem } from "@1771technologies/grid-sample-data/loan-data";
18

19
export interface GridSpec {
20
  readonly data: LoanDataItem;
21
}
22

23
const columns: Grid.Column<GridSpec>[] = [
24
  { name: "Name", id: "name", cellRenderer: NameCell, width: 130 },
25
  { name: "Country", id: "country", width: 150, cellRenderer: CountryCell },
26
  { name: "Loan Amount", id: "loanAmount", width: 120, type: "number", cellRenderer: NumberCell },
27
  { name: "Balance", id: "balance", type: "number", cellRenderer: NumberCell },
28
  { name: "Customer Rating", id: "customerRating", type: "number", width: 125, cellRenderer: CustomerRating },
29
  { name: "Marital", id: "marital" },
30
  { name: "Education", id: "education", hide: true },
31
  { name: "Job", id: "job", width: 120, hide: true },
32
  { name: "Overdue", id: "overdue", cellRenderer: OverdueCell },
33
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
34
  { name: "Date", id: "date", width: 110, cellRenderer: DateCell },
35
  { name: "Age", id: "age", width: 80, type: "number" },
36
  { name: "Contact", id: "contact" },
37
];
38

39
const base: Grid.ColumnBase<GridSpec> = {
40
  width: 100,
41
  cellRenderer: (p) => {
42
    const field = p.api.columnField(p.column, p.row);
43

44
    if (field == null) return "";
45

46
    return String(field);
47
  },
48
};
49

50
export default function ExportDemo() {
51
  const [data, setData] = useState(loanData);
52
  const ds = useClientDataSource({
53
    data: data,
54
    onRowDataChange: (p) => {
55
      setData((prev) => {
56
        const next = [...prev];
57
        p.center.forEach((v, i) => {
58
          next[i] = v as LoanDataItem;
59
        });
60

61
        return next;
62
      });
63
    },
64
  });
65
  const [selections, setSelections] = useState<Grid.T.DataRect[]>([
66
    { rowStart: 2, rowEnd: 6, columnStart: 1, columnEnd: 3 },
67
  ]);
68

69
  const [api, setApi] = useState<Grid.API<GridSpec> | null>(null);
70

71
  const getFirstSelection = useCallback(() => {
72
    return selections.at(0) ?? null;
73
  }, [selections]);
74

75
  const handleCopy = useCallback(async () => {
76
    if (!api) return;
77

78
    const selectionToCopy = getFirstSelection();
79
    if (!selectionToCopy) return;
80

81
    const data = await api.exportData({
82
      rect: selectionToCopy,
83
    });
84

85
    const stringToCopy = data.data
86
      .map((row) => {
87
        return row.map((cell) => `${cell ?? ""}`).join("\t");
88
      })
89
      .join("\n");
90

91
    await navigator.clipboard.writeText(stringToCopy);
92
  }, [api, getFirstSelection]);
93

94
  const handleGridUpdate = useCallback(
95
    async (updates: unknown[][]) => {
96
      if (!api) return;
97
      if (!document.activeElement) return null;
98

99
      const position = api.positionFromElement(document.activeElement as HTMLElement);
100
      if (position?.kind !== "cell") return;
101

102
      // Repeat paste for excel like behavior
103
      const selection = api.cellSelections().at(-1);
104
      let repeat: Repeat | null = null;
105
      if (selection) {
106
        const xDiff = selection.columnEnd - selection.columnStart;
107
        const yDiff = selection.rowEnd - selection.rowStart;
108

109
        const columnLengths = updates.map((x) => x.length);
110

111
        const allTheSameLength = columnLengths.every((x) => x === columnLengths[0]);
112

113
        if (allTheSameLength)
114
          repeat = rectRepeat({ cols: columnLengths[0], rows: updates.length }, { cols: xDiff, rows: yDiff });
115
      }
116
      if (repeat) {
117
        for (let r = 0; r < updates.length; r++) {
118
          const row = updates[r];
119
          const newRow = [];
120
          for (let i = 0; i < repeat.x; i++) newRow.push(...row);
121

122
          updates[r] = newRow;
123
        }
124

125
        const final = [];
126
        for (let i = 0; i < repeat.y; i++) final.push(...updates);
127

128
        updates = final;
129
      }
130

131
      const map = new Map<number, { column: number; value: any }[]>();
132

133
      for (let i = 0; i < updates.length; i++) {
134
        const rowI = i + position.rowIndex;
135
        const row = api.rowByIndex(rowI).get();
136

137
        if (!row?.data || api.rowIsGroup(row)) continue;
138

139
        const data = updates[i];
140

141
        const columnUpdates: { column: number; value: any }[] = [];
142

143
        for (let j = 0; j < data.length; j++) {
144
          const colI = j + position.colIndex;
145

146
          console.log(position.colIndex);
147
          const column = api.columnByIndex(colI);
148
          if (!column) continue;
149

150
          const rawValue = data[j];
151

152
          let value = column.type === "number" ? Number.parseFloat(rawValue as string) : rawValue;
153
          if (column.type === "number" && Number.isNaN(value)) value = rawValue;
154

155
          columnUpdates.push({ column: colI, value: value });
156
        }
157
        map.set(rowI, columnUpdates);
158
      }
159

160
      if (!api.editUpdateCells(map)) alert("Copy operation failed");
161
    },
162
    [api],
163
  );
164

165
  return (
166
    <div className="ln-grid" style={{ height: 500 }}>
167
      <Grid
168
        events={useMemo<Grid.Events<GridSpec>>(() => {
169
          return {
170
            viewport: {
171
              keyDown: async (p) => {
172
                if (!p.event.ctrlKey && !p.event.metaKey) return;
173

174
                if (p.event.key === "x") {
175
                  const rect = getFirstSelection();
176
                  if (!rect) return;
177

178
                  await handleCopy();
179

180
                  const updates: any[][] = [];
181
                  for (let i = rect.rowStart; i < rect.rowEnd; i++) {
182
                    const row: any[] = [];
183

184
                    for (let j = rect.columnStart; j < rect.columnEnd; j++) row.push(null);
185
                    updates.push(row);
186
                  }
187

188
                  p.viewport.classList.add("copy-flash");
189

190
                  handleGridUpdate(updates);
191

192
                  setTimeout(() => p.viewport.classList.remove("copy-flash"), 500);
193
                } else if (p.event.key === "v") {
194
                  const content = await navigator.clipboard.readText();
195

196
                  // If your data needs some parsing handle it here on via the editSetter on the column.
197
                  const updates = content.split("\n").map((c) => {
198
                    return c
199
                      .trim()
200
                      .split("\t")
201
                      .map((x) => x.trim());
202
                  });
203

204
                  handleGridUpdate(updates);
205
                } else if (p.event.key === "c") {
206
                  p.viewport.classList.add("copy-flash");
207
                  await handleCopy();
208
                  setTimeout(() => p.viewport.classList.remove("copy-flash"), 500);
209
                }
210
              },
211
            },
212
          };
213
        }, [getFirstSelection, handleCopy, handleGridUpdate])}
214
        ref={setApi}
215
        columnBase={base}
216
        columns={columns}
217
        editMode="cell"
218
        rowSource={ds}
219
        cellSelections={selections}
220
        onCellSelectionChange={setSelections}
221
        cellSelectionMode="range"
222
      />
223
    </div>
224
  );
225
}
226
type Rect = { rows: number; cols: number };
227
type Repeat = { x: number; y: number };
228

229
function rectRepeat(small: Rect, big: Rect): Repeat | null {
230
  const sr = small.rows;
231
  const sc = small.cols;
232
  const br = big.rows;
233
  const bc = big.cols;
234

235
  // Basic validation (optional but handy)
236
  if (![sr, sc, br, bc].every(Number.isInteger)) return null;
237
  if (sr <= 0 || sc <= 0 || br <= 0 || bc <= 0) return null;
238

239
  // Must divide evenly for a perfect tiling
240
  if (br % sr !== 0) return null;
241
  if (bc % sc !== 0) return null;
242

243
  return { x: bc / sc, y: br / sr };
244
}

1
@keyframes flash {
2
  0% {
3
    background-color: var(--color-ln-primary-10);
4
  }
5
  50% {
6
    background-color: var(--color-ln-primary-30);
7
  }
8
  100% {
9
    background-color: var(--color-ln-primary-10);
10
  }
11
}
12
.copy-flash {
13
  & [data-ln-cell-selection-rect="true"]:not([data-ln-cell-selection-is-pivot="true"]) {
14
    animation: flash 0.5s ease-out forwards;
15
  }
16
}

1
import { type Grid } from "@1771technologies/lytenyte-pro";
2
import type { GridSpec } from "./demo.js";
3
import { twMerge } from "tailwind-merge";
4
import clsx, { type ClassValue } from "clsx";
5
import { countryFlags, nameToAvatar } from "@1771technologies/grid-sample-data/loan-data";
6
import { useId, useMemo } from "react";
7
import { format, isValid, parse } from "date-fns";
8

9
export function tw(...c: ClassValue[]) {
10
  return twMerge(clsx(...c));
11
}
12

13
const formatter = new Intl.NumberFormat("en-US", {
14
  maximumFractionDigits: 2,
15
  minimumFractionDigits: 0,
16
});
17
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
18
  const field = api.columnField(column, row);
19

20
  if (typeof field !== "number")
21
    return <div className="flex h-full w-full items-center">{String(field ?? "")}</div>;
22

23
  const formatted = field < 0 ? `-$${formatter.format(Math.abs(field))}` : "$" + formatter.format(field);
24

25
  return (
26
    <div
27
      className={tw(
28
        "flex h-full w-full items-center justify-end tabular-nums",
29
        field < 0 && "text-red-600 dark:text-red-300",
30
        field > 0 && "text-green-600 dark:text-green-300",
31
      )}
32
    >
33
      {formatted}
34
    </div>
35
  );
36
}
37

38
export function NameCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
39
  if (!api.rowIsLeaf(row) || !row.data) return;
40

41
  const name = row.data.name;
42
  const url = nameToAvatar[name];
43

44
  return (
45
    <div className="flex h-full w-full items-center gap-2">
46
      {url && <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />}
47
      <div className="text-ln-text-dark flex flex-col gap-0.5">
48
        <div>{name}</div>
49
      </div>
50
    </div>
51
  );
52
}
53

54
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
55
  const field = api.columnField(column, row);
56

57
  if (typeof field === "number")
58
    return <div className="flex h-full w-full items-center justify-end">{formatter.format(field)} days</div>;
59

60
  return <div className="flex h-full w-full items-center justify-start">{String(field ?? "")}</div>;
61
}
62

63
export function CountryCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
64
  const field = api.columnField(column, row);
65

66
  const flag = countryFlags[field as keyof typeof countryFlags];
67

68
  return (
69
    <div className="flex h-full w-full items-center gap-2">
70
      {flag && <img className="size-4" src={flag} alt={`country flag of ${field}`} />}
71
      <span>{String(field ?? "")}</span>
72
    </div>
73
  );
74
}
75

76
export function DateCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
77
  const field = api.columnField(column, row);
78

79
  if (typeof field !== "string")
80
    return <div className="flex h-full w-full items-center">{String(field ?? "")}</div>;
81

82
  const dateField = parse(field as string, "yyyy-MM-dd", new Date());
83

84
  if (!isValid(dateField))
85
    return <div className="flex h-full w-full items-center">{String(field ?? "")}</div>;
86

87
  const niceDate = format(dateField, "yyyy MMM dd");
88
  return <div className="flex h-full w-full items-center tabular-nums">{niceDate}</div>;
89
}
90

91
export function OverdueCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
92
  const field = api.columnField(column, row);
93
  if (field !== "Yes" && field !== "No")
94
    return <div className="flex h-full w-full items-center">{String(field ?? "")}</div>;
95

96
  return (
97
    <div
98
      className={tw(
99
        "flex w-full items-center justify-center rounded-lg py-1 font-bold",
100
        field === "No" && "bg-green-500/10 text-green-600",
101
        field === "Yes" && "bg-red-500/10 text-red-400",
102
      )}
103
    >
104
      {field}
105
    </div>
106
  );
107
}
108

109
export function CustomerRating({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
110
  const field = api.columnField(column, row);
111
  if (typeof field !== "number" || field > 5 || field < 0)
112
    return <div className="flex h-full w-full items-center">{String(field ?? "")}</div>;
113

114
  return (
115
    <div className="flex justify-center text-yellow-300">
116
      <StarRating value={field} />
117
    </div>
118
  );
119
}
120

121
export default function StarRating({ value = 0 }: { value: number }) {
122
  const uid = useId();
123

124
  const max = 5;
125

126
  const clamped = useMemo(() => {
127
    const n = Number.isFinite(value) ? value : 0;
128
    return Math.max(0, Math.min(max, n));
129
  }, [value, max]);
130

131
  const stars = useMemo(() => {
132
    return Array.from({ length: max }, (_, i) => {
133
      const fill = Math.max(0, Math.min(1, clamped - i)); // 0..1
134
      return { i, fill };
135
    });
136
  }, [clamped, max]);
137

138
  return (
139
    <div className={"inline-flex items-center"} role="img">
140
      {stars.map(({ i, fill }) => {
141
        const gradId = `${uid}-star-${i}`;
142
        return <StarIcon key={i} fillFraction={fill} gradientId={gradId} />;
143
      })}
144
    </div>
145
  );
146
}
147

148
function StarIcon({ fillFraction, gradientId }: { fillFraction: number; gradientId: string }) {
149
  const pct = Math.round(fillFraction * 100);
150

151
  return (
152
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
153
      <defs>
154
        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
155
          <stop offset={`${pct}%`} stopColor="currentColor" />
156
          <stop offset={`${pct}%`} stopColor="transparent" />
157
        </linearGradient>
158
      </defs>
159

160
      <path
161
        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
162
        fill={`url(#${gradientId})`}
163
      />
164
      {/* Optional outline for crisp edges */}
165
      <path
166
        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
167
        fill="none"
168
        stroke="transparent"
169
        strokeWidth="1"
170
        opacity="0.35"
171
      />
172
    </svg>
173
  );
174
}

The code below shows how to handle copy operations. Expand the code in the demo frame to view the full implementation.

The handleCopy function uses the current selection and the exportData method to copy grid cell content to the clipboard. When you pass a rect argument, exportData returns only the rows and columns that fall within the specified rectangle.

The handleGridUpdate function parses update data and writes it to the grid using api.editUpdateCells. This update data comes from the event handler attached to the grid.

Note

This sample prioritizes conciseness. In production, treat clipboard data as untrusted input and validate it using libraries like Zod before applying updates. See the Cell Editing guide for details.

1
const handleCopy = useCallback(async () => {
2
  if (!api) return;
3

4
  const selectionToCopy = getFirstSelection();
5
  if (!selectionToCopy) return;
6

7
  const data = await api.exportData({
8
    rect: selectionToCopy,
9
  });
10

11
  const stringToCopy = data.data
12
    .map((row) => {
13
      return row.map((cell) => `${cell}`).join("\t");
14
    })
15
    .join("\n");
16

17
  await navigator.clipboard.writeText(stringToCopy);
18
}, [api, getFirstSelection]);
19

20
const handleGridUpdate = useCallback(
21
  async (updates: unknown[][]) => {
22
    if (!api) return;
23
    if (!document.activeElement) return null;
24

25
    const position = api.positionFromElement(document.activeElement as HTMLElement);
26
    if (position?.kind !== "cell") return;
27

28
    const map = new Map<number, { column: number; value: any }[]>();
29

30
    for (let i = 0; i < updates.length; i++) {
31
      const rowI = i + position.rowIndex;
32
      const row = api.rowByIndex(rowI).get();
33

34
      if (!row?.data || api.rowIsGroup(row)) continue;
35

36
      const data = updates[i];
37

38
      const columnUpdates: { column: number; value: any }[] = [];
39

40
      for (let j = 0; j < data.length; j++) {
41
        const colI = j + position.colIndex;
42

43
        const column = columns[colI];
44
        const rawValue = data[j];
45

46
        let value = column.type === "number" ? Number.parseFloat(rawValue as string) : rawValue;
47
        if (column.type === "number" && Number.isNaN(value)) value = String(rawValue);
48

49
        columnUpdates.push({ column: colI, value: value });
50
      }
51
      map.set(rowI, columnUpdates);
52
    }
53

54
    if (!api.editUpdateCells(map)) alert("Copy operation failed");
55
  },
56
  [api],
57
);

Next Steps

CSV Data Export: Export grid data as a CSV file.
Export Excel: Implement Excel export using libraries like ExcelJS.
Export Arrow: Export grid data as an Arrow file.

Clipboard

Clipboard Workflow

Clipboard

Note

Next Steps

On this page