Merge branch 'grid-data-types'

2026-04-28 03:46:00 +00:00 · 2024-08-26 15:42:01 +02:00
parent 6fb9c4b14f 4436ff95a8
commit e97787113c
30 changed files with 815 additions and 239 deletions
--- a/packages/web/src/datagrid/CellValue.svelte
+++ b/packages/web/src/datagrid/CellValue.svelte
@@ -1,105 +1,34 @@
-<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 _ from 'lodash';
  import { getBoolSettingsValue } from '../settings/settingsTools';
-  import { arrayToHexString } from 'dbgate-tools';
+  import { stringifyCellValue } from 'dbgate-tools';

  export let rowData;
  export let value;
  export let jsonParsedValue = undefined;
+  export let editorTypes;
+
+  $: stringified = stringifyCellValue(
+    value,
+    'gridCellIntent',
+    editorTypes,
+    { useThousandsSeparator: getBoolSettingsValue('dataGrid.thousandsSeparator', false) },
+    jsonParsedValue
+  );
 </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)}
-  {@const svalue = JSON.stringify(value, undefined, 2)}
-  <span class="null" title={svalue}
-    >{#if svalue.length < 100}{JSON.stringify(value)}{:else}(JSON){/if}</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)}
-  {@const svalue = JSON.stringify(jsonParsedValue, undefined, 2)}
-  <span class="null" title={svalue}
-    >{#if svalue.length < 100}{JSON.stringify(jsonParsedValue)}{:else}(JSON){/if}</span
-  >
-{:else if _.isArray(jsonParsedValue)}
-  <span class="null" title={jsonParsedValue.map(x => JSON.stringify(x)).join('\n')}
-    >[{jsonParsedValue.length} items]</span
-  >
 {:else}
-  {value.toString()}
+  <span class={stringified.gridStyle} title={stringified.gridTitle}>{stringified.value}</span>
 {/if}

 <style>
-  .null {
+  .nullCellStyle {
    color: var(--theme-font-3);
    font-style: italic;
  }
-  .value {
+  .valueCellStyle {
    color: var(--theme-icon-green);
  }
 </style>
--- a/packages/web/src/datagrid/ColumnManager.svelte
+++ b/packages/web/src/datagrid/ColumnManager.svelte
@@ -182,6 +182,13 @@
          header: 'Add new column',
          onConfirm: name => {
            display.addDynamicColumn(name);
+            tick().then(() => {
+              selectedColumns = [name];
+              currentColumnUniqueName = name;
+              if (!isJsonView) {
+                display.focusColumns(selectedColumns);
+              }
+            });
          },
        });
      }}>Add</InlineButton
--- a/packages/web/src/datagrid/DataGridCell.svelte
+++ b/packages/web/src/datagrid/DataGridCell.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-  import _ from 'lodash';
+  import _, { isPlainObject } from 'lodash';
  import ShowFormButton from '../formview/ShowFormButton.svelte';
-  import { isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
+  import { detectTypeIcon, getConvertValueMenu, isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
  import { openJsonDocument } from '../tabs/JsonTab.svelte';
-  import openNewTab from '../utility/openNewTab';
  import CellValue from './CellValue.svelte';
-  import { showModal } from '../modals/modalTools';
-  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
  import { openJsonLinesData } from '../utility/openJsonLinesData';
+  import ShowFormDropDownButton from '../formview/ShowFormDropDownButton.svelte';

  export let rowIndex;
  export let col;
@@ -33,6 +31,7 @@
  export let isCurrentCell = false;
  export let onDictionaryLookup = null;
  export let onSetValue;
+  export let editorTypes = null;

  $: value = col.isStructured ? _.get(rowData || {}, col.uniquePath) : (rowData || {})[col.uniqueName];

@@ -51,7 +50,9 @@
  $: style = computeStyle(maxWidth, col);

  $: isJson = _.isPlainObject(value) && !(value?.type == 'Buffer' && _.isArray(value.data)) && !value.$oid;
-  $: jsonParsedValue = isJsonLikeLongString(value) ? safeJsonParse(value) : null;
+
+  // don't parse JSON for explicit data types
+  $: jsonParsedValue = !editorTypes?.explicitDataType && isJsonLikeLongString(value) ? safeJsonParse(value) : null;
 </script>

 <td
@@ -68,7 +69,7 @@
  class:isFocusedColumn
  {style}
 >
-  <CellValue {rowData} {value} {jsonParsedValue} />
+  <CellValue {rowData} {value} {jsonParsedValue} {editorTypes} />

  {#if allowHintField && rowData && _.some(col.hintColumnNames, hintColumnName => rowData[hintColumnName])}
    <span class="hint"
@@ -76,23 +77,38 @@
    >
  {/if}

-  {#if col.foreignKey && rowData && rowData[col.uniqueName] && !isCurrentCell}
+  {#if editorTypes?.explicitDataType}
+    {#if value !== undefined}
+      <ShowFormDropDownButton
+        icon={detectTypeIcon(value)}
+        menu={() => getConvertValueMenu(value, onSetValue, editorTypes)}
+      />
+    {/if}
+    {#if _.isPlainObject(value)}
+      <ShowFormButton secondary icon="icon open-in-new" on:click={() => openJsonDocument(value, undefined, true)} />
+    {/if}
+    {#if _.isArray(value)}
+      <ShowFormButton
+        secondary
+        icon="icon open-in-new"
+        on:click={() => {
+          if (_.every(value, x => _.isPlainObject(x))) {
+            openJsonLinesData(value);
+          } else {
+            openJsonDocument(value, undefined, true);
+          }
+        }}
+      />
+    {/if}
+  {:else if col.foreignKey && rowData && rowData[col.uniqueName] && !isCurrentCell}
    <ShowFormButton on:click={() => onSetFormView(rowData, col)} />
-  {/if}
-
-  {#if col.foreignKey && isCurrentCell && onDictionaryLookup}
+  {:else if col.foreignKey && isCurrentCell && onDictionaryLookup}
    <ShowFormButton icon="icon dots-horizontal" on:click={onDictionaryLookup} />
-  {/if}
-
-  {#if isJson}
+  {:else if isJson}
    <ShowFormButton icon="icon open-in-new" on:click={() => openJsonDocument(value, undefined, true)} />
-  {/if}
-
-  {#if jsonParsedValue && _.isPlainObject(jsonParsedValue)}
+  {:else if jsonParsedValue && _.isPlainObject(jsonParsedValue)}
    <ShowFormButton icon="icon open-in-new" on:click={() => openJsonDocument(jsonParsedValue, undefined, true)} />
-  {/if}
-
-  {#if _.isArray(jsonParsedValue || value)}
+  {:else if _.isArray(jsonParsedValue || value)}
    <ShowFormButton
      icon="icon open-in-new"
      on:click={() => {
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/packages/web/src/datagrid/DataGridCore.svelte
@@ -66,6 +66,16 @@
    onClick: () => getCurrentDataGrid().insertNewRow(),
  });

+  registerCommand({
+    id: 'dataGrid.addNewColumn',
+    category: 'Data grid',
+    name: 'Add new column',
+    toolbarName: 'New column',
+    icon: 'icon add-column',
+    testEnabled: () => getCurrentDataGrid()?.addNewColumnEnabled(),
+    onClick: () => getCurrentDataGrid().addNewColumn(),
+  });
+
  registerCommand({
    id: 'dataGrid.cloneRows',
    category: 'Data grid',
@@ -81,10 +91,21 @@
    category: 'Data grid',
    name: 'Set NULL',
    keyText: 'CtrlOrCommand+0',
-    testEnabled: () => getCurrentDataGrid()?.getGrider()?.editable,
+    testEnabled: () =>
+      getCurrentDataGrid()?.getGrider()?.editable && !getCurrentDataGrid()?.getEditorTypes()?.supportFieldRemoval,
    onClick: () => getCurrentDataGrid().setFixedValue(null),
  });

+  registerCommand({
+    id: 'dataGrid.removeField',
+    category: 'Data grid',
+    name: 'Remove field',
+    keyText: 'CtrlOrCommand+0',
+    testEnabled: () =>
+      getCurrentDataGrid()?.getGrider()?.editable && getCurrentDataGrid()?.getEditorTypes()?.supportFieldRemoval,
+    onClick: () => getCurrentDataGrid().setFixedValue(undefined),
+  });
+
  registerCommand({
    id: 'dataGrid.undo',
    category: 'Data grid',
@@ -343,7 +364,13 @@

 <script lang="ts">
  import { GridDisplay } from 'dbgate-datalib';
-  import { driverBase, parseCellValue, detectSqlFilterBehaviour } from 'dbgate-tools';
+  import {
+    driverBase,
+    parseCellValue,
+    detectSqlFilterBehaviour,
+    stringifyCellValue,
+    shouldOpenMultilineDialog,
+  } from 'dbgate-tools';
  import { getContext, onDestroy } from 'svelte';
  import _, { map } from 'lodash';
  import registerCommand from '../commands/registerCommand';
@@ -397,11 +424,12 @@
  import { isCtrlOrCommandKey, isMac } from '../utility/common';
  import { createGeoJsonFromSelection, selectionCouldBeShownOnMap } from '../elements/SelectionMapView.svelte';
  import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
-  import EditCellDataModal, { shouldOpenMultilineDialog } from '../modals/EditCellDataModal.svelte';
+  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
  import { getDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
  import { showSnackbarSuccess } from '../utility/snackbar';
  import { openJsonLinesData } from '../utility/openJsonLinesData';
  import contextMenuActivator from '../utility/contextMenuActivator';
+  import InputTextModal from '../modals/InputTextModal.svelte';

  export let onLoadNextData = undefined;
  export let grider = undefined;
@@ -440,6 +468,8 @@

  export const activator = createActivator('DataGridCore', false);

+  export let dataEditorTypesBehaviourOverride = null;
+
  const wheelRowCount = 5;
  const tabVisible: any = getContext('tabVisible');

@@ -535,6 +565,24 @@
    grider.endUpdate();
  }

+  export function addNewColumnEnabled() {
+    return getGrider()?.editable && isDynamicStructure;
+  }
+
+  export function addNewColumn() {
+    showModal(InputTextModal, {
+      value: '',
+      label: 'Column name',
+      header: 'Add new column',
+      onConfirm: name => {
+        display.addDynamicColumn(name);
+        tick().then(() => {
+          display.focusColumns([name]);
+        });
+      },
+    });
+  }
+
  export async function insertNewRow() {
    if (!grider.canInsert) return;
    const rowIndex = grider.insertRow();
@@ -811,11 +859,16 @@
    const cellData = rowData[realColumnUniqueNames[currentCell[1]]];

    showModal(EditCellDataModal, {
-      value: cellData?.toString() || '',
+      value: cellData,
+      dataEditorTypesBehaviour: getEditorTypes(),
      onSave: value => grider.setCellValue(currentCell[0], realColumnUniqueNames[currentCell[1]], value),
    });
  }

+  export function getEditorTypes() {
+    return dataEditorTypesBehaviourOverride ?? display?.driver?.dataEditorTypesBehaviour;
+  }
+
  export function addJsonDocumentEnabled() {
    return grider.editable;
  }
@@ -1246,6 +1299,7 @@
    const cellData = rowData[realColumnUniqueNames[cell[1]]];
    if (shouldOpenMultilineDialog(cellData)) {
      showModal(EditCellDataModal, {
+        dataEditorTypesBehaviour: getEditorTypes(),
        value: cellData,
        onSave: value => grider.setCellValue(cell[0], realColumnUniqueNames[cell[1]], value),
      });
@@ -1557,7 +1611,7 @@
          }
          let colIndex = startCol;
          for (const cell of rowData) {
-            setCellValue([rowIndex, colIndex], parseCellValue(cell));
+            setCellValue([rowIndex, colIndex], parseCellValue(cell, getEditorTypes()));
            colIndex += 1;
          }
          rowIndex += 1;
@@ -1695,13 +1749,15 @@
    { command: 'dataGrid.deleteSelectedRows' },
    { command: 'dataGrid.insertNewRow' },
    { command: 'dataGrid.cloneRows' },
-    { command: 'dataGrid.setNull' },
+    { command: 'dataGrid.setNull', hideDisabled: true },
+    { command: 'dataGrid.removeField', hideDisabled: true },
    { placeTag: 'edit' },
    { divider: true },
    { command: 'dataGrid.findColumn' },
    { command: 'dataGrid.hideColumn' },
    { command: 'dataGrid.filterSelected' },
    { command: 'dataGrid.clearFilter' },
+    { command: 'dataGrid.addNewColumn', hideDisabled: true },
    { command: 'dataGrid.undo', hideDisabled: true },
    { command: 'dataGrid.redo', hideDisabled: true },
    { divider: true },
@@ -1941,6 +1997,7 @@
            {dispatchInsplaceEditor}
            {frameSelection}
            onSetFormView={formViewAvailable && display?.baseTable?.primaryKey ? handleSetFormView : null}
+            {dataEditorTypesBehaviourOverride}
          />
        {/each}
      </tbody>
--- a/packages/web/src/datagrid/DataGridRow.svelte
+++ b/packages/web/src/datagrid/DataGridRow.svelte
@@ -27,6 +27,8 @@
  export let database;
  export let driver;

+  export let dataEditorTypesBehaviourOverride = null;
+
  $: rowData = grider.getRowData(rowIndex);
  $: rowStatus = grider.getRowStatus(rowIndex);

@@ -59,10 +61,12 @@
        {inplaceEditorState}
        {dispatchInsplaceEditor}
        cellValue={rowData[col.uniqueName]}
-        options="{col.options}"
-        canSelectMultipleOptions="{col.canSelectMultipleOptions}"
+        options={col.options}
+        canSelectMultipleOptions={col.canSelectMultipleOptions}
        onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
-      />
+        {driver}
+        {dataEditorTypesBehaviourOverride}
+        />
    {:else}
      <DataGridCell
        {rowIndex}
@@ -70,6 +74,7 @@
        {col}
        {conid}
        {database}
+        editorTypes={dataEditorTypesBehaviourOverride ?? driver?.dataEditorTypesBehaviour}
        allowHintField={hintFieldsAllowed?.includes(col.uniqueName)}
        isSelected={frameSelection ? false : cellIsSelected(rowIndex, col.colIndex, selectedCells)}
        isCurrentCell={col.colIndex == currentCellColumn}
--- a/packages/web/src/datagrid/InplaceEditor.svelte
+++ b/packages/web/src/datagrid/InplaceEditor.svelte
@@ -9,6 +9,8 @@
  export let cellValue;
  export let options;
  export let canSelectMultipleOptions;
+  export let driver;
+  export let dataEditorTypesBehaviourOverride = null;
 </script>

 <td class="editor">
@@ -21,6 +23,8 @@
        {onSetValue}
        {options}
        {canSelectMultipleOptions}
+        {driver}
+        {dataEditorTypesBehaviourOverride}
      />
    {:else}
      <InplaceInput
@@ -29,6 +33,8 @@
        {dispatchInsplaceEditor}
        {cellValue}
        {onSetValue}
+        {driver}
+        {dataEditorTypesBehaviourOverride}
      />
    {/if}
  </div>
--- a/packages/web/src/datagrid/InplaceInput.svelte
+++ b/packages/web/src/datagrid/InplaceInput.svelte
@@ -14,6 +14,9 @@
  export let onSetValue;
  export let width;
  export let cellValue;
+  export let driver;
+
+  export let dataEditorTypesBehaviourOverride = null;

  let domEditor;
  let showEditorButton = true;
@@ -22,6 +25,8 @@

  const isChangedRef = createRef(!!inplaceEditorState.text);

+  $: editorTypes = dataEditorTypesBehaviourOverride ?? driver?.dataEditorTypesBehaviour;
+
  function handleKeyDown(event) {
    showEditorButton = false;

@@ -32,7 +37,7 @@
        break;
      case keycodes.enter:
        if (isChangedRef.get()) {
-          onSetValue(parseCellValue(domEditor.value));
+          onSetValue(parseCellValue(domEditor.value, editorTypes));
          isChangedRef.set(false);
        }
        domEditor.blur();
@@ -41,7 +46,7 @@
        break;
      case keycodes.tab:
        if (isChangedRef.get()) {
-          onSetValue(parseCellValue(domEditor.value));
+          onSetValue(parseCellValue(domEditor.value, editorTypes));
          isChangedRef.set(false);
        }
        domEditor.blur();
@@ -51,7 +56,7 @@
      case keycodes.s:
        if (isCtrlOrCommandKey(event)) {
          if (isChangedRef.get()) {
-            onSetValue(parseCellValue(domEditor.value));
+            onSetValue(parseCellValue(domEditor.value, editorTypes));
            isChangedRef.set(false);
          }
          event.preventDefault();
@@ -63,7 +68,7 @@

  function handleBlur() {
    if (isChangedRef.get()) {
-      onSetValue(parseCellValue(domEditor.value));
+      onSetValue(parseCellValue(domEditor.value, editorTypes));
      // grider.setCellValue(rowIndex, uniqueName, editor.value);
      isChangedRef.set(false);
    }
@@ -71,7 +76,7 @@
  }

  onMount(() => {
-    domEditor.value = inplaceEditorState.text || stringifyCellValue(cellValue);
+    domEditor.value = inplaceEditorState.text || stringifyCellValue(cellValue, 'inlineEditorIntent', editorTypes).value;
    domEditor.focus();
    if (inplaceEditorState.selectAll) {
      domEditor.select();
@@ -102,7 +107,8 @@
      dispatchInsplaceEditor({ type: 'close' });

      showModal(EditCellDataModal, {
-        value: stringifyCellValue(cellValue),
+        value: cellValue,
+        dataEditorTypesBehaviour: editorTypes,
        onSave: onSetValue,
      });
    }}
--- a/packages/web/src/datagrid/InplaceSelect.svelte
+++ b/packages/web/src/datagrid/InplaceSelect.svelte
@@ -11,6 +11,9 @@
  export let cellValue;
  export let options;
  export let canSelectMultipleOptions;
+  export let driver;
+
+  export let dataEditorTypesBehaviourOverride = null;

  let value;
  let valueInit;
@@ -18,22 +21,27 @@
  let isOptionsHidden = false;

  onMount(() => {
-    value = inplaceEditorState.text || stringifyCellValue(cellValue);
+    value =
+      inplaceEditorState.text ||
+      stringifyCellValue(
+        cellValue,
+        'inlineEditorIntent',
+        dataEditorTypesBehaviourOverride ?? driver?.dataEditorTypesBehaviour
+      ).value;
    valueInit = value;

    const optionsSelected = value.split(',');
-    optionsData = options
-      .map(function(option) {
-        return {
-          value: option,
-          isSelected: optionsSelected.includes(option)
-        };
-      });
+    optionsData = options.map(function (option) {
+      return {
+        value: option,
+        isSelected: optionsSelected.includes(option),
+      };
+    });
  });

  function handleCheckboxChanged(e, option) {
    if (!canSelectMultipleOptions) {
-      optionsData.forEach(option => option.isSelected = false);
+      optionsData.forEach(option => (option.isSelected = false));
      option.isSelected = true;
    } else {
      option.isSelected = e.target.checked;
@@ -44,8 +52,7 @@
      .map(option => option.value)
      .join(',');

-    if(!canSelectMultipleOptions)
-      handleConfirm();
+    if (!canSelectMultipleOptions) handleConfirm();
  }

  function handleConfirm() {
@@ -69,13 +76,8 @@
  }
 </script>

-<div
-  use:clickOutside
-  on:clickOutside={handleClickOutside}
-  on:keydown={handleKeyDown}
-  class="inplaceselect"
->
-  <div on:click={() => isOptionsHidden = !isOptionsHidden} class="value">
+<div use:clickOutside on:clickOutside={handleClickOutside} on:keydown={handleKeyDown} class="inplaceselect">
+  <div on:click={() => (isOptionsHidden = !isOptionsHidden)} class="value">
    {value}
  </div>

@@ -88,11 +90,12 @@
  <div class="options" class:hidden={isOptionsHidden}>
    {#each optionsData ?? [] as option}
      <label>
-        <input type="checkbox"
+        <input
+          type="checkbox"
          on:change={e => handleCheckboxChanged(e, option)}
          bind:checked={option.isSelected}
          class:hidden={!canSelectMultipleOptions}
-        >
+        />
        {option.value}
      </label>
    {/each}
@@ -112,7 +115,7 @@
    background-color: var(--theme-bg-alt);
    max-height: 150px;
    overflow: auto;
-    box-shadow: 0 1px 10px 1px var(--theme-bg-inv-3);;
+    box-shadow: 0 1px 10px 1px var(--theme-bg-inv-3);
  }

  .value {
--- a/packages/web/src/datagrid/JslDataGrid.svelte
+++ b/packages/web/src/datagrid/JslDataGrid.svelte
@@ -99,5 +99,22 @@
    preprocessLoadedRow={changeSetState?.value?.dataUpdateCommands
      ? row => processJsonDataUpdateCommands(row, changeSetState?.value?.dataUpdateCommands)
      : null}
+    dataEditorTypesBehaviourOverride={{
+      parseJsonNull: true,
+      parseJsonBoolean: true,
+      parseNumber: true,
+      parseJsonArray: true,
+      parseJsonObject: true,
+
+      explicitDataType: true,
+
+      supportNumberType: true,
+      supportStringType: true,
+      supportBooleanType: true,
+      supportNullType: true,
+      supportJsonType: true,
+
+      supportFieldRemoval: true,
+    }}
  />
 {/key}
--- a/packages/web/src/datagrid/JslDataGridCore.svelte
+++ b/packages/web/src/datagrid/JslDataGridCore.svelte
@@ -69,7 +69,7 @@

  export let macroPreview;
  export let macroValues;
-  export let onPublishedCellsChanged
+  export let onPublishedCellsChanged;
  export const activator = createActivator('JslDataGridCore', false);

  export let setLoadedRows;
@@ -201,7 +201,7 @@
  bind:this={domGrid}
  {...$$props}
  setLoadedRows={handleSetLoadedRows}
-    onPublishedCellsChanged={value => {
+  onPublishedCellsChanged={value => {
    publishedCells = value;
    if (onPublishedCellsChanged) {
      onPublishedCellsChanged(value);
--- a/packages/web/src/elements/SelectionMapView.svelte
+++ b/packages/web/src/elements/SelectionMapView.svelte
@@ -37,7 +37,7 @@
  function createColumnsTable(cells) {
    if (cells.length == 0) return '';
    return `<table>${cells
-      .map(cell => `<tr><td>${cell.column}</td><td>${stringifyCellValue(cell.value)}</td></tr>`)
+      .map(cell => `<tr><td>${cell.column}</td><td>${stringifyCellValue(cell.value, 'exportIntent').value}</td></tr>`)
      .join('\n')}</table>`;
  }

--- a/packages/web/src/formview/FormView.svelte
+++ b/packages/web/src/formview/FormView.svelte
@@ -48,10 +48,19 @@
    category: 'Data form',
    name: 'Set NULL',
    keyText: 'CtrlOrCommand+0',
-    testEnabled: () => getCurrentDataForm() != null,
+    testEnabled: () => getCurrentDataForm() != null && !getCurrentDataForm()?.getEditorTypes()?.supportFieldRemoval,
    onClick: () => getCurrentDataForm().setFixedValue(null),
  });

+  registerCommand({
+    id: 'dataForm.removeField',
+    category: 'Data form',
+    name: 'Remove field',
+    keyText: 'CtrlOrCommand+0',
+    testEnabled: () => getCurrentDataForm() != null && getCurrentDataForm()?.getEditorTypes()?.supportFieldRemoval,
+    onClick: () => getCurrentDataForm().setFixedValue(undefined),
+  });
+
  registerCommand({
    id: 'dataForm.undo',
    category: 'Data form',
@@ -157,7 +166,7 @@
 <script lang="ts">
  import { getFilterValueExpression } from 'dbgate-filterparser';

-  import { filterName } from 'dbgate-tools';
+  import { filterName, shouldOpenMultilineDialog, stringifyCellValue } from 'dbgate-tools';

  import _ from 'lodash';

@@ -175,7 +184,7 @@
  import { plusExpandIcon } from '../icons/expandIcons';
  import FontIcon from '../icons/FontIcon.svelte';
  import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
-  import EditCellDataModal, { shouldOpenMultilineDialog } from '../modals/EditCellDataModal.svelte';
+  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
  import { showModal } from '../modals/modalTools';
  import { apiCall } from '../utility/api';

@@ -201,6 +210,7 @@
  export let rowCountNotAvailable;
  // export let formDisplay;
  export let onNavigate;
+  export let dataEditorTypesBehaviourOverride = null;

  let wrapperHeight = 1;
  let wrapperWidth = 1;
@@ -273,7 +283,10 @@
  export function copyToClipboard() {
    const column = getCellColumn(currentCell);
    if (!column) return;
-    const text = currentCell[1] % 2 == 1 ? extractRowCopiedValue(rowData, column.uniqueName) : column.columnName;
+    const text =
+      currentCell[1] % 2 == 1
+        ? extractRowCopiedValue(rowData, column.uniqueName, display?.driver?.dataEditorTypesBehaviour)
+        : column.columnName;
    copyTextToClipboard(text);
  }

@@ -318,6 +331,10 @@

  export const activator = createActivator('FormView', false);

+  export function getEditorTypes() {
+    return display?.driver?.dataEditorTypesBehaviour;
+  }
+
  const handleTableMouseDown = event => {
    if (event.target.closest('.buttonLike')) return;
    if (event.target.closest('.resizeHandleControl')) return;
@@ -408,10 +425,11 @@
    { divider: true },
    { placeTag: 'save' },
    { command: 'dataForm.revertRowChanges' },
-    { command: 'dataForm.setNull' },
+    { command: 'dataForm.setNull', hideDisabled: true },
+    { command: 'dataForm.removeField', hideDisabled: true },
    { divider: true },
-    { command: 'dataForm.undo' },
-    { command: 'dataForm.redo' },
+    { command: 'dataForm.undo', hideDisabled: true },
+    { command: 'dataForm.redo', hideDisabled: true },
    { divider: true },
    { command: 'dataForm.goToFirst' },
    { command: 'dataForm.goToPrevious' },
@@ -488,6 +506,7 @@
    if (shouldOpenMultilineDialog(cellData)) {
      showModal(EditCellDataModal, {
        value: cellData,
+        dataEditorTypesBehaviour: display?.driver?.dataEditorTypesBehaviour,
        onSave: value => grider.setCellValue(0, column.uniqueName, value),
      });
      return true;
@@ -631,11 +650,13 @@
            {#if rowData && $inplaceEditorState.cell && rowIndex == $inplaceEditorState.cell[0] && chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
              <InplaceEditor
                width={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
+                driver={display?.driver}
                inplaceEditorState={$inplaceEditorState}
                {dispatchInsplaceEditor}
+                {dataEditorTypesBehaviourOverride}
                cellValue={rowData[col.uniqueName]}
-                options="{col.options}"
-                canSelectMultipleOptions="{col.canSelectMultipleOptions}"
+                options={col.options}
+                canSelectMultipleOptions={col.canSelectMultipleOptions}
                onSetValue={value => {
                  grider.setCellValue(0, col.uniqueName, value);
                }}
@@ -644,6 +665,7 @@
              <DataGridCell
                maxWidth={(wrapperWidth * 2) / 3}
                minWidth={200}
+                editorTypes={display?.driver?.dataEditorTypesBehaviour}
                {rowIndex}
                {col}
                {rowData}
@@ -654,11 +676,14 @@
                bind:domCell={domCells[`${rowIndex},${chunkIndex * 2 + 1}`]}
                onSetFormView={handleSetFormView}
                showSlot={!rowData ||
-                ($inplaceEditorState.cell &&
-                  rowIndex == $inplaceEditorState.cell[0] &&
-                  chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
+                  ($inplaceEditorState.cell &&
+                    rowIndex == $inplaceEditorState.cell[0] &&
+                    chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
                isCurrentCell={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
                onDictionaryLookup={() => handleLookup(col)}
+                onSetValue={value => {
+                  grider.setCellValue(0, col.uniqueName, value);
+                }}
              />
            {/if}
          </tr>
--- a/packages/web/src/formview/ShowFormButton.svelte
+++ b/packages/web/src/formview/ShowFormButton.svelte
@@ -2,6 +2,7 @@
  import FontIcon from '../icons/FontIcon.svelte';

  export let icon = 'icon form';
+  export let secondary = false;
 </script>

 <div
@@ -9,6 +10,7 @@
  on:mousedown|stopPropagation|preventDefault
  on:mouseup|stopPropagation|preventDefault
  class="showFormButtonMarker"
+  class:secondary
 >
  <FontIcon {icon} />
 </div>
@@ -23,6 +25,10 @@
    border: 1px solid var(--theme-bg-1);
  }

+  .secondary {
+    margin-right: 20px;
+  }
+
  div:hover {
    color: var(--theme-font-hover);
    border: var(--theme-border);
--- a/packages/web/src/formview/ShowFormDropDownButton.svelte
+++ b/packages/web/src/formview/ShowFormDropDownButton.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { currentDropDownMenu } from '../stores';
+
+  export let icon = 'icon form';
+  export let menu;
+
+  let domButton;
+
+  function handleClick() {
+    const rect = domButton.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    currentDropDownMenu.set({ left, top, items: menu });
+  }
+</script>
+
+<div
+  on:click|stopPropagation|preventDefault={handleClick}
+  bind:this={domButton}
+  on:mousedown|stopPropagation|preventDefault
+  on:mouseup|stopPropagation|preventDefault
+  class="showFormButtonMarker"
+>
+  <FontIcon {icon} />
+</div>
+
+<style>
+  div {
+    position: absolute;
+    right: 0px;
+    top: 1px;
+    color: var(--theme-font-3);
+    background-color: var(--theme-bg-1);
+    border: 1px solid var(--theme-bg-1);
+  }
+
+  div:hover {
+    color: var(--theme-font-hover);
+    border: var(--theme-border);
+    top: 1px;
+    right: 0px;
+  }
+</style>
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/packages/web/src/icons/FontIcon.svelte
@@ -61,6 +61,7 @@
    'icon app': 'mdi mdi-layers-triple',
    'icon open-in-new': 'mdi mdi-open-in-new',
    'icon add-folder': 'mdi mdi-folder-plus-outline',
+    'icon add-column': 'mdi mdi-table-column-plus-after',

    'icon window-restore': 'mdi mdi-window-restore',
    'icon window-maximize': 'mdi mdi-window-maximize',
@@ -186,6 +187,16 @@
    'icon num-9-outline': 'mdi mdi-numeric-9-circle-outline',
    'icon num-9-plus-outline': 'mdi mdi-numeric-9-plus-circle-outline',

+    'icon type-string': 'mdi mdi-code-string',
+    'icon type-object': 'mdi mdi-code-braces-box',
+    'icon type-array': 'mdi mdi-code-array',
+    'icon type-number': 'mdi mdi-pound-box',
+    'icon type-boolean': 'mdi mdi-code-equal',
+    'icon type-date': 'mdi mdi-alpha-d-box',
+    'icon type-objectid': 'mdi mdi-alpha-i-box',
+    'icon type-null': 'mdi mdi-code-equal',
+    'icon type-unknown': 'mdi mdi-help-box',
+
    'img ok': 'mdi mdi-check-circle color-icon-green',
    'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',
    'img alert': 'mdi mdi-alert-circle color-icon-blue',
--- a/packages/web/src/modals/EditCellDataModal.svelte
+++ b/packages/web/src/modals/EditCellDataModal.svelte
@@ -1,18 +1,3 @@
-<script lang="ts" context="module">
-  export function shouldOpenMultilineDialog(value) {
-    if (_.isString(value)) {
-      if (value.includes('\n')) {
-        return true;
-      }
-      const parsed = safeJsonParse(value);
-      if (parsed && (_.isPlainObject(parsed) || _.isArray(parsed))) {
-        return true;
-      }
-    }
-    return false;
-  }
-</script>
-
 <script lang="ts">
  import { onMount } from 'svelte';

@@ -25,17 +10,20 @@
  import ModalBase from './ModalBase.svelte';
  import { closeCurrentModal, showModal } from './modalTools';
  import SelectField from '../forms/SelectField.svelte';
-  import { safeJsonParse } from 'dbgate-tools';
+  import { parseCellValue, safeJsonParse, stringifyCellValue } from 'dbgate-tools';
  import { showSnackbarError } from '../utility/snackbar';
  import ErrorMessageModal from './ErrorMessageModal.svelte';
+  import da from 'date-fns/locale/da';

  export let onSave;
  export let value;

+  export let dataEditorTypesBehaviour;
+
  let editor;
  let syntaxMode = 'text';

-  let textValue = value?.toString() || '';
+  let textValue = stringifyCellValue(value, 'multilineEditorIntent', dataEditorTypesBehaviour).value;

  onMount(() => {
    editor.getEditor().focus();
@@ -52,7 +40,7 @@

  function handleKeyDown(ev) {
    if (ev.keyCode == keycodes.enter && ev.ctrlKey) {
-      onSave(textValue);
+      onSave(parseCellValue(textValue, dataEditorTypesBehaviour));
      closeCurrentModal();
    }
  }
@@ -81,7 +69,7 @@
          value="OK"
          title="Ctrl+Enter"
          on:click={() => {
-            onSave(textValue);
+            onSave(parseCellValue(textValue, dataEditorTypesBehaviour));
            closeCurrentModal();
          }}
        />
--- a/packages/web/src/perspectives/PerspectiveCell.svelte
+++ b/packages/web/src/perspectives/PerspectiveCell.svelte
@@ -15,7 +15,7 @@
    if (force && value?.type == 'Buffer' && _.isArray(value.data)) {
      return String.fromCharCode.apply(String, value.data);
    }
-    return stringifyCellValue(value);
+    return stringifyCellValue(value, 'gridCellIntent').value;
  }
 </script>

--- a/packages/web/src/tabs/ArchiveFileTab.svelte
+++ b/packages/web/src/tabs/ArchiveFileTab.svelte
@@ -30,6 +30,7 @@
  import { changeSetContainsChanges, createChangeSet } from 'dbgate-datalib';
  import localforage from 'localforage';
  import { onMount, tick } from 'svelte';
+  import _ from 'lodash';

  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
  import ToolStripCommandSplitButton from '../buttons/ToolStripCommandSplitButton.svelte';
@@ -129,7 +130,13 @@
      await apiCall('archive/modify-file', {
        folder: archiveFolder,
        file: archiveFile,
-        changeSet: $changeSetStore.value,
+        changeSet: {
+          ...$changeSetStore.value,
+          updates: $changeSetStore.value.updates.map(update => ({
+            ...update,
+            fields: _.mapValues(update.fields, (v, k) => (v === undefined ? { $$undefined$$: true } : v)),
+          })),
+        },
      });
      await afterSaveChangeSet();
    }
@@ -172,6 +179,10 @@
  <svelte:fragment slot="toolstrip">
    <ToolStripCommandButton command="dataGrid.refresh" />
    <ToolStripExportButton command="jslTableGrid.export" {quickExportHandlerRef} />
+    <ToolStripCommandButton command="dataGrid.revertAllChanges" hideDisabled />
+    <ToolStripCommandButton command="dataGrid.insertNewRow" hideDisabled />
+    <ToolStripCommandButton command="dataGrid.deleteSelectedRows" hideDisabled />
+    <ToolStripCommandButton command="dataGrid.addNewColumn" hideDisabled />
    <ToolStripCommandButton command="archiveFile.save" />
    <ToolStripCommandButton command="archiveFile.saveAs" />
  </svelte:fragment>
--- a/packages/web/src/tabs/CollectionDataTab.svelte
+++ b/packages/web/src/tabs/CollectionDataTab.svelte
@@ -121,7 +121,13 @@
    const resp = await apiCall('database-connections/update-collection', {
      conid,
      database,
-      changeSet,
+      changeSet: {
+        ...changeSet,
+        updates: changeSet.updates.map(update => ({
+          ...update,
+          fields: _.mapValues(update.fields, (v, k) => (v === undefined ? { $$undefined$$: true } : v)),
+        })),
+      },
    });
    const { errorMessage } = resp || {};
    if (errorMessage) {
@@ -206,6 +212,7 @@
    <ToolStripCommandButton command="dataGrid.revertAllChanges" hideDisabled />
    <ToolStripCommandButton command="dataGrid.insertNewRow" hideDisabled />
    <ToolStripCommandButton command="dataGrid.deleteSelectedRows" hideDisabled />
+    <ToolStripCommandButton command="dataGrid.addNewColumn" hideDisabled />
    <ToolStripCommandButton command="dataGrid.switchToJson" hideDisabled />
    <ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled />
    <ToolStripExportButton {quickExportHandlerRef} command="collectionDataGrid.export" />
--- a/packages/web/src/utility/clipboard.ts
+++ b/packages/web/src/utility/clipboard.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { arrayToHexString, stringifyCellValue } from 'dbgate-tools';
 import yaml from 'js-yaml';
+import { DataEditorTypesBehaviour } from 'dbgate-types';

 export function copyTextToClipboard(text) {
  const oldFocus = document.activeElement;
@@ -71,13 +72,13 @@ export async function getClipboardText() {
  return await navigator.clipboard.readText();
 }

-export function extractRowCopiedValue(row, col) {
+export function extractRowCopiedValue(row, col, editorTypes?: DataEditorTypesBehaviour) {
  let value = row[col];
  if (value === undefined) value = _.get(row, col);
-  return stringifyCellValue(value);
+  return stringifyCellValue(value, 'exportIntent', editorTypes).value;
 }

-const clipboardHeadersFormatter = (delimiter) => (columns) => {
+const clipboardHeadersFormatter = delimiter => columns => {
  return columns.join(delimiter);
 };