#64

packages/web/src/datagrid/DataGridRow.svelte

@@ -66,7 +66,8 @@
         {isDynamicStructure}
         isAutoFillMarker={autofillMarkerCell &&
           autofillMarkerCell[1] == col.colIndex &&
-          autofillMarkerCell[0] == rowIndex}
+          autofillMarkerCell[0] == rowIndex &&
+          grider.editable}
       />
     {/if}
   {/each}

packages/web/src/elements/TabControl.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import _ from 'lodash';
+  import DropDownButton from './DropDownButton.svelte';
 
   interface TabDef {
     label: string;
@@ -10,6 +11,7 @@
 
   export let tabs: TabDef[];
   export let value = 0;
+  export let menu = null;
   export let isInline = false;
 
   export function setValue(index) {
@@ -29,6 +31,9 @@
         </span>
       </div>
     {/each}
+    {#if menu}
+      <DropDownButton {menu} />
+    {/if}
   </div>
 
   <div class="content-container">

packages/web/src/query/AllResultsTab.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import JslDataGrid from '../datagrid/JslDataGrid.svelte';
+
+  export let resultInfos = [];
+</script>
+
+<div
+  class="main"
+  class:main1={resultInfos.length == 1}
+  class:main2={resultInfos.length == 2}
+  class:main3={resultInfos.length > 2}
+>
+  {#each resultInfos as info}
+    <div class="wrapper">
+      <JslDataGrid jslid={info.jslid} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .main1 .wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+  .main2 .wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: calc(50% - 2px);
+    border-bottom: 2px solid var(--theme-border);
+  }
+  .main3 .wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 40%;
+    border-bottom: 2px solid var(--theme-border);
+  }
+  .main {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .main3 {
+    overflow-y: scroll;
+  }
+</style>

packages/web/src/query/ResultTabs.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
   import _ from 'lodash';
 
-  import { tick } from 'svelte';
+  import { onMount, tick } from 'svelte';
 
   import JslDataGrid from '../datagrid/JslDataGrid.svelte';
   import TabControl from '../elements/TabControl.svelte';
+  import { allResultsInOneTabDefault } from '../stores';
   import socket from '../utility/socket';
   import useEffect from '../utility/useEffect';
+  import AllResultsTab from './AllResultsTab.svelte';
 
   export let tabs = [];
   export let sessionId;
   export let executeNumber;
 
+  onMount(() => {
+    allResultsInOneTab = $allResultsInOneTabDefault;
+  });
+
+  let allResultsInOneTab = null;
   let resultInfos = [];
   let domTabs;
 
@@ -23,14 +30,28 @@
     if (!currentTab?.isResult) domTabs.setValue(_.findIndex(allTabs, x => x.isResult));
   };
 
+  $: oneTab = allResultsInOneTab ?? $allResultsInOneTabDefault;
+
   $: allTabs = [
     ...tabs,
-    ...resultInfos.map((info, index) => ({
-      label: `Result ${index + 1}`,
-      isResult: true,
-      component: JslDataGrid,
-      props: { jslid: info.jslid },
-    })),
+
+    ...(oneTab
+      ? [
+          {
+            label: 'Results',
+            isResult: true,
+            component: AllResultsTab,
+            props: {
+              resultInfos,
+            },
+          },
+        ]
+      : resultInfos.map((info, index) => ({
+          label: `Result ${index + 1}`,
+          isResult: true,
+          component: JslDataGrid,
+          props: { jslid: info.jslid },
+        }))),
   ];
 
   $: {
@@ -53,9 +74,22 @@
     return () => {};
   }
   $: $effect;
+
+  function setOneTabValue(value) {
+    allResultsInOneTab = value;
+    $allResultsInOneTabDefault = value;
+  }
 </script>
 
-<TabControl bind:this={domTabs} tabs={allTabs}>
+<TabControl
+  bind:this={domTabs}
+  tabs={allTabs}
+  menu={[
+    oneTab
+      ? { text: 'Every result in single tab', onClick: () => setOneTabValue(false) }
+      : { text: 'All results in one tab', onClick: () => setOneTabValue(true) },
+  ]}
+>
   <slot name="0" slot="0" />
   <slot name="1" slot="1" />
   <slot name="2" slot="2" />

packages/web/src/stores.ts

@@ -42,6 +42,7 @@ export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.
 export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected));
 export const recentDatabases = writableWithStorage([], 'recentDatabases');
 export const customKeyboardShortcuts = writableWithStorage({}, 'customKeyboardShortcuts');
+export const allResultsInOneTabDefault = writableWithStorage(false, 'allResultsInOneTabDefault');
 export const commandsCustomized = derived(
   [commands, customKeyboardShortcuts],
   ([$commands, $customKeyboardShortcuts]) =>