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

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, 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
JSON	exportJson	api.exportQueryResultJson or api.startTableExport	Line 1011 in useDataGridExport.ts
Markdown	exportMarkdown	api.exportQueryResultMarkdown or api.startTableExport	Line 1061 in useDataGridExport.ts
XLSX	exportXlsx	api.exportQueryResultXlsx or api.startTableExport	Line 1073 in useDataGridExport.ts
SQL (INSERT)	exportSql	api.startTableExport (SQL format)	Line 1068 in useDataGridExport.ts
Clipboard	copySelectionCsv, copyRowAsInsert, etc.	Frontend only	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
• 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:

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:

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:

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:

const { exportAllResultsXlsx } = useDataGridExport(options)

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

Copy Selection to Clipboard

For quick data transfer without file creation:

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: Central export logic, progress handling, and format coordination
• apps/desktop/src/lib/api.ts: Thin wrapper around Tauri RPC calls including exportQueryResultCsv, startTableExport, and streaming endpoints
• apps/desktop/src/lib/dataGridSql.ts: SQL generation helpers for copyRowAsInsert and similar features
• apps/desktop/src/lib/gridSelection.ts: Cell formatting utilities for clipboard operations (CSV, TSV, JSON)
• 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: Notification system for export success/failure states
• apps/desktop/src/stores/settingsStore.ts: Export configuration including row limits and batch sizes

Summary

• Use useDataGridExport from 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
• 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), 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). Names follow the pattern {table_name}_page_{timestamp}.{extension}, ensuring uniqueness and filesystem compatibility.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}