add column to JSON view

packages/datalib/src/CollectionGridDisplay.ts

@@ -70,9 +70,14 @@ function getDisplayColumn(basePath, columnName, display) {
 
 export function analyseCollectionDisplayColumns(rows, display) {
   const res = [];
+  const addedColumns = display?.config?.addedColumns;
   for (const row of rows || []) {
     getColumnsForObject([], row, res, display);
   }
+  for (const added of addedColumns || []) {
+    if (res.find(x => x.uniqueName == added)) continue;
+    res.push(getDisplayColumn([], added, display));
+  }
   return (
     res.map(col => ({
       ...col,

packages/datalib/src/GridDisplay.ts

@@ -92,6 +92,10 @@ export abstract class GridDisplay {
     }
   }
 
+  addDynamicColumn(name: string) {
+    this.includeInColumnSet('addedColumns', name, true);
+  }
+
   focusColumn(uniqueName: string) {
     this.setConfig(cfg => ({
       ...cfg,

packages/web/src/datagrid/ColumnManager.svelte

@@ -7,17 +7,34 @@
 
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
+  import InputTextModal from '../modals/InputTextModal.svelte';
+  import { showModal } from '../modals/modalTools';
   import ColumnManagerRow from './ColumnManagerRow.svelte';
 
   export let managerSize;
   export let display: GridDisplay;
   export let isJsonView = false;
+  export let isDynamicStructure = false;
 
   let filter;
 </script>
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search columns" bind:value={filter} />
+  {#if isDynamicStructure && !isJsonView}
+    <InlineButton
+      on:click={() => {
+        showModal(InputTextModal, {
+          value: '',
+          label: 'Column name',
+          header: 'Add new column',
+          onConfirm: name => {
+            display.addDynamicColumn(name);
+          },
+        });
+      }}>Add</InlineButton
+    >
+  {/if}
   <InlineButton on:click={() => display.hideAllColumns()}>Hide</InlineButton>
   <InlineButton on:click={() => display.showAllColumns()}>Show</InlineButton>
 </SearchBoxWrapper>

packages/web/src/datagrid/DataGrid.svelte

@@ -153,7 +153,7 @@
         height="45%"
         show={(!freeTableColumn || isDynamicStructure) && !isFormView}
       >
-        <ColumnManager {...$$props} {managerSize} {isJsonView} />
+        <ColumnManager {...$$props} {managerSize} {isJsonView} {isDynamicStructure} />
       </WidgetColumnBarItem>
 
       <WidgetColumnBarItem