diff --git a/packages/datalib/src/PerspectiveDisplay.ts b/packages/datalib/src/PerspectiveDisplay.ts
index 18c80ed5f..d2db82d2f 100644
--- a/packages/datalib/src/PerspectiveDisplay.ts
+++ b/packages/datalib/src/PerspectiveDisplay.ts
@@ -216,7 +216,12 @@ export class PerspectiveDisplay {
     for (let i = 0; i < collectedRow.columnIndexes.length; i++) {
       mainRow.rowData[collectedRow.columnIndexes[i]] = collectedRow.rowData[i];
     }
-    mainRow.incompleteRowsIndicator = collectedRow.incompleteRowsIndicator;
+    if (collectedRow.incompleteRowsIndicator) {
+      mainRow.incompleteRowsIndicator = [
+        ...(mainRow.incompleteRowsIndicator || []),
+        ...collectedRow.incompleteRowsIndicator,
+      ];
+    }
 
     let rowCount = 1;
     for (const subrows of collectedRow.subRowCollections) {
diff --git a/packages/web/src/datagrid/CellValue.svelte b/packages/web/src/datagrid/CellValue.svelte
new file mode 100644
index 000000000..87414b00d
--- /dev/null
+++ b/packages/web/src/datagrid/CellValue.svelte
@@ -0,0 +1,104 @@
+<script context="module">
+  function makeBulletString(value) {
+    return _.pad('', value.length, '•');
+  }
+
+  function highlightSpecialCharacters(value) {
+    value = value.replace(/\n/g, '↲');
+    value = value.replace(/\r/g, '');
+    value = value.replace(/^(\s+)/, makeBulletString);
+    value = value.replace(/(\s+)$/, makeBulletString);
+    value = value.replace(/(\s\s+)/g, makeBulletString);
+    return value;
+  }
+
+  // const dateTimeRegex = /^\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d\d\d)?Z?$/;
+  const dateTimeRegex =
+    /^([0-9]+)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])[Tt]([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]|60)(\.[0-9]+)?(([Zz])|()|([\+|\-]([01][0-9]|2[0-3]):[0-5][0-9]))$/;
+
+  function formatNumber(value) {
+    if (value >= 10000 || value <= -10000) {
+      if (getBoolSettingsValue('dataGrid.thousandsSeparator', false)) {
+        return value.toLocaleString();
+      } else {
+        return value.toString();
+      }
+    }
+
+    return value.toString();
+  }
+
+  function formatDateTime(testedString) {
+    const m = testedString.match(dateTimeRegex);
+    return `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}:${m[6]}`;
+  }
+</script>
+
+<script lang="ts">
+  import _, { isPlainObject, join } from 'lodash';
+  import ShowFormButton from '../formview/ShowFormButton.svelte';
+  import { getBoolSettingsValue } from '../settings/settingsTools';
+  import { arrayToHexString, isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
+  import { showModal } from '../modals/modalTools';
+  import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
+  import { openJsonDocument } from '../tabs/JsonTab.svelte';
+  import openNewTab from '../utility/openNewTab';
+
+  export let rowData;
+  export let value;
+  export let jsonParsedValue = undefined;
+</script>
+
+{#if rowData == null}
+  <span class="null">(No row)</span>
+{:else if value === null}
+  <span class="null">(NULL)</span>
+{:else if value === undefined}
+  <span class="null">(No field)</span>
+{:else if _.isDate(value)}
+  {value.toString()}
+{:else if value === true}
+  <span class="value">true</span>
+{:else if value === false}
+  <span class="value">false</span>
+{:else if _.isNumber(value)}
+  <span class="value">{formatNumber(value)}</span>
+{:else if _.isString(value) && !jsonParsedValue}
+  {#if dateTimeRegex.test(value)}
+    <span class="value">
+      {formatDateTime(value)}
+    </span>
+  {:else}
+    {highlightSpecialCharacters(value)}
+  {/if}
+{:else if value?.type == 'Buffer' && _.isArray(value.data)}
+  {#if value.data.length <= 16}
+    <span class="value">{'0x' + arrayToHexString(value.data)}</span>
+  {:else}
+    <span class="null">({value.data.length} bytes)</span>
+  {/if}
+{:else if value.$oid}
+  <span class="value">ObjectId("{value.$oid}")</span>
+{:else if _.isPlainObject(value)}
+  <span class="null" title={JSON.stringify(value, undefined, 2)}>(JSON)</span>
+{:else if _.isArray(value)}
+  <span class="null" title={value.map(x => JSON.stringify(x)).join('\n')}>[{value.length} items]</span>
+{:else if _.isPlainObject(jsonParsedValue)}
+  <span class="null" title={JSON.stringify(jsonParsedValue, undefined, 2)}>(JSON)</span>
+{:else if _.isArray(jsonParsedValue)}
+  <span class="null" title={jsonParsedValue.map(x => JSON.stringify(x)).join('\n')}
+    >[{jsonParsedValue.length} items]</span
+  >
+{:else}
+  {value.toString()}
+{/if}
+
+<style>
+  .null {
+    color: var(--theme-font-3);
+    font-style: italic;
+  }
+  .value {
+    color: var(--theme-icon-green);
+  }
+</style>
diff --git a/packages/web/src/datagrid/DataGridCell.svelte b/packages/web/src/datagrid/DataGridCell.svelte
index e342663ba..2a3ddee5b 100644
--- a/packages/web/src/datagrid/DataGridCell.svelte
+++ b/packages/web/src/datagrid/DataGridCell.svelte
@@ -1,38 +1,3 @@
-<script context="module">
-  function makeBulletString(value) {
-    return _.pad('', value.length, '•');
-  }
-
-  function highlightSpecialCharacters(value) {
-    value = value.replace(/\n/g, '↲');
-    value = value.replace(/\r/g, '');
-    value = value.replace(/^(\s+)/, makeBulletString);
-    value = value.replace(/(\s+)$/, makeBulletString);
-    value = value.replace(/(\s\s+)/g, makeBulletString);
-    return value;
-  }
-
-  // const dateTimeRegex = /^\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d\d\d)?Z?$/;
-  const dateTimeRegex = /^([0-9]+)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])[Tt]([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]|60)(\.[0-9]+)?(([Zz])|()|([\+|\-]([01][0-9]|2[0-3]):[0-5][0-9]))$/;
-
-  function formatNumber(value) {
-    if (value >= 10000 || value <= -10000) {
-      if (getBoolSettingsValue('dataGrid.thousandsSeparator', false)) {
-        return value.toLocaleString();
-      } else {
-        return value.toString();
-      }
-    }
-
-    return value.toString();
-  }
-
-  function formatDateTime(testedString) {
-    const m = testedString.match(dateTimeRegex);
-    return `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}:${m[6]}`;
-  }
-</script>
-
 <script lang="ts">
   import _, { isPlainObject, join } from 'lodash';
   import ShowFormButton from '../formview/ShowFormButton.svelte';
@@ -42,6 +7,7 @@
   import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
   import { openJsonDocument } from '../tabs/JsonTab.svelte';
   import openNewTab from '../utility/openNewTab';
+  import CellValue from './CellValue.svelte';
 
   export let rowIndex;
   export let col;
@@ -101,49 +67,7 @@
   class:isFocusedColumn
   {style}
 >
-  {#if rowData == null}
-    <span class="null">(No row)</span>
-  {:else if value === null}
-    <span class="null">(NULL)</span>
-  {:else if value === undefined}
-    <span class="null">(No field)</span>
-  {:else if _.isDate(value)}
-    {value.toString()}
-  {:else if value === true}
-    <span class="value">true</span>
-  {:else if value === false}
-    <span class="value">false</span>
-  {:else if _.isNumber(value)}
-    <span class="value">{formatNumber(value)}</span>
-  {:else if _.isString(value) && !jsonParsedValue}
-    {#if dateTimeRegex.test(value)}
-      <span class="value">
-        {formatDateTime(value)}
-      </span>
-    {:else}
-      {highlightSpecialCharacters(value)}
-    {/if}
-  {:else if value?.type == 'Buffer' && _.isArray(value.data)}
-    {#if value.data.length <= 16}
-      <span class="value">{'0x' + arrayToHexString(value.data)}</span>
-    {:else}
-      <span class="null">({value.data.length} bytes)</span>
-    {/if}
-  {:else if value.$oid}
-    <span class="value">ObjectId("{value.$oid}")</span>
-  {:else if _.isPlainObject(value)}
-    <span class="null" title={JSON.stringify(value, undefined, 2)}>(JSON)</span>
-  {:else if _.isArray(value)}
-    <span class="null" title={value.map(x => JSON.stringify(x)).join('\n')}>[{value.length} items]</span>
-  {:else if _.isPlainObject(jsonParsedValue)}
-    <span class="null" title={JSON.stringify(jsonParsedValue, undefined, 2)}>(JSON)</span>
-  {:else if _.isArray(jsonParsedValue)}
-    <span class="null" title={jsonParsedValue.map(x => JSON.stringify(x)).join('\n')}
-      >[{jsonParsedValue.length} items]</span
-    >
-  {:else}
-    {value.toString()}
-  {/if}
+  <CellValue {rowData} {value} {jsonParsedValue} />
 
   {#if allowHintField && rowData && _.some(col.hintColumnNames, hintColumnName => rowData[hintColumnName])}
     <span class="hint"
@@ -256,13 +180,6 @@
     color: var(--theme-font-3);
     margin-left: 5px;
   }
-  .null {
-    color: var(--theme-font-3);
-    font-style: italic;
-  }
-  .value {
-    color: var(--theme-icon-green);
-  }
 
   .autoFillMarker {
     width: 8px;
diff --git a/packages/web/src/perspectives/PerspectiveCell.svelte b/packages/web/src/perspectives/PerspectiveCell.svelte
new file mode 100644
index 000000000..8304fc4c6
--- /dev/null
+++ b/packages/web/src/perspectives/PerspectiveCell.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import CellValue from '../datagrid/CellValue.svelte';
+
+  export let value;
+  export let rowSpan;
+  export let rowData;
+</script>
+
+<td rowspan={rowSpan}>
+  {#if value !== undefined}
+    <CellValue {rowData} {value} />
+  {/if}
+</td>
+
+<style>
+  td {
+    font-weight: normal;
+    /* border: 1px solid var(--theme-border); */
+    background-color: var(--theme-bg-0);
+    padding: 2px;
+    position: relative;
+    overflow: hidden;
+    vertical-align: top;
+    border-bottom: 1px solid var(--theme-border);
+    border-right: 1px solid var(--theme-border);
+  }
+</style>
diff --git a/packages/web/src/perspectives/PerspectiveTable.svelte b/packages/web/src/perspectives/PerspectiveTable.svelte
index bbbd4d2cd..3074b6bda 100644
--- a/packages/web/src/perspectives/PerspectiveTable.svelte
+++ b/packages/web/src/perspectives/PerspectiveTable.svelte
@@ -13,7 +13,7 @@
 
 <script lang="ts">
   import { PerspectiveDisplay, PerspectiveTreeNode } from 'dbgate-datalib';
-  import _ from 'lodash';
+  import _, { values } from 'lodash';
   import { onMount } from 'svelte';
   import resizeObserver from '../utility/resizeObserver';
   import PerspectiveIntersectionObserver from './PerspectiveIntersectionObserver.svelte';
@@ -25,6 +25,8 @@
   import registerCommand from '../commands/registerCommand';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import { openJsonDocument } from '../tabs/JsonTab.svelte';
+  import PerspectiveCell from './PerspectiveCell.svelte';
+  import DataGridCell from '../datagrid/DataGridCell.svelte';
 
   const dbg = debug('dbgate:PerspectivaTable');
   export const activator = createActivator('PerspectiveTable', true);
@@ -196,13 +198,12 @@
               >
             {:else}
               {#each display.columns as column}
-                <!-- <td>{row.rowSpans[column.columnIndex]} {row.rowData[column.columnIndex]}</td> -->
                 {#if !row.rowCellSkips[column.columnIndex]}
-                  {#if row.rowData[column.columnIndex] === undefined}
-                    <td />
-                  {:else}
-                    <td rowspan={row.rowSpans[column.columnIndex]}>{row.rowData[column.columnIndex]}</td>
-                  {/if}
+                  <PerspectiveCell
+                    value={row.rowData[column.columnIndex]}
+                    rowSpan={row.rowSpans[column.columnIndex]}
+                    rowData={row.rowData}
+                  />
                 {/if}
               {/each}
             {/if}
@@ -282,18 +283,6 @@
     border-top: 1px solid var(--theme-border);
   }
 
-  td {
-    font-weight: normal;
-    /* border: 1px solid var(--theme-border); */
-    background-color: var(--theme-bg-0);
-    padding: 2px;
-    position: relative;
-    overflow: hidden;
-    vertical-align: top;
-    border-bottom: 1px solid var(--theme-border);
-    border-right: 1px solid var(--theme-border);
-  }
-
   /* 
   table {
     border: 1px solid;