add column to JSON view

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