feat(grid): add export action to data grid top toolbar

apps/desktop/src/components/grid/DataGrid.vue

@@ -382,6 +382,7 @@ import {
   type DataGridToolbarActionCapability,
   type DataGridToolbarAddRowCapability,
   type DataGridToolbarAutoRefreshCapability,
+  type DataGridToolbarExportCapability,
   type DataGridToolbarSaveCapability,
 } from "@/lib/dataGrid/dataGridToolbar";
 import { getTableMetadataCapabilities } from "@/lib/table/tableMetadataCapabilities";
@@ -8603,6 +8604,13 @@ function selectExportMenuItem(value: string) {
   actions[value]?.();
 }
 
+const exportToolbarCapability = computed<DataGridToolbarExportCapability>(() => ({
+  label: t("grid.export"),
+  visible: props.result.columns.length > 0,
+  items: exportMenuItems.value,
+  onSelect: selectExportMenuItem,
+}));
+
 // --- Cell selection and detail ---
 function hydrateCellDetailTarget(target: { rowIndex: number; col: number }) {
   const item = displayItemAt(target.rowIndex);
@@ -12383,6 +12391,7 @@ watch(
 defineExpose({
   tableInfoToolbarCapability,
   goToColumnToolbarCapability,
+  exportToolbarCapability,
   useTransaction,
   transactionActive,
   isSaving,
@@ -12994,6 +13003,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
             :auto-refresh="autoRefreshToolbarCapability"
             :add-row="addRowToolbarCapability"
             :delete-row="deleteRowToolbarCapability"
+            :export-data="exportToolbarCapability"
             :layer-preview="layerPreviewToolbarCapability"
             :preview="previewToolbarCapability"
             :save="saveToolbarCapability"

apps/desktop/src/components/grid/__tests__/DataGridToolbarIconTooltips.spec.ts

@@ -6,7 +6,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import i18n from "@/i18n";
 import type { QueryResult } from "@/types/database";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import type { DataGridToolbarActionCapability } from "@/lib/dataGrid/dataGridToolbar";
+import type { DataGridToolbarActionCapability, DataGridToolbarExportCapability } from "@/lib/dataGrid/dataGridToolbar";
 
 vi.mock("@/composables/useDataGridColumnResize", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@/composables/useDataGridColumnResize")>();
@@ -109,7 +109,10 @@ function mountGrid() {
     affected_rows: 0,
     execution_time_ms: 0,
   });
-  const grid = ref<{ goToColumnToolbarCapability: DataGridToolbarActionCapability }>();
+  const grid = ref<{
+    goToColumnToolbarCapability: DataGridToolbarActionCapability;
+    exportToolbarCapability: DataGridToolbarExportCapability;
+  }>();
   const host = document.createElement("div");
   document.body.append(host);
   const Root = defineComponent({
@@ -212,6 +215,21 @@ describe("data grid icon-only toolbar tooltips", () => {
     expect(host.querySelector("[data-column-lookup-panel]")).not.toBeNull();
     expect(host.querySelector('[data-slot="popover-content"]')).toBeNull();
   });
+
+  it("provides export capability and renders the export button in the top toolbar", async () => {
+    const { host, grid } = mountGrid();
+    await settle();
+
+    expect(grid.value?.exportToolbarCapability.visible).toBe(true);
+    expect(grid.value?.exportToolbarCapability.label).toBe("Export");
+    expect(grid.value?.exportToolbarCapability.items.length).toBeGreaterThan(0);
+
+    const button = toolbarButton(host, "exportData");
+    expect(button).not.toBeNull();
+    await click(button);
+
+    expectPositionedSurface("dropdown-menu-content");
+  });
 });
 
 // Reka resolves the popper anchor from the nearest popper root. Wrapping an overlay