# How to Export Data from the DBX Data Grid: Complete Guide to CSV, JSON, XLSX, and SQL

> Easily export data from the DBX data grid to CSV, JSON, XLSX, and SQL. Learn how to use the useDataGridExport composable for frontend or backend streaming of your data.

- Repository: [skyler/dbx](https://github.com/t8y2/dbx)
- Tags: how-to-guide
- Published: 2026-07-03

---

**You can export data from the DBX data grid using the `useDataGridExport` composable which supports CSV, JSON, Markdown, XLSX, and SQL formats through both frontend in-memory generation and Rust/Tauri backend streaming for large datasets.**

The DBX desktop application provides a robust export architecture that handles everything from quick clipboard copies to streaming multi-gigabyte table exports. Located in the `t8y2/dbx` repository, the system centers around the `useDataGridExport` composable found in [`apps/desktop/src/composables/useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/apps/desktop/src/composables/useDataGridExport.ts), which coordinates between Vue frontend code and Rust backend routes to deliver data in your preferred format.

## Export Methods Available in DBX

DBX supports six distinct export operations, each accessible through specific methods in the export composable.

### Supported Export Formats

The following table maps each export format to its UI entry point and backend implementation:

| Export format | Composable method | Backend API call | Implementation location |
|---------------|-------------------|------------------|-------------------------|
| **CSV** | `exportCsv` | `api.exportQueryResultCsv` or `api.startTableExport` | Line 998 in [`useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/useDataGridExport.ts) |
| **JSON** | `exportJson` | `api.exportQueryResultJson` or `api.startTableExport` | Line 1011 in [`useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/useDataGridExport.ts) |
| **Markdown** | `exportMarkdown` | `api.exportQueryResultMarkdown` or `api.startTableExport` | Line 1061 in [`useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/useDataGridExport.ts) |
| **XLSX** | `exportXlsx` | `api.exportQueryResultXlsx` or `api.startTableExport` | Line 1073 in [`useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/useDataGridExport.ts) |
| **SQL (INSERT)** | `exportSql` | `api.startTableExport` (SQL format) | Line 1068 in [`useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/useDataGridExport.ts) |
| **Clipboard** | `copySelectionCsv`, `copyRowAsInsert`, etc. | Frontend only | [`lib/gridSelection.ts`](https://github.com/t8y2/dbx/blob/main/lib/gridSelection.ts) |

### Scope Options: Selection vs Full Table

Every export method accepts an optional `rowIds` parameter that determines the export scope:

- **Selected rows only**: Pass an array of row IDs to export specific records
- **Current page**: Export only the visible grid page (controlled by `useFullExportResult = false`)
- **Full table**: Export all rows in the underlying query result or table (default behavior)

## How the Export System Works

The export workflow follows a coordinated flow between the Vue frontend, Tauri API layer, and Rust backend.

### The useDataGridExport Composable

The `useDataGridExport` composable serves as the central export coordinator. When invoked, it performs several key operations:

1. **Determines export scope** via `resultToExport`, which checks if `rowIds` were provided or if the full result set (`fullExportResult`) is required
2. **Generates sanitized filenames** using `defaultDataGridExportFileName` (lines 995-1002), producing timestamped names like `customers_page_260602150405.csv`
3. **Chooses execution path** based on the export context and data size
4. **Manages progress state** through `exportProgressState` and `exportProgressDialog`

### Backend vs Frontend Export Paths

DBX intelligently routes exports based on data context and size:

**Backend Streaming (Rust/Tauri)**:
- Triggered for **query-result** exports via `exportQueryResultViaBackend` and `exportFullTableDataViaBackend`
- Uses `api.startQueryResultExport` or `api.startTableExport` to stream rows from [`crates/dbx-web/src/routes/table_export.rs`](https://github.com/t8y2/dbx/blob/main/crates/dbx-web/src/routes/table_export.rs)
- Reports progress periodically through Tauri events (lines 868-896)
- Ideal for large tables that would overwhelm browser memory

**Frontend Processing**:
- Used for clipboard operations and small result sets
- Builds entire CSV/JSON content in memory
- Writes files using `api.exportQueryResult*` methods (lines 663-679)
- In Tauri environments, triggers the native save dialog via `@tauri-apps/plugin-dialog`
- In web environments, generates Blob URLs for download

### Progress Tracking and UI Feedback

During backend exports, the system updates `exportProgressState` on every progress callback, driving a modal progress dialog. Upon completion:

- **Success**: Displays toast notification via `useToast` with translation key `t("grid.exported")`
- **Failure**: Shows error message using `t("grid.exportFailed")`

## Implementing Exports in Your Code

### Export the Entire Current Table as CSV

To export a complete table without selection, invoke the CSV method with no arguments:

```typescript
import { useDataGridExport } from '~/composables/useDataGridExport'

// Inside your component
const { exportCsv } = useDataGridExport(options)

// Trigger full table export
await exportCsv()  // No rowIds parameter exports full result set

```

### Export Selected Rows as JSON

Pass an array of selected row IDs to limit the export scope:

```typescript
const { exportJson } = useDataGridExport(options)

// selectedRowIds is a Set<number> from your grid selection
await exportJson(Array.from(selectedRowIds))

```

### Export Current Page as XLSX

For paginated grids, export only the visible rows:

```typescript
const { exportCurrentPageXlsx } = useDataGridExport(options)

await exportCurrentPageXlsx()  // Uses resultToExport(false) internally

```

### Export Multiple Result Sets as XLSX Workbook

When working with multiple query results, export them as separate sheets in a single workbook:

```typescript
const { exportAllResultsXlsx } = useDataGridExport(options)

// Calls api.exportQueryResultsXlsx with all result sets
await exportAllResultsXlsx()

```

### Copy Selection to Clipboard

For quick data transfer without file creation:

```typescript
const { copySelectionTsv, copyRowAsInsert } = useDataGridExport(options)

// Copy selected cells as tab-separated values
await copySelectionTsv()

// Copy current row as SQL INSERT statement
await copyRowAsInsert()

```

## Key Source Files and Architecture

Understanding the file structure helps when extending export functionality:

- **[`apps/desktop/src/composables/useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/apps/desktop/src/composables/useDataGridExport.ts)**: Central export logic, progress handling, and format coordination
- **[`apps/desktop/src/lib/api.ts`](https://github.com/t8y2/dbx/blob/main/apps/desktop/src/lib/api.ts)**: Thin wrapper around Tauri RPC calls including `exportQueryResultCsv`, `startTableExport`, and streaming endpoints
- **[`apps/desktop/src/lib/dataGridSql.ts`](https://github.com/t8y2/dbx/blob/main/apps/desktop/src/lib/dataGridSql.ts)**: SQL generation helpers for `copyRowAsInsert` and similar features
- **[`apps/desktop/src/lib/gridSelection.ts`](https://github.com/t8y2/dbx/blob/main/apps/desktop/src/lib/gridSelection.ts)**: Cell formatting utilities for clipboard operations (CSV, TSV, JSON)
- **[`crates/dbx-web/src/routes/table_export.rs`](https://github.com/t8y2/dbx/blob/main/crates/dbx-web/src/routes/table_export.rs)**: Rust backend implementation handling large-scale table exports with streaming and progress reporting
- **[`apps/desktop/src/composables/useToast.ts`](https://github.com/t8y2/dbx/blob/main/apps/desktop/src/composables/useToast.ts)**: Notification system for export success/failure states
- **[`apps/desktop/src/stores/settingsStore.ts`](https://github.com/t8y2/dbx/blob/main/apps/desktop/src/stores/settingsStore.ts)**: Export configuration including row limits and batch sizes

## Summary

- **Use `useDataGridExport`** from [`apps/desktop/src/composables/useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/apps/desktop/src/composables/useDataGridExport.ts) as the primary interface for all export operations
- **Choose appropriate scope**: Pass `rowIds` for selection exports, or omit for full table exports
- **Leverage backend streaming** for large datasets via `api.startTableExport` and the Rust routes in [`table_export.rs`](https://github.com/t8y2/dbx/blob/main/table_export.rs)
- **Support six formats**: CSV, JSON, Markdown, XLSX, SQL INSERT statements, and clipboard variants
- **Handle progress**: Export state automatically updates `exportProgressDialog` during backend operations
- **Generate filenames automatically**: The `defaultDataGridExportFileName` utility creates timestamped, sanitized filenames

## Frequently Asked Questions

### How do I export only selected rows from the DBX data grid?

Pass the selected row IDs as an array to any export method. For example, `await exportCsv(Array.from(selectedRowIds))` exports only the selected rows as CSV. If you pass no arguments, the composable exports the full result set via `fullExportResult`.

### What is the difference between frontend and backend exports in DBX?

Frontend exports build the entire file in browser memory using `api.exportQueryResult*` methods, suitable for smaller datasets. Backend exports stream data through Tauri events from the Rust side ([`crates/dbx-web/src/routes/table_export.rs`](https://github.com/t8y2/dbx/blob/main/crates/dbx-web/src/routes/table_export.rs)), handling large tables without memory issues and reporting progress through `exportProgressState`.

### Can I export DBX data grid results as Excel files?

Yes, use the `exportXlsx` method for single results or `exportAllResultsXlsx` for multiple result sets. These methods call `api.exportQueryResultXlsx` or `api.startTableExport` depending on whether backend streaming is required, and generate properly formatted `.xlsx` files.

### How does DBX handle filename generation for exports?

The composable automatically generates sanitized, timestamped filenames using `defaultDataGridExportFileName` (lines 995-1002 in [`useDataGridExport.ts`](https://github.com/t8y2/dbx/blob/main/useDataGridExport.ts)). Names follow the pattern `{table_name}_page_{timestamp}.{extension}`, ensuring uniqueness and filesystem compatibility.