# Example: Export CSV

A products grid with a real Export CSV button wired to the grid handle's exportCsv, downloading an actual CSV file through defaultSaveFile.

Source: https://pretable.ai/examples/export-csv.md

```tsx ExportCsvGrid.tsx
"use client";

import { useRef } from "react";

import { PretableSurface } from "@pretable/react";
import type { PretableColumn, PretableSurfaceGrid } from "@pretable/react";

import { columns } from "./columns";
import { products, type Product } from "./data";

const VIEWPORT_HEIGHT = 280;

export function ExportCsvGrid() {
  const grid = useRef<PretableSurfaceGrid<
    Product,
    string,
    readonly PretableColumn<Product>[]
  > | null>(null);

  return (
    <div>
      <p style={{ margin: "0 0 8px", fontSize: 13 }}>
        Nothing is checked below, so the button exports every row — check a few
        first to see <code>onlySelected</code> narrow the file instead.
      </p>
      <button
        onClick={() => grid.current?.exportCsv({ onlySelected: true })}
        style={{ marginBottom: 8 }}
        type="button"
      >
        Export CSV
      </button>
      <PretableSurface<Product>
        ariaLabel="Products"
        columns={columns}
        getRowId={(row) => row.id}
        onGridReady={(ready) => {
          grid.current = ready;
        }}
        rowSelectionColumn={{ enabled: true }}
        rows={products}
        viewportHeight={VIEWPORT_HEIGHT}
      />
    </div>
  );
}
```

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

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

export const columns: PretableColumn<Product>[] = [
  { id: "sku", header: "SKU", widthPx: 110 },
  { id: "name", header: "Product", widthPx: 200 },
  { id: "category", header: "Category", widthPx: 130 },
  {
    id: "unitsInStock",
    header: "In stock",
    type: "number",
    widthPx: 100,
  },
];
```

```ts data.ts
export interface Product extends Record<string, unknown> {
  id: string;
  sku: string;
  name: string;
  category: string;
  unitsInStock: number;
}

export const products: Product[] = [
  {
    id: "p1",
    sku: "WH-1001",
    name: "Wireless headphones",
    category: "Audio",
    unitsInStock: 84,
  },
  {
    id: "p2",
    sku: "SP-2044",
    name: "Bluetooth speaker",
    category: "Audio",
    unitsInStock: 37,
  },
  {
    id: "p3",
    sku: "KB-3312",
    name: "Mechanical keyboard",
    category: "Peripherals",
    unitsInStock: 52,
  },
  {
    id: "p4",
    sku: "MS-3390",
    name: "Wireless mouse",
    category: "Peripherals",
    unitsInStock: 118,
  },
  {
    id: "p5",
    sku: "MN-4501",
    name: "27-inch monitor",
    category: "Displays",
    unitsInStock: 21,
  },
  {
    id: "p6",
    sku: "MN-4520",
    name: "Ultrawide monitor",
    category: "Displays",
    unitsInStock: 9,
  },
  {
    id: "p7",
    sku: "DK-5810",
    name: "Laptop dock",
    category: "Accessories",
    unitsInStock: 46,
  },
  {
    id: "p8",
    sku: "CB-5899",
    name: "USB-C cable, 2m",
    category: "Accessories",
    unitsInStock: 260,
  },
];
```