show selected columns in column manager

packages/web/src/datagrid/ColumnManager.svelte

@@ -82,6 +82,11 @@
   function copyToClipboard() {
     copyTextToClipboard(selectedColumns.join('\r\n'));
   }
+
+  export function setSelectedColumns(value) {
+    selectedColumns = value;
+    if (value.length > 0) currentColumnUniqueName = value[0];
+  }
 </script>
 
 <SearchBoxWrapper>

packages/web/src/datagrid/DataGrid.svelte

@@ -93,6 +93,7 @@
   export const activator = createActivator('DataGrid', false);
 
   let selectedCellsPublished = () => [];
+  let domColumnManager;
 
   const selectedMacro = writable(null);
   setContext('selectedMacro', selectedMacro);
@@ -169,7 +170,7 @@
         height="45%"
         show={(!freeTableColumn || isDynamicStructure) && !isFormView}
       >
-        <ColumnManager {...$$props} {managerSize} {isJsonView} {isDynamicStructure} />
+        <ColumnManager {...$$props} {managerSize} {isJsonView} {isDynamicStructure} bind:this={domColumnManager} />
       </WidgetColumnBarItem>
 
       <WidgetColumnBarItem
@@ -226,6 +227,9 @@
             macroPreview={$selectedMacro}
             bind:loadedRows
             bind:selectedCellsPublished
+            onChangeSelectedColumns={cols => {
+              if (domColumnManager) domColumnManager.setSelectedColumns(cols);
+            }}
           />
         {/if}
       </svelte:fragment>

packages/web/src/datagrid/DataGridCore.svelte

@@ -284,7 +284,7 @@
   import { findCommand } from '../commands/runCommand';
   import { openJsonDocument } from '../tabs/JsonTab.svelte';
   import EditJsonModal from '../modals/EditJsonModal.svelte';
-import { apiCall } from '../utility/api';
+  import { apiCall } from '../utility/api';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -296,6 +296,7 @@ import { apiCall } from '../utility/api';
   export let allRowCount = undefined;
   export let onReferenceSourceChanged = undefined;
   export let onReferenceClick = undefined;
+  export let onChangeSelectedColumns = undefined;
   // export let onSelectedCellsPublishedChanged = undefined;
   export let focusOnVisible = false;
   export let formViewAvailable = false;
@@ -787,6 +788,8 @@ import { apiCall } from '../utility/api';
       const cellsValue = () => getCellsPublished(selectedCells);
       selectedCellsPublished = cellsValue;
       $selectedCellsCallback = cellsValue;
+
+      if (onChangeSelectedColumns) onChangeSelectedColumns(getSelectedColumns().map(x => x.columnName));
       // if (onSelectedCellsPublishedChanged) onSelectedCellsPublishedChanged(getCellsPublished(selectedCells));
     }
   }