# Example: CSV onCopy override

Code-only: onCopy reuses serializeRanges for range/column/header handling, rewrites the TSV delimiter to a comma, and returns only text to opt out of the HTML flavor.

Source: https://pretable.ai/examples/csv-clipboard-copy.md

```tsx CsvClipboardGrid.tsx
"use client";

import { PretableSurface, serializeRanges } from "@pretable/react";

import { columns } from "./columns";
import { orders, type Order } from "./data";

// Code-only on purpose — see docs/grid/clipboard's intro. The interesting
// artifact of a copy lands on the OS clipboard, not the DOM, so a live demo
// would either fake navigator.clipboard.read() or prove nothing. This file
// is real and typechecked; it just isn't rendered anywhere.
export function CsvClipboardGrid() {
  return (
    <PretableSurface<Order>
      ariaLabel="Orders"
      columns={columns}
      getRowId={(row) => row.id}
      rows={orders}
      viewportHeight={320}
      onCopy={(args) => {
        // serializeRanges keeps the built-in range/column/header handling —
        // including filtering out the synthetic row-select column — so a
        // custom onCopy only has to post-process its output, not
        // reimplement it.
        const tsv = serializeRanges(args);
        if (!tsv) return null; // empty selection — cancel the copy

        // Returning only `text` also opts out of the HTML flavor (see
        // "Opting out" on docs/grid/clipboard): Excel and Sheets would
        // otherwise prefer text/html over this CSV rewrite.
        return { text: tsv.text.replace(/\t/g, ",") };
      }}
    />
  );
}
```

```ts columns.ts
import type { PretableColumn } from "@pretable/react";

import type { Order } from "./data";

export const columns: PretableColumn<Order>[] = [
  { id: "id", header: "Order" },
  { id: "sku", header: "SKU" },
  { id: "qty", header: "Qty", type: "number" },
  { id: "total", header: "Total", type: "number" },
];
```

```ts data.ts
export interface Order {
  id: string;
  sku: string;
  qty: number;
  total: number;
}

export const orders: Order[] = [
  { id: "o1", sku: "007-2200", qty: 4, total: 128.5 },
  { id: "o2", sku: "014-9910", qty: 1, total: 42 },
  { id: "o3", sku: "022-3301", qty: 12, total: 613.2 },
  { id: "o4", sku: "031-0087", qty: 3, total: 87.75 },
];
```