quick export from table data grid toolstrip

packages/web/src/tabs/TableDataTab.svelte

@@ -56,6 +56,8 @@
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripDropDownButton from '../buttons/ToolStripDropDownButton.svelte';
+  import { createQuickExportMenuItems } from '../utility/createQuickExportMenu';
 
   export let tabid;
   export let conid;
@@ -116,6 +118,19 @@
   const collapsedLeftColumnStore = writable(getLocalStorage('dataGrid_collapsedLeftColumn', false));
   setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
   $: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
+
+  let quickExportHandler = null;
+  function setQuickExportHandler(value) {
+    quickExportHandler = value;
+  }
+  setContext('setQuickExportHandler', setQuickExportHandler);
+  function getExportMenu() {
+    return [
+      quickExportHandler ? createQuickExportMenuItems($extensions, quickExportHandler) : null,
+      { divider: true },
+      { command: 'sqlDataGrid.export', text: 'Advanced settings' },
+    ];
+  }
 </script>
 
 <ToolStripContainer>
@@ -135,6 +150,8 @@
     <ToolStripCommandButton command="dataGrid.refresh" />
     <ToolStripCommandButton command="tableData.save" />
     <ToolStripCommandButton command="dataGrid.insertNewRow" />
+    <ToolStripCommandButton command="dataGrid.deleteSelectedRows" />
+    <ToolStripDropDownButton menu={getExportMenu} label="Export" icon="icon export" />
   </svelte:fragment>
 </ToolStripContainer>
 

packages/web/src/tabs/ViewDataTab.svelte

@@ -8,6 +8,8 @@
   import { findEngineDriver } from 'dbgate-tools';
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
+import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
 
   import DataGrid from '../datagrid/DataGrid.svelte';
   import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
@@ -51,16 +53,22 @@
 </script>
 
 {#if display}
-  <DataGrid
-    {...$$props}
-    {display}
-    config={$config}
-    setConfig={config.update}
-    cache={$cache}
-    setCache={cache.update}
-    focusOnVisible
-    gridCoreComponent={SqlDataGridCore}
-  />
+  <ToolStripContainer>
+    <DataGrid
+      {...$$props}
+      {display}
+      config={$config}
+      setConfig={config.update}
+      cache={$cache}
+      setCache={cache.update}
+      focusOnVisible
+      gridCoreComponent={SqlDataGridCore}
+    />
+    <svelte:fragment slot="toolstrip">
+      <ToolStripCommandButton command="dataGrid.refresh" />
+      <ToolStripCommandButton command="sqlDataGrid.export" />
+    </svelte:fragment>
+  </ToolStripContainer>
 {/if}
 
 <StatusBarTabItem