resize datagrid columns

packages/web/src/datagrid/ColumnHeaderControl.svelte

@@ -1,14 +1,17 @@
-<script lang="ts">
+<script>
   import FontIcon from '../icons/FontIcon.svelte';
   import DropDownButton from '../elements/DropDownButton.svelte';
+  import splitterDrag from '../utility/splitterDrag';
 
   import ColumnLabel from './ColumnLabel.svelte';
 
   export let column;
   export let conid = undefined;
   export let database = undefined;
+  export let setSort;
   export let grouping = undefined;
   export let order = undefined;
+  export let setGrouping;
 </script>
 
 <div class="header">
@@ -31,6 +34,7 @@
     </span>
   {/if}
   <DropDownButton />
+  <div class="horizontal-split-handle resizeHandleControl" use:splitterDrag={'clientX'} on:resizeSplitter />
 </div>
 
 <style>
@@ -48,12 +52,12 @@
   .icon {
     margin-left: 3px;
   }
-  .resizer {
+  /* .resizer {
     background-color: var(--theme-border);
     width: 2px;
     cursor: col-resize;
     z-index: 1;
-  }
+  } */
   .grouping {
     color: var(--theme-font-alt);
     white-space: nowrap;

packages/web/src/datagrid/DataFilterControl.svelte

@@ -1,8 +1,9 @@
-<script lang="ts" context="module">
+<script context="module">
 </script>
 
-<script lang="ts">
+<script>
-import { createMultiLineFilter } from 'dbgate-filterparser';
+  import { createMultiLineFilter } from 'dbgate-filterparser';
+  import splitterDrag from '../utility/splitterDrag';
 
   import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal.svelte';
 
@@ -16,6 +17,7 @@ import { createMultiLineFilter } from 'dbgate-filterparser';
   export let filterType;
   export let filter;
   export let setFilter;
+  export let showResizeSplitter = false;
 
   let value;
 
@@ -149,6 +151,9 @@ import { createMultiLineFilter } from 'dbgate-filterparser';
 <div class="flex">
   <input type="text" readOnly={isReadOnly} bind:value on:keydown={handleKeyDown} />
   <DropDownButton icon="icon filter" menu={createMenu} />
+  {#if showResizeSplitter}
+    <div class="horizontal-split-handle resizeHandleControl" use:splitterDrag={'clientX'} on:resizeSplitter />
+  {/if}
 </div>
 
 <style>

packages/web/src/datagrid/DataGridCore.svelte

@@ -355,7 +355,19 @@
             data-col={col.colIndex}
             style={`width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px`}
           >
-            <ColumnHeaderControl column={col} {conid} {database} />
+            <ColumnHeaderControl
+              column={col}
+              {conid}
+              {database}
+              setSort={display.sortable ? order => display.setSort(col.uniqueName, order) : null}
+              order={display.getSortOrder(col.uniqueName)}
+              on:resizeSplitter={e => {
+                // @ts-ignore
+                display.resizeColumn(col.uniqueName, col.width, e.detail);
+              }}
+              setGrouping={display.sortable ? groupFunc => display.setGrouping(col.uniqueName, groupFunc) : null}
+              grouping={display.getGrouping(col.uniqueName)}
+            />
           </td>
         {/each}
       </tr>
@@ -384,6 +396,11 @@
                 filterType={getFilterType(col.dataType)}
                 filter={display.getFilter(col.uniqueName)}
                 setFilter={value => display.setFilter(col.uniqueName, value)}
+                showResizeSplitter
+                on:resizeSplitter={e => {
+                  // @ts-ignore
+                  display.resizeColumn(col.uniqueName, col.width, e.detail);
+                }}
               />
             </td>
           {/each}