# Export & import

> Export rows to CSV or Excel, print every row, and turn CSV, TSV or JSON text back into rows.

Exports work from your rows and columns, not from what happens to be drawn, so they include every row, even those scrolled out of view. CSV import and export need no dependencies; Excel export loads its writer only when it runs.

Download the rows as CSV, or open a print view of every row. The text under the grid is the CSV string itself.

Example: CSV and print (export.svelte)

```svelte
<script lang="ts">
  import { Grid, exportCSV, printTable, toCSV, type ColumnDef } from 'bo-grid';
  import { quotes } from './data';

  const columns: ColumnDef[] = [
    { type: 'text', key: 'symbol', header: 'Symbol', width: 100 },
    { type: 'text', key: 'sector', header: 'Sector', width: 130 },
    { type: 'price', key: 'price', header: 'Price' },
    { type: 'percent', key: 'change', header: 'Chg %' },
    { type: 'volume', key: 'volume', header: 'Volume', flex: 1 },
  ];
  let rows = $state(quotes());
  // The CSV string, with the cells' displayed text: what a download would hold.
  const preview = $derived(toCSV(rows.slice(0, 4), columns, { formatted: true }));
</script>

<p style="margin: 0 0 10px; display: flex; gap: 6px">
  <button onclick={() => exportCSV('quotes.csv', rows, columns)}>Download CSV</button>
  <button onclick={() => printTable(rows, columns, { title: 'Quotes' })}>Print every row</button>
</p>
<Grid {rows} {columns} height={200} />
<pre style="margin: 10px 0 0; font-size: 12px; opacity: 0.8">{preview}</pre>
```

data.ts:

```ts
// Small, fixed data for the docs' examples: every example reads the same
// symbols, so a reader compares features, not datasets.
// A type, not an interface: it then fits GridRow's index signature.
export type Quote = {
  id: number;
  symbol: string;
  name: string;
  sector: string;
  price: number;
  change: number;
  volume: number;
};

const BASE: Omit<Quote, 'id'>[] = [
  { symbol: 'VNM', name: 'Vinamilk', sector: 'Consumer', price: 68.5, change: 1.2, volume: 1_204_000 },
  { symbol: 'FPT', name: 'FPT Corp', sector: 'Technology', price: 132, change: -0.4, volume: 860_500 },
  { symbol: 'HPG', name: 'Hoa Phat', sector: 'Materials', price: 27.35, change: 0.74, volume: 3_412_900 },
  { symbol: 'VCB', name: 'Vietcombank', sector: 'Financials', price: 91.5, change: 0.55, volume: 1_986_200 },
  { symbol: 'MWG', name: 'Mobile World', sector: 'Consumer', price: 51.4, change: -1.1, volume: 2_250_400 },
  { symbol: 'SSI', name: 'SSI Securities', sector: 'Financials', price: 33.3, change: -0.45, volume: 4_104_700 },
  { symbol: 'VIC', name: 'Vingroup', sector: 'Real estate', price: 44.15, change: -0.11, volume: 1_530_100 },
  { symbol: 'GAS', name: 'PV Gas', sector: 'Energy', price: 71.8, change: 0.3, volume: 645_800 },
  { symbol: 'MSN', name: 'Masan', sector: 'Consumer', price: 76.2, change: 2.05, volume: 1_120_300 },
  { symbol: 'TCB', name: 'Techcombank', sector: 'Financials', price: 23.9, change: 0.84, volume: 5_870_000 },
  { symbol: 'VHM', name: 'Vinhomes', sector: 'Real estate', price: 41.6, change: -0.72, volume: 2_904_600 },
  { symbol: 'POW', name: 'PV Power', sector: 'Energy', price: 12.25, change: 1.66, volume: 6_315_200 },
];

/** A fresh copy of the quotes, so one example's edits never reach another. */
export function quotes(): Quote[] {
  return BASE.map((q, i) => ({ id: i + 1, ...q }));
}
```

## CSV

```ts
import { exportCSV, toCSV } from 'bo-grid';

exportCSV('quotes.csv', rows, columns);                    // downloads a file
const text = toCSV(rows, columns, { formatted: true });     // or returns the string
```

Both take `{ formatted, header }`:

- By default numbers export as raw numbers, so a spreadsheet can compute on them; `formatted: true` exports the text the cells show instead. Dates always export as text.
- `header: false` leaves out the header row.
- Sparkline columns are skipped.

To export what the reader is looking at, after their filters and sort, use the grid's `api.exportCSV(filename?)`; see [Grid API](https://bonguynvan.github.io/bo-grid/docs/grid-api/).

## Excel

`exportXLSX` writes an `.xlsx` file. It loads the optional `xlsx` package with a dynamic import, so it lands in its own chunk and costs nothing until it runs; install `xlsx` only if you use it:

```ts
import { exportXLSX } from 'bo-grid';

await exportXLSX('quotes.xlsx', rows, columns); // npm i xlsx
```

It takes the same options as CSV.

## Printing

The grid draws only the rows in view, so printing the page would leave the rest out. `printTable(rows, columns, { title })` opens a print window with every row as a plain table (the browser's dialog can save it as a PDF), and `toHTMLTable(rows, columns)` returns that table as an HTML string to put in a page or an email. Values are escaped.

```ts
import { printTable } from 'bo-grid';

printTable(rows, columns, { title: 'Quotes' });
```

Live example: https://bonguynvan.github.io/bo-grid/examples/print/ (source: https://github.com/bonguynvan/bo-grid/blob/main/src/demo/examples/)

## Importing CSV, TSV and JSON

`parseCSV(text, columns)` reads CSV into rows ready for the grid: it handles quoted fields (with commas, quotes and line breaks inside), matches the header row to your columns, converts number and date columns, and gives each row an `id`. `parseTSV` reads tab-separated text, which is what spreadsheets and the grid's own copy put on the clipboard.

```ts
import { parseCSV, toCSV } from 'bo-grid';

const text = toCSV(rows, columns);
const back = parseCSV(text, columns); // a round trip
```

For JSON, `parseJSON(text)` reads an array of objects, and `rowsFromObjects(objects)` converts objects you already have:

```ts
import { rowsFromObjects } from 'bo-grid';

const rows = rowsFromObjects(await (await fetch('/api/positions')).json());
```

`parseRows(text, columns?)` detects JSON, TSV or CSV by itself, which suits a paste handler:

```svelte
<div onpaste={(e) => (rows = parseRows(e.clipboardData?.getData('text') ?? '', columns))}>Paste a table here</div>
```

`parseCSVMatrix(text)` returns the raw cells as a string matrix, for files that need their own mapping.

Live example: https://bonguynvan.github.io/bo-grid/examples/csv/ (source: https://github.com/bonguynvan/bo-grid/blob/main/src/demo/examples/)

## Reference

- `exportCSV(filename?: string): Promise<void>` — Download the current view (after filter and sort) as CSV, named `export.csv` unless `filename` is given.

  ```ts
  await api.exportCSV(`orders-${new Date().toISOString().slice(0, 10)}.csv`);
  ```

---
Page: https://bonguynvan.github.io/bo-grid/docs/export/ · All pages: https://bonguynvan.github.io/bo-grid/llms.txt