open JSON array as tabular view

packages/web/src/jsontree/JSONArrayNode.svelte

@@ -25,4 +25,5 @@
   label="Array({value.length})"
   bracketOpen="["
   bracketClose="]"
+  elementValue={value}
 />

packages/web/src/jsontree/JSONNested.svelte

@@ -10,9 +10,11 @@
   export let getValue = key => key;
   export let getPreviewValue = getValue;
   export let expanded = false, expandable = true;
+  export let elementValue = null;
 
   const context = getContext('json-tree-context-key');
   setContext('json-tree-context-key', { ...context, colon })
+  const elementData=getContext('json-tree-element-data');
 
   $: slicedKeys = expanded ? keys: previewKeys.slice(0, 5);
 
@@ -28,6 +30,12 @@
     expanded = true;
   }
 
+  let domElement;
+
+  $: if (domElement && elementData && elementValue) {
+    elementData.set(domElement, elementValue)
+  }
+
 </script>
 <style>
   label {
@@ -51,7 +59,7 @@
     position: relative;
   }
 </style>
-<li class:indent={isParentExpanded}>
+<li class:indent={isParentExpanded} class:jsonValueHolder={!!elementValue} bind:this={domElement}>
   <label>
     {#if expandable && isParentExpanded}
       <JSONArrow on:click={toggleExpand} {expanded} />

packages/web/src/jsontree/JSONTree.svelte

@@ -2,6 +2,8 @@
   import JSONNode from './JSONNode.svelte';
   import { setContext } from 'svelte';
   import contextMenu, { getContextMenu } from '../utility/contextMenu';
+  import openNewTab from '../utility/openNewTab';
+  import _ from 'lodash';
 
   setContext('json-tree-context-key', {});
 
@@ -15,10 +17,45 @@
   export let isInserted;
   export let isModified;
 
+  const elementData = new WeakMap();
+
+  if (elementData) {
+    setContext('json-tree-element-data', elementData);
+  }
+
   const parentMenu = getContextMenu();
+
+  function getElementMenu({ targetElement }) {
+    if (!targetElement) return null;
+    const closest = targetElement.closest('.jsonValueHolder');
+    if (!closest) return;
+    const value = elementData.get(closest);
+
+    if (value && _.isArray(value)) {
+      return {
+        text: 'Open as data sheet',
+        onClick: () => {
+          openNewTab(
+            {
+              title: 'Data #',
+              icon: 'img free-table',
+              tabComponent: 'FreeTableTab',
+              props: {},
+            },
+            {
+              editor: {
+                rows: value,
+                structure: { __isDynamicStructure: true, columns: [] },
+              },
+            }
+          );
+        },
+      };
+    }
+  }
 </script>
 
-<ul use:contextMenu={[parentMenu, menu]} class:isDeleted class:isInserted class:isModified>
+<ul use:contextMenu={[parentMenu, menu, getElementMenu]} class:isDeleted class:isInserted class:isModified>
   <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} {expanded} {labelOverride} />
 </ul>