collapsiple grid left column

packages/web/src/datagrid/CollapseButton.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let collapsed;
+</script>
+
+<div on:click|stopPropagation class='collapseButtonMarker'>
+  <FontIcon icon={collapsed ? 'icon triple-right' : 'icon triple-left'} />
+</div>
+
+<style>
+  div {
+    position: absolute;
+    left: 0px;
+    top: 4px;
+    color: var(--theme-font-3);
+    background-color: var(--theme-bg-1);
+    border: 1px solid var(--theme-bg-1);
+  }
+
+  div:hover {
+    color: var(--theme-font-hover);
+    border: var(--theme-border);
+    top: 4px;
+  }
+</style>

packages/web/src/datagrid/DataGrid.svelte

@@ -88,6 +88,7 @@
   setContext('macroValues', macroValues);
 
   let managerSize;
+  let collapsedLeftColumnStore = writable(false);
 
   $: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
   $: isJsonView = !!config?.isJsonView;
@@ -127,15 +128,10 @@
   );
 </script>
 
-<HorizontalSplitter initialValue="300px" bind:size={managerSize}>
+<HorizontalSplitter initialValue="300px" bind:size={managerSize} hideFirst={$collapsedLeftColumnStore}>
   <div class="left" slot="1">
     <WidgetColumnBar>
-      <WidgetColumnBarItem
-        title="Columns"
-        name="columns"
-        height='45%'
-        skip={freeTableColumn || isFormView}
-      >
+      <WidgetColumnBarItem title="Columns" name="columns" height="45%" skip={freeTableColumn || isFormView}>
         <ColumnManager {...$$props} {managerSize} {isJsonView} />
       </WidgetColumnBarItem>
 
@@ -177,6 +173,7 @@
           <svelte:component
             this={gridCoreComponent}
             {...$$props}
+            {collapsedLeftColumnStore}
             formViewAvailable={!!formViewComponent && !!formDisplay}
             macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
             macroPreview={$selectedMacro}

packages/web/src/datagrid/DataGridCore.svelte

@@ -202,6 +202,7 @@
   import FormStyledButton from '../elements/FormStyledButton.svelte';
   import { editJsonRowDocument } from '../jsonview/CollectionJsonRow.svelte';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import CollapseButton from './CollapseButton.svelte';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -223,6 +224,7 @@
   export let changeSetStore;
   export let isDynamicStructure = false;
   export let selectedCellsPublished = () => [];
+  export let collapsedLeftColumnStore;
   // export let generalAllowSave = false;
 
   export const activator = createActivator('DataGridCore', false);
@@ -565,6 +567,7 @@
   function handleGridMouseDown(event) {
     if (event.target.closest('.buttonLike')) return;
     if (event.target.closest('.resizeHandleControl')) return;
+    if (event.target.closest('.collapseButtonMarker')) return;
     if (event.target.closest('input')) return;
 
     // event.target.closest('table').focus();
@@ -991,7 +994,12 @@
             data-row="header"
             data-col="header"
             style={`width:${headerColWidth}px; min-width:${headerColWidth}px; max-width:${headerColWidth}px`}
-          />
+          >
+            <CollapseButton
+              collapsed={$collapsedLeftColumnStore}
+              on:click={() => collapsedLeftColumnStore.update(x => !x)}
+            />
+          </td>
           {#each visibleRealColumns as col (col.uniqueName)}
             <td
               class="header-cell"

packages/web/src/elements/HorizontalSplitter.svelte

@@ -16,6 +16,7 @@
 
   export let isSplitter = true;
   export let initialValue = undefined;
+  export let hideFirst = false;
 
   export let size = 0;
   let clientWidth;
@@ -24,11 +25,15 @@
 </script>
 
 <div class="container" bind:clientWidth>
-  <div class="child1" style={isSplitter ? `width:${size}px; min-width:${size}px; max-width:${size}px}` : `flex:1`}>
-    <slot name="1" />
-  </div>
+  {#if !hideFirst}
+    <div class="child1" style={isSplitter ? `width:${size}px; min-width:${size}px; max-width:${size}px}` : `flex:1`}>
+      <slot name="1" />
+    </div>
+  {/if}
   {#if isSplitter}
-    <div class="horizontal-split-handle" use:splitterDrag={'clientX'} on:resizeSplitter={e => (size += e.detail)} />
+    {#if !hideFirst}
+      <div class="horizontal-split-handle" use:splitterDrag={'clientX'} on:resizeSplitter={e => (size += e.detail)} />
+    {/if}
     <div class="child2">
       <slot name="2" />
     </div>

packages/web/src/icons/FontIcon.svelte

@@ -48,6 +48,8 @@
     'icon arrow-begin': 'mdi mdi-arrow-collapse-left',
     'icon arrow-end': 'mdi mdi-arrow-collapse-right',
     'icon arrow-right': 'mdi mdi-arrow-right',
+    'icon triple-left': 'mdi mdi-chevron-triple-left',
+    'icon triple-right': 'mdi mdi-chevron-triple-right',
     'icon format-code': 'mdi mdi-code-tags-check',
     'icon show-wizard': 'mdi mdi-comment-edit',
     'icon disconnected': 'mdi mdi-lan-disconnect',