From 2a90b62338b8cdf2c35f4457683e2e8e6162df48 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Mon, 15 Mar 2021 20:02:13 +0300
Subject: [PATCH] feat: CB-751 value panel

---
 .../src/FormControls/TextareaNew.tsx          |  27 +++-
 .../core-blocks/src/Tabs/Tab/TabDefault.tsx   |   4 +-
 .../core-blocks/src/Tabs/Tab/TabProps.ts      |   4 +-
 .../src/Tabs/Tab/verticalRotatedTabStyles.ts  |   1 +
 .../packages/core-blocks/src/Tabs/TabList.tsx |   4 +-
 .../core-blocks/src/Tabs/TabPanelList.tsx     |   4 +-
 .../core-blocks/src/Tabs/TabsState.tsx        |  15 ++-
 webapp/packages/core-theming/src/useStyles.ts |   5 +-
 .../DataGrid/CellRenderer/CellRenderer.tsx    |   2 +-
 .../src/DataGrid/Formatters/CellFormatter.tsx |  31 ++---
 .../src/styles/themes/_base-react-grid.scss   |  18 ++-
 .../public/icons/text_value_presentation.png  | Bin 0 -> 757 bytes
 .../TextValuePresentation.tsx                 |  64 ++++++++++
 .../TextValuePresentationBootstrap.ts         |  33 +++++
 .../src/DataPresentationService.ts            |  65 +++++++---
 .../src/DataViewerBootstrap.ts                |  12 +-
 .../src/DataViewerPage/DataViewerPanel.tsx    |  17 +++
 .../src/DataViewerTabService.ts               |  14 ++-
 .../Actions/IDatabaseDataFormatAction.ts      |  16 +++
 .../Actions/IDatabaseDataSelectAction.ts      |   1 +
 .../Actions/ResultSetFormatAction.ts          |  49 ++++++++
 .../Actions/ResultSetSelectAction.ts          |  14 ++-
 .../src/IDataViewerPageState.ts               |   1 +
 .../src/TableViewer/TableGrid.tsx             |  14 +--
 .../TableViewer/TableHeader/TableHeader.tsx   |   2 +-
 .../TableHeader/TableWhereFilter.tsx          |   7 --
 .../PresentationTab.tsx                       |  15 ++-
 .../TablePresentationBar.tsx}                 |  29 +++--
 .../src/TableViewer/TableViewer.tsx           | 119 +++++++++++++-----
 .../src/TableViewer/ValuePanel.tsx            |  73 +++++++++++
 .../packages/plugin-data-viewer/src/index.ts  |   2 +
 .../plugin-data-viewer/src/locales/en.ts      |   1 +
 .../plugin-data-viewer/src/locales/ru.ts      |   1 +
 .../plugin-data-viewer/src/manifest.ts        |  11 +-
 .../src/IObjectViewerTabState.ts              |   2 +-
 .../src/ObjectPage/DBObjectPageService.ts     |   6 +-
 .../src/ObjectPage/ObjectPage.ts              |   4 +-
 .../src/ObjectViewerTabService.ts             |   6 +-
 .../src/SqlResultTabs/SqlResultPanel.tsx      |   3 +
 39 files changed, 542 insertions(+), 154 deletions(-)
 create mode 100644 webapp/packages/plugin-data-viewer/public/icons/text_value_presentation.png
 create mode 100644 webapp/packages/plugin-data-viewer/src/DataPresentation/TextValuePresentation/TextValuePresentation.tsx
 create mode 100644 webapp/packages/plugin-data-viewer/src/DataPresentation/TextValuePresentation/TextValuePresentationBootstrap.ts
 create mode 100644 webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataFormatAction.ts
 create mode 100644 webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetFormatAction.ts
 rename webapp/packages/plugin-data-viewer/src/TableViewer/{TableLeftBar => TablePresentationBar}/PresentationTab.tsx (72%)
 rename webapp/packages/plugin-data-viewer/src/TableViewer/{TableLeftBar/TableLeftBar.tsx => TablePresentationBar/TablePresentationBar.tsx} (84%)
 create mode 100644 webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel.tsx

diff --git a/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx b/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
index 9fa6016c80..baa60739bc 100644
--- a/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
 import styled, { css, use } from 'reshadow';
 
-import { useStyles } from '@cloudbeaver/core-theming';
+import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming';
 
 import type { ILayoutSizeProps } from '../Containers/LayoutProps';
 import { baseFormControlStylesNew } from './baseFormControlStylesNew';
@@ -20,16 +20,33 @@ const styles = css`
   textarea {
     line-height: 19px;
   }
+  field[|embedded] {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    
+    & textarea {
+      border-radius: 0 !important;
+      height: 100%;
+      resize: none !important;
+    }
+  }
   field-label {
     display: block;
     padding-bottom: 10px;
     composes: theme-typography--body1 from global;
     font-weight: 500;
+
+    &:empty {
+      display: none;
+    }
   }
 `;
 
-type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & ILayoutSizeProps & {
+type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'style'> & ILayoutSizeProps & {
   mod?: 'surface';
+  style?: ComponentStyle;
+  embedded?: boolean;
 };
 
 type ControlledProps = BaseProps & {
@@ -53,6 +70,7 @@ interface TextareaType {
 
 export const TextareaNew: TextareaType = observer(function TextareaNew({
   name,
+  style,
   value: controlledValue,
   state,
   children,
@@ -61,6 +79,7 @@ export const TextareaNew: TextareaType = observer(function TextareaNew({
   medium,
   large,
   mod,
+  embedded,
   onChange = () => {},
   ...rest
 }: ControlledProps | ObjectProps<any, any>) {
@@ -80,8 +99,8 @@ export const TextareaNew: TextareaType = observer(function TextareaNew({
 
   const value = state ? state[name] : controlledValue;
 
-  return styled(useStyles(baseFormControlStylesNew, styles))(
-    <field as="div" className={className} {...use({ small, medium, large })}>
+  return styled(useStyles(baseFormControlStylesNew, styles, style))(
+    <field as="div" className={className} {...use({ small, medium, large, embedded })}>
       <field-label as='label'>{children}</field-label>
       <textarea
         {...rest}
diff --git a/webapp/packages/core-blocks/src/Tabs/Tab/TabDefault.tsx b/webapp/packages/core-blocks/src/Tabs/Tab/TabDefault.tsx
index 2964f46d8c..9c54285388 100644
--- a/webapp/packages/core-blocks/src/Tabs/Tab/TabDefault.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/Tab/TabDefault.tsx
@@ -10,7 +10,7 @@ import { useMemo } from 'react';
 import styled from 'reshadow';
 
 import { Translate } from '@cloudbeaver/core-localization';
-import { DynamicStyle, useStyles } from '@cloudbeaver/core-theming';
+import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming';
 
 import { TabContext } from '../TabContext';
 import type { ITabData } from '../TabsContainer/ITabsContainer';
@@ -25,7 +25,7 @@ interface Props<T = Record<string, any>> {
   name?: string;
   component?: React.FC<TabProps & T>;
   className?: string;
-  style?: DynamicStyle[] | DynamicStyle;
+  style?: ComponentStyle;
   disabled?: boolean;
   onOpen?: (tab: ITabData<any>) => void;
   onClose?: (tab: ITabData<any>) => void;
diff --git a/webapp/packages/core-blocks/src/Tabs/Tab/TabProps.ts b/webapp/packages/core-blocks/src/Tabs/Tab/TabProps.ts
index a8a137171d..49983e154b 100644
--- a/webapp/packages/core-blocks/src/Tabs/Tab/TabProps.ts
+++ b/webapp/packages/core-blocks/src/Tabs/Tab/TabProps.ts
@@ -8,7 +8,7 @@
 
 import type { PropsWithChildren } from 'react';
 
-import type { DynamicStyle } from '@cloudbeaver/core-theming';
+import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import type { ITabData } from '../TabsContainer/ITabsContainer';
 
@@ -16,7 +16,7 @@ export type TabProps = PropsWithChildren<{
   tabId: string;
   disabled?: boolean;
   className?: string;
-  style?: DynamicStyle[] | DynamicStyle;
+  style?: ComponentStyle;
   onOpen?: (tab: ITabData<any>) => void;
   onClose?: (tab: ITabData<any>) => void;
 }>;
diff --git a/webapp/packages/core-blocks/src/Tabs/Tab/verticalRotatedTabStyles.ts b/webapp/packages/core-blocks/src/Tabs/Tab/verticalRotatedTabStyles.ts
index 528f955c97..c9d68a40e7 100644
--- a/webapp/packages/core-blocks/src/Tabs/Tab/verticalRotatedTabStyles.ts
+++ b/webapp/packages/core-blocks/src/Tabs/Tab/verticalRotatedTabStyles.ts
@@ -27,6 +27,7 @@ export const verticalRotatedTabStyles = css`
     }
   }
   TabList {
+    outline: none;
     max-width: 32px;
     flex-direction: column;
   }
diff --git a/webapp/packages/core-blocks/src/Tabs/TabList.tsx b/webapp/packages/core-blocks/src/Tabs/TabList.tsx
index bb617ac0c0..1105fc7dd4 100644
--- a/webapp/packages/core-blocks/src/Tabs/TabList.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/TabList.tsx
@@ -10,13 +10,13 @@ import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
 import { TabList as BaseTabList, TabListOptions, TabStateReturn } from 'reakit/Tab';
 
-import type { DynamicStyle } from '@cloudbeaver/core-theming';
+import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { TabDefault } from './Tab/TabDefault';
 import { TabsContext } from './TabsContext';
 
 type Props = React.PropsWithChildren<Omit<TabListOptions, keyof TabStateReturn>> & {
-  style?: DynamicStyle[] | DynamicStyle;
+  style?: ComponentStyle;
   childrenFirst?: boolean;
 };
 
diff --git a/webapp/packages/core-blocks/src/Tabs/TabPanelList.tsx b/webapp/packages/core-blocks/src/Tabs/TabPanelList.tsx
index 9d931b0362..f203f9fe9c 100644
--- a/webapp/packages/core-blocks/src/Tabs/TabPanelList.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/TabPanelList.tsx
@@ -10,14 +10,14 @@ import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
 import styled from 'reshadow';
 
-import { DynamicStyle, useStyles } from '@cloudbeaver/core-theming';
+import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming';
 
 import { TabPanel } from './TabPanel';
 import type { ITabInfo } from './TabsContainer/ITabsContainer';
 import { TabsContext } from './TabsContext';
 
 interface Props {
-  style?: DynamicStyle[] | DynamicStyle;
+  style?: ComponentStyle;
 }
 
 export const TabPanelList: React.FC<Props> = observer(function TabPanelList({
diff --git a/webapp/packages/core-blocks/src/Tabs/TabsState.tsx b/webapp/packages/core-blocks/src/Tabs/TabsState.tsx
index 16c3ff113f..58e3aa4a55 100644
--- a/webapp/packages/core-blocks/src/Tabs/TabsState.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/TabsState.tsx
@@ -44,16 +44,15 @@ export const TabsState = observer(function TabsState<T = Record<string, any>>({
 }: Props<T>): React.ReactElement | null {
   if (
     !selectedId
-    && !currentTabId
+    && currentTabId === undefined
     && container
     && container.tabInfoList.length > 0
   ) {
     selectedId = container.tabInfoList[0].key;
   }
 
-  // TODO: according react documentation fallback local state should be placed in another useState
-  //       to avoid memory release from useMemo()
-  const tabsState = useMemo(() => localState || new MetadataMap<string, any>(), [localState]);
+  const [localTabsState] = useState(() => new MetadataMap<string, any>());
+  const tabsState = localState || localTabsState;
   const [closeExecutor] = useState(() => new Executor<ITabData<T>>());
   const [openExecutor] = useState(() => new Executor<ITabData<T>>());
 
@@ -78,8 +77,10 @@ export const TabsState = observer(function TabsState<T = Record<string, any>>({
     state,
   });
 
-  if (currentTabId) {
+  if (currentTabId !== undefined) {
     state.selectedId = currentTabId;
+    state.setSelectedId(currentTabId);
+    dynamic.selectedId = currentTabId;
   }
 
   useEffect(() => {
@@ -105,6 +106,10 @@ export const TabsState = observer(function TabsState<T = Record<string, any>>({
   }, []);
 
   useEffect(() => {
+    if (currentTabId !== undefined) {
+      return;
+    }
+
     openExecutor.execute({
       tabId: state.selectedId!,
       props: rest as T,
diff --git a/webapp/packages/core-theming/src/useStyles.ts b/webapp/packages/core-theming/src/useStyles.ts
index a248fae148..18b22d521c 100644
--- a/webapp/packages/core-theming/src/useStyles.ts
+++ b/webapp/packages/core-theming/src/useStyles.ts
@@ -20,6 +20,7 @@ export type BaseStyles = ClassCollection | Composes;
 export type ThemeSelector = (theme: string) => Promise<undefined | BaseStyles | BaseStyles[]>;
 export type Style = BaseStyles | ThemeSelector;
 export type DynamicStyle = Style | boolean | undefined;
+export type ComponentStyle = DynamicStyle | DynamicStyle[];
 
 /**
  * Changes styles depending on theme
@@ -27,11 +28,11 @@ export type DynamicStyle = Style | boolean | undefined;
  * @param componentStyles styles array
  */
 export function useStyles(
-  ...componentStyles: Array<DynamicStyle | DynamicStyle[]>
+  ...componentStyles: ComponentStyle[]
 ): Record<string, any> {
   // todo do you understand that we store ALL STYLES in each component that uses this hook?
 
-  const stylesRef = useRef<Array<DynamicStyle | DynamicStyle[]>>([]);
+  const stylesRef = useRef<ComponentStyle[]>([]);
   const [patch, forceUpdate] = useState(0);
   const loadedStyles = useRef<BaseStyles[]>([]);
   const themeService = useService(ThemeService);
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx
index ce655329c8..c16ac60789 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx
@@ -85,7 +85,7 @@ export const CellRenderer: React.FC<CellRendererProps<any>> = observer(function
       onMouseUp={handleMouseUp}
       onDoubleClick={handleDoubleClick}
       {...props}
-      row={row}
+      row={[...row]}
     />
   );
 });
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx
index e0be7c1444..33c60d34f4 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx
@@ -9,30 +9,11 @@
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import type { FormatterProps } from 'react-data-grid';
 
+import { ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
+
 import { EditingContext } from '../../Editing/EditingContext';
 import { CellEditor, IEditorRef } from '../CellEditor/CellEditor';
-
-function valueGetter(rawValue: any) {
-  if (rawValue !== null && typeof rawValue === 'object') {
-    return JSON.stringify(rawValue);
-  }
-
-  return rawValue;
-}
-
-function formatValue(rawValue: any) {
-  const value = valueGetter(rawValue);
-
-  if (typeof value === 'string' && value.length > 1000) {
-    return value.split('').map(v => (v.charCodeAt(0) < 32 ? ' ' : v)).join('');
-  }
-
-  if (value === null) {
-    return '[null]';
-  }
-
-  return String(value);
-}
+import { DataGridContext } from '../DataGridContext';
 
 function getClasses(rawValue: any) {
   const classes = [];
@@ -45,10 +26,12 @@ function getClasses(rawValue: any) {
 export const CellFormatter: React.FC<FormatterProps> = function CellFormatter({ rowIdx, row, column, isCellSelected }) {
   const editorRef = useRef<IEditorRef>(null);
   const cellRef = useRef<HTMLDivElement>(null);
+  const context = useContext(DataGridContext);
   const editingContext = useContext(EditingContext);
+  const formatter = context?.model.source.getAction(context.resultIndex, ResultSetFormatAction);
   const rawValue = row[column.key];
   const classes = getClasses(rawValue);
-  const value = formatValue(rawValue);
+  const value = formatter?.toString(rawValue) ?? String(rawValue);
 
   const handleClose = useCallback(() => {
     editingContext?.closeEditor({ idx: column.idx, rowIdx });
@@ -60,7 +43,7 @@ export const CellFormatter: React.FC<FormatterProps> = function CellFormatter({
         editorRef.current?.focus();
       }
     }
-  });
+  }, [isCellSelected]);
 
   if (editingContext?.isEditing({ idx: column.idx, rowIdx })) {
     return (
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/styles/themes/_base-react-grid.scss b/webapp/packages/plugin-data-spreadsheet-new/src/styles/themes/_base-react-grid.scss
index 2425cd8d4b..8659d68489 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/styles/themes/_base-react-grid.scss
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/styles/themes/_base-react-grid.scss
@@ -8,17 +8,25 @@
 
 @import "@cloudbeaver/core-theming/src/styles/branding";
 
+$edited-color: #ff99006b;
+
 @mixin base-react-grid() {
   :global {
     .cb-react-grid-container:focus-within {
-      .rdg-cell-selected {
-        box-shadow: inset 0 0 0 1px #0091ea;
-      }
       .rdg-cell-custom-selected {
         background-color: rgba(0, 145, 234, 0.3);
       }
-    }
+      .rdg-cell-selected {
+        box-shadow: inset 0 0 0 1px #0091ea;
+      }
+      .rdg-cell-custom-editing {
+        box-shadow: none;
+      }
 
+      .rdg-cell-custom-edited {
+        background-color: $edited-color;
+      }
+    }
     .cb-react-grid-theme {
       @include mdc-theme-prop(color, on-surface, false);
 
@@ -63,7 +71,7 @@
       }
 
       .rdg-cell-custom-edited {
-        background-color: #ff99006b;
+        background-color: $edited-color;
       }
 
       .cell-formatter {
diff --git a/webapp/packages/plugin-data-viewer/public/icons/text_value_presentation.png b/webapp/packages/plugin-data-viewer/public/icons/text_value_presentation.png
new file mode 100644
index 0000000000000000000000000000000000000000..8007777f4f03658941ec264b3f9e1571581ce897
GIT binary patch
literal 757
zcmV<R0t)?!P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%uSrBfR9Fe^S50UWK@^?|)i!MqqWBkSYEkh}1u=_7q9R1d&3ds15mY?bn-)P*
zJ$dNCi%AFw-aSYw=t<C<h~iJSS_lLY5v`GE4Tc)qY_>b&n=!NQ4qLO;wTsY!;r-70
zzMbUF?qDPhN-36Ho|+hAYAwjY_Kr;j^$(wN5I6?Wpf$m39b+^Dk9aMAHg=Jb2`~V?
z^f?2-r~frL!=e<eLIkChoI1p8PJkkMoEb|wuz`;-JWc>n)VY-4O|0-Q0zRM%$e%kP
zEFYxr1lnv5jgcPiTKUB0b78>IfvexOeWCWYLNwg*b)hAiZUo*`=Hk}4odCkxp`9D{
zTNB*q^MuxJKb=C!?W@0xB)ShSw5BpUKb^cjX$$-Q6D$*0-T~itKx#u<hy1NkhXU+O
zc?VO2xe>lKwt`#>(;PB^6~)rbLo@19(G3D`a&(}X&HzVY-hlW0T+?TYJsCAg2pRzg
ze*xMFP}*L2UtRP;B&wHdjXdaw0r;En$@1B`*ge>Z`~4YpfW_<tFq*w}qHkJW)XJ`D
zM*Y;ySC6s-TQ10-Tuy77Id@phP5@!DIo#3XwCHy}_yG#ElMcB7m+N@a1p$mk)ia7N
z7k6WOLEtq2jky7H%JG80W7v8kiuY$<Y*W(eC1J}lo|}j$8I^SjAJTt7xECdh)@(v(
z5A@`DB{NaB`h{NCQ4}LO3^pg}1%Z#ExG5>>qKKR{ZHof;f)IQJo5KqN-DWkWVAKGB
zqB^WNo+nCnatAW>yJ8K$8O5&VIVUjcsYLXp2)dDQ(Rgrl*SeIOT&EmPKuPDzP-wkV
zLMtC^X{C2lFfu;a*JzdN6z5$4kAK-I=*9=c*Ssxhe|)pzJHUXH^z%5hQ-Ts2aszD3
n2?VOWk=<9u2eD!E{}09w^2x;Y>j7ek00000NkvXXu0mjf2kBP5

literal 0
HcmV?d00001

diff --git a/webapp/packages/plugin-data-viewer/src/DataPresentation/TextValuePresentation/TextValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/DataPresentation/TextValuePresentation/TextValuePresentation.tsx
new file mode 100644
index 0000000000..f5cfe457a3
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/DataPresentation/TextValuePresentation/TextValuePresentation.tsx
@@ -0,0 +1,64 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled from 'reshadow';
+
+import { BASE_CONTAINERS_STYLES, TextareaNew } from '@cloudbeaver/core-blocks';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import { ResultSetFormatAction } from '../../DatabaseDataModel/Actions/ResultSetFormatAction';
+import { IResultSetSelectKey, ResultSetSelectAction } from '../../DatabaseDataModel/Actions/ResultSetSelectAction';
+import type { IDatabaseResultSet } from '../../DatabaseDataModel/IDatabaseResultSet';
+import type { DataPresentationComponent } from '../../DataPresentationService';
+
+export const TextValuePresentation: DataPresentationComponent<any, IDatabaseResultSet> = observer(function TextValuePresentation({
+  model,
+  resultIndex,
+}) {
+  const styles = useStyles(BASE_CONTAINERS_STYLES);
+  const selection = model.source.getAction(resultIndex, ResultSetSelectAction);
+
+  const result = model.getResult(resultIndex);
+  const selectedCells = selection.getSelectedElements();
+
+  let value: any;
+  let stringValue: string | undefined;
+  let firstSelectedCell: Required<IResultSetSelectKey> | undefined;
+
+  if (result?.data?.rows && selectedCells.length > 0) {
+    firstSelectedCell = selectedCells[0];
+    value = model.source
+      .getEditor(resultIndex)
+      .getCell(firstSelectedCell.row, firstSelectedCell.column);
+
+    stringValue = model.source
+      .getAction(resultIndex, ResultSetFormatAction)
+      .get(value);
+  }
+
+  const handleChange = (value: string) => {
+    if (firstSelectedCell) {
+      model.source
+        .getEditor(resultIndex)
+        .setCell(firstSelectedCell.row, firstSelectedCell.column, value);
+    }
+  };
+
+  return styled(styles)(
+    <TextareaNew
+      name="value"
+      rows={3}
+      value={stringValue}
+      disabled={stringValue === undefined}
+      readOnly={model.isReadonly() || (value !== null && typeof value === 'object')}
+      embedded
+      onChange={handleChange}
+    />
+  );
+});
diff --git a/webapp/packages/plugin-data-viewer/src/DataPresentation/TextValuePresentation/TextValuePresentationBootstrap.ts b/webapp/packages/plugin-data-viewer/src/DataPresentation/TextValuePresentation/TextValuePresentationBootstrap.ts
new file mode 100644
index 0000000000..68ef36ac9b
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/DataPresentation/TextValuePresentation/TextValuePresentationBootstrap.ts
@@ -0,0 +1,33 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { Bootstrap, injectable } from '@cloudbeaver/core-di';
+import { ResultDataFormat } from '@cloudbeaver/core-sdk';
+
+import { DataPresentationService, DataPresentationType } from '../../DataPresentationService';
+import { TextValuePresentation } from './TextValuePresentation';
+
+@injectable()
+export class TextValuePresentationBootstrap extends Bootstrap {
+  constructor(private readonly dataPresentationService: DataPresentationService) {
+    super();
+  }
+
+  register(): void | Promise<void> {
+    this.dataPresentationService.add({
+      id: 'value-text-presentation',
+      dataFormat: ResultDataFormat.Resultset,
+      type: DataPresentationType.value,
+      title: 'data_viewer_presentation_value_title',
+      icon: '/icons/text_value_presentation.png',
+      getPresentationComponent: () => TextValuePresentation,
+    });
+  }
+
+  load(): void {}
+}
diff --git a/webapp/packages/plugin-data-viewer/src/DataPresentationService.ts b/webapp/packages/plugin-data-viewer/src/DataPresentationService.ts
index 9b40ac77c2..c2189cb9a5 100644
--- a/webapp/packages/plugin-data-viewer/src/DataPresentationService.ts
+++ b/webapp/packages/plugin-data-viewer/src/DataPresentationService.ts
@@ -11,24 +11,38 @@ import { injectable } from '@cloudbeaver/core-di';
 import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
 
 import type { IDatabaseDataModel } from './DatabaseDataModel/IDatabaseDataModel';
+import type { IDatabaseDataResult } from './DatabaseDataModel/IDatabaseDataResult';
 
-export interface IDataPresentationProps {
-  model: IDatabaseDataModel<any>;
+export interface IDataPresentationProps<
+  TOptions = any,
+  TResult extends IDatabaseDataResult = IDatabaseDataResult
+> {
+  model: IDatabaseDataModel<TOptions, TResult>;
   resultIndex: number;
   className?: string;
 }
 
-export type DataPresentationComponent = React.FunctionComponent<IDataPresentationProps>;
+export enum DataPresentationType {
+  main,
+  value
+}
+
+export type DataPresentationComponent<
+  TOptions = any,
+  TResult extends IDatabaseDataResult = IDatabaseDataResult
+> = React.FunctionComponent<IDataPresentationProps<TOptions, TResult>>;
 
 export type PresentationTabProps = TabProps & {
-  presentation: DataPresentationOptions;
+  presentation: IDataPresentationOptions;
   model: IDatabaseDataModel<any>;
 };
+
 export type PresentationTabComponent = React.FunctionComponent<PresentationTabProps>;
 
-export interface DataPresentationOptions {
+export interface IDataPresentationOptions {
   id: string;
   dataFormat: ResultDataFormat;
+  type?: DataPresentationType;
   title?: string;
   icon?: string;
   hidden?: () => boolean;
@@ -37,25 +51,28 @@ export interface DataPresentationOptions {
   onActivate?: () => void;
 }
 
+export interface IDataPresentation extends IDataPresentationOptions {
+  type: DataPresentationType;
+}
+
 @injectable()
 export class DataPresentationService {
-  get default(): DataPresentationOptions | undefined {
-    return this.dataPresentations.values().next().value;
-  }
-
-  private dataPresentations: Map<string, DataPresentationOptions>;
+  private dataPresentations: Map<string, IDataPresentation>;
 
   constructor() {
     this.dataPresentations = new Map();
   }
 
-  get(id: string): DataPresentationOptions | undefined {
+  get(id: string): IDataPresentation | undefined {
     return this.dataPresentations.get(id);
   }
 
-  getSupportedList(dataFormat: ResultDataFormat | ResultDataFormat[]): DataPresentationOptions[] {
+  getSupportedList(
+    type: DataPresentationType,
+    dataFormat: ResultDataFormat | ResultDataFormat[]
+  ): IDataPresentation[] {
     return Array.from(this.dataPresentations.values()).filter(presentation => {
-      if (presentation.hidden?.()) {
+      if (presentation.type !== type || presentation.hidden?.()) {
         return false;
       }
 
@@ -63,7 +80,11 @@ export class DataPresentationService {
     });
   }
 
-  getSupported(dataFormat: ResultDataFormat, presentationId: string | undefined): DataPresentationOptions | null {
+  getSupported(
+    type: DataPresentationType,
+    dataFormat: ResultDataFormat,
+    presentationId: string | undefined
+  ): IDataPresentation | null {
     if (presentationId) {
       const presentation = this.dataPresentations.get(presentationId);
 
@@ -73,7 +94,11 @@ export class DataPresentationService {
     }
 
     for (const presentation of this.dataPresentations.values()) {
-      if (presentation.dataFormat === dataFormat && !presentation.hidden?.()) {
+      if (
+        presentation.dataFormat === dataFormat
+        && presentation.type === type
+        && !presentation.hidden?.()
+      ) {
         return presentation;
       }
     }
@@ -81,7 +106,13 @@ export class DataPresentationService {
     return null;
   }
 
-  add(options: DataPresentationOptions): void {
-    this.dataPresentations.set(options.id, options);
+  add(options: IDataPresentationOptions): void {
+    this.dataPresentations.set(
+      options.id,
+      {
+        ...options,
+        type: options.type || DataPresentationType.main,
+      }
+    );
   }
 }
diff --git a/webapp/packages/plugin-data-viewer/src/DataViewerBootstrap.ts b/webapp/packages/plugin-data-viewer/src/DataViewerBootstrap.ts
index b7fef73fe5..6f4d6b4b55 100644
--- a/webapp/packages/plugin-data-viewer/src/DataViewerBootstrap.ts
+++ b/webapp/packages/plugin-data-viewer/src/DataViewerBootstrap.ts
@@ -6,15 +6,19 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { injectable } from '@cloudbeaver/core-di';
+import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 
 import { DataViewerTabService } from './DataViewerTabService';
 
 @injectable()
-export class DataViewerBootstrap {
-  constructor(private dataViewerTabService: DataViewerTabService) { }
+export class DataViewerBootstrap extends Bootstrap {
+  constructor(private dataViewerTabService: DataViewerTabService) {
+    super();
+  }
 
-  bootstrap() {
+  register(): void | Promise<void> {
     this.dataViewerTabService.registerTabHandler();
   }
+
+  load(): void { }
 }
diff --git a/webapp/packages/plugin-data-viewer/src/DataViewerPage/DataViewerPanel.tsx b/webapp/packages/plugin-data-viewer/src/DataViewerPage/DataViewerPanel.tsx
index 0e22d5ed1c..33d998e3a2 100644
--- a/webapp/packages/plugin-data-viewer/src/DataViewerPage/DataViewerPanel.tsx
+++ b/webapp/packages/plugin-data-viewer/src/DataViewerPage/DataViewerPanel.tsx
@@ -28,12 +28,27 @@ export const DataViewerPanel = observer(function DataViewerPanel({
       page.setState(tab, {
         presentationId,
         resultIndex: 0,
+        valuePresentationId: null,
       });
     } else {
       pageState.presentationId = presentationId;
     }
   }, [page, tab]);
 
+  const handleValuePresentationChange = useCallback((valuePresentationId: string | null) => {
+    const pageState = page.getState(tab);
+
+    if (!pageState) {
+      page.setState(tab, {
+        presentationId: '',
+        resultIndex: 0,
+        valuePresentationId,
+      });
+    } else {
+      pageState.valuePresentationId = valuePresentationId;
+    }
+  }, [page, tab]);
+
   if (!tab.handlerState.tableId) {
     return <TextPlaceholder>Table model not loaded</TextPlaceholder>;
   }
@@ -43,7 +58,9 @@ export const DataViewerPanel = observer(function DataViewerPanel({
       tableId={tab.handlerState.tableId}
       resultIndex={pageState?.resultIndex}
       presentationId={pageState?.presentationId}
+      valuePresentationId={pageState?.valuePresentationId}
       onPresentationChange={handlePresentationChange}
+      onValuePresentationChange={handleValuePresentationChange}
     />
   );
 });
diff --git a/webapp/packages/plugin-data-viewer/src/DataViewerTabService.ts b/webapp/packages/plugin-data-viewer/src/DataViewerTabService.ts
index 33cd22c47c..63edbcd538 100644
--- a/webapp/packages/plugin-data-viewer/src/DataViewerTabService.ts
+++ b/webapp/packages/plugin-data-viewer/src/DataViewerTabService.ts
@@ -19,6 +19,7 @@ import {
   DBObjectPageService, ObjectPage, ObjectViewerTabService, IObjectViewerTabState
 } from '@cloudbeaver/plugin-object-viewer';
 
+import { DataPresentationService } from './DataPresentationService';
 import { DataViewerPanel } from './DataViewerPage/DataViewerPanel';
 import { DataViewerTab } from './DataViewerPage/DataViewerTab';
 import { DataViewerTableService } from './DataViewerTableService';
@@ -26,14 +27,15 @@ import type { IDataViewerPageState } from './IDataViewerPageState';
 
 @injectable()
 export class DataViewerTabService {
-  page: ObjectPage<IDataViewerPageState>;
+  readonly page: ObjectPage<IDataViewerPageState>;
 
   constructor(
     private navNodeManagerService: NavNodeManagerService,
     private dataViewerTableService: DataViewerTableService,
     private objectViewerTabService: ObjectViewerTabService,
     private dbObjectPageService: DBObjectPageService,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
+    private dataPresentationService: DataPresentationService
   ) {
     this.page = this.dbObjectPageService.register({
       key: 'data_viewer_data',
@@ -105,6 +107,14 @@ export class DataViewerTabService {
         tab.handlerState.objectId
       );
       tab.handlerState.tableId = model.id;
+
+      const pageState = this.page.getState(tab);
+      if (pageState) {
+        const presentation = this.dataPresentationService.get(pageState?.presentationId);
+        if (presentation) {
+          model.setDataFormat(presentation.dataFormat);
+        }
+      }
     }
 
     // TODO: used for initial data fetch, but can repeat request each time data tab is selected,
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataFormatAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataFormatAction.ts
new file mode 100644
index 0000000000..48024e1d3c
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataFormatAction.ts
@@ -0,0 +1,16 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { IDatabaseDataAction } from '../IDatabaseDataAction';
+import type { IDatabaseDataResult } from '../IDatabaseDataResult';
+
+export interface IDatabaseDataFormatAction<TResult extends IDatabaseDataResult>
+  extends IDatabaseDataAction<TResult> {
+  get: (value: any) => any;
+  toString: (value: any) => string;
+}
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataSelectAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataSelectAction.ts
index b71b3a94bc..130f8fa9d4 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataSelectAction.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataSelectAction.ts
@@ -26,6 +26,7 @@ export interface IDatabaseDataSelectAction<TKey, TResult extends IDatabaseDataRe
   readonly actions: IExecutor<DatabaseDataEditorActionsData<TKey>>;
   isSelected: () => boolean;
   isElementSelected: (key: TKey) => boolean;
+  getSelectedElements: () => TKey[];
   getRowSelection: (row: number) => number[];
   set: (key: TKey, selected: boolean) => void;
   clear: () => void;
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetFormatAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetFormatAction.ts
new file mode 100644
index 0000000000..00d5f694eb
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetFormatAction.ts
@@ -0,0 +1,49 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { ResultDataFormat } from '@cloudbeaver/core-sdk';
+
+import type { IDatabaseResultSet } from '../IDatabaseResultSet';
+import { databaseDataAction } from './DatabaseDataActionDecorator';
+import type { IDatabaseDataFormatAction } from './IDatabaseDataFormatAction';
+
+@databaseDataAction()
+export class ResultSetFormatAction implements IDatabaseDataFormatAction<IDatabaseResultSet> {
+  static dataFormat = ResultDataFormat.Resultset;
+  result: IDatabaseResultSet;
+
+  constructor(result: IDatabaseResultSet) {
+    this.result = result;
+  }
+
+  get(value: any): any {
+    if (value !== null && typeof value === 'object') {
+      return value.text;
+    }
+
+    return value;
+  }
+
+  toString(value: any): string {
+    value = this.get(value);
+
+    if (typeof value === 'string' && value.length > 1000) {
+      return value.split('').map(v => (v.charCodeAt(0) < 32 ? ' ' : v)).join('');
+    }
+
+    if (value === null) {
+      return '[null]';
+    }
+
+    return String(value);
+  }
+
+  updateResult(result: IDatabaseResultSet): void {
+    this.result = result;
+  }
+}
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetSelectAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetSelectAction.ts
index 95784dc868..87a44bef90 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetSelectAction.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetSelectAction.ts
@@ -16,8 +16,8 @@ import { databaseDataAction } from './DatabaseDataActionDecorator';
 import type { DatabaseDataEditorActionsData, IDatabaseDataSelectAction } from './IDatabaseDataSelectAction';
 
 export interface IResultSetSelectKey {
-  row?: number;
-  column?: number;
+  readonly row?: number;
+  readonly column?: number;
 }
 
 @databaseDataAction()
@@ -72,6 +72,16 @@ export class ResultSetSelectAction implements IDatabaseDataSelectAction<IResultS
     return row.length === this.result.data?.columns?.length;
   }
 
+  getSelectedElements(): Array<Required<IResultSetSelectKey>> {
+    const selectedKeys: Array<Required<IResultSetSelectKey>> = [];
+
+    for (const [row, value] of this.selectedElements) {
+      selectedKeys.push(...value.map(column => ({ row, column })));
+    }
+
+    return selectedKeys;
+  }
+
   getRowSelection(row: number): number[] {
     return this.selectedElements.get(row) || [];
   }
diff --git a/webapp/packages/plugin-data-viewer/src/IDataViewerPageState.ts b/webapp/packages/plugin-data-viewer/src/IDataViewerPageState.ts
index 283eec9e5c..c25443263e 100644
--- a/webapp/packages/plugin-data-viewer/src/IDataViewerPageState.ts
+++ b/webapp/packages/plugin-data-viewer/src/IDataViewerPageState.ts
@@ -9,4 +9,5 @@
 export interface IDataViewerPageState {
   resultIndex: number;
   presentationId: string;
+  valuePresentationId: string | null;
 }
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableGrid.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableGrid.tsx
index 878069c573..26e16d5709 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableGrid.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableGrid.tsx
@@ -10,29 +10,25 @@ import { observer } from 'mobx-react-lite';
 import type { PropsWithChildren } from 'react';
 import styled, { css } from 'reshadow';
 
-import { Button, TextPlaceholder } from '@cloudbeaver/core-blocks';
+import { TextPlaceholder } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
 
-import type { DataPresentationOptions } from '../DataPresentationService';
+import type { IDataPresentationOptions } from '../DataPresentationService';
 import type { DataModelWrapper } from './DataModelWrapper';
 
 type TableGridProps = PropsWithChildren<{
   model: DataModelWrapper; // TODO: change to IDatabaseDataModel<any>
   dataFormat: ResultDataFormat;
-  presentation: DataPresentationOptions;
+  presentation: IDataPresentationOptions;
   resultIndex: number;
 }>;
 
 const styles = css`
-  Presentation, error {
+  Presentation {
     flex: 1;
     overflow: auto;
   }
-  error {
-    white-space: pre-wrap;
-    padding: 16px;
-  }
 `;
 
 export const TableGrid = observer(function TableGrid({
@@ -56,7 +52,7 @@ export const TableGrid = observer(function TableGrid({
   const Presentation = presentation.getPresentationComponent();
 
   if (result?.loadedFully && !result.data) {
-    return styled(styles)(<TextPlaceholder>{translate('data_viewer_nodata_message')}</TextPlaceholder>);
+    return <TextPlaceholder>{translate('data_viewer_nodata_message')}</TextPlaceholder>;
   }
 
   return styled(styles)(
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
index 7621e161bf..77b00f42c6 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
@@ -24,7 +24,7 @@ const styles = composes(
   `,
   css`
     table-header {
-      height: 40px;
+      padding: 8px 0;
       flex: 0 0 auto;
       display: flex;
       align-items: center;
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx
index 478b632e87..0878ac2340 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx
@@ -23,16 +23,9 @@ const styles = composes(
     }
   `,
   css`
-    SubmittingForm {
-      height: 40px;
-      flex: 1;
-      display: flex;
-      align-items: center;
-    }
     InlineEditor {
       flex: 1;
       height: 24px;
-      margin: 0 12px;
     }
   `
 );
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableLeftBar/PresentationTab.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/PresentationTab.tsx
similarity index 72%
rename from webapp/packages/plugin-data-viewer/src/TableViewer/TableLeftBar/PresentationTab.tsx
rename to webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/PresentationTab.tsx
index 3629216172..8f9a2d062b 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableLeftBar/PresentationTab.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/PresentationTab.tsx
@@ -12,16 +12,17 @@ import styled from 'reshadow';
 import {
   verticalRotatedTabStyles, Tab, TabIcon, TabTitle
 } from '@cloudbeaver/core-blocks';
-import { DynamicStyle, useStyles } from '@cloudbeaver/core-theming';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming';
 
 import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataModel';
-import type { DataPresentationOptions } from '../../DataPresentationService';
+import type { IDataPresentationOptions } from '../../DataPresentationService';
 
 interface Props {
   model: IDatabaseDataModel<any>;
-  presentation: DataPresentationOptions;
+  presentation: IDataPresentationOptions;
   className?: string;
-  style?: DynamicStyle[] | DynamicStyle;
+  style?: ComponentStyle;
 }
 
 export const PresentationTab = observer(function PresentationTab({
@@ -30,6 +31,7 @@ export const PresentationTab = observer(function PresentationTab({
   className,
   style,
 }: Props) {
+  const translate = useTranslate();
   const styles = useStyles(verticalRotatedTabStyles, style);
 
   if (presentation.getTabComponent) {
@@ -46,14 +48,15 @@ export const PresentationTab = observer(function PresentationTab({
       />
     );
   }
+
   return styled(styles)(
     <Tab
       tabId={presentation.id}
       style={[verticalRotatedTabStyles, style]}
       disabled={model.isLoading()}
     >
-      <TabIcon icon={presentation.icon} />
-      <TabTitle>{presentation.title}</TabTitle>
+      {presentation.icon && <TabIcon icon={presentation.icon} />}
+      {presentation.title && <TabTitle>{translate(presentation.title)}</TabTitle>}
     </Tab>
   );
 });
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableLeftBar/TableLeftBar.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/TablePresentationBar.tsx
similarity index 84%
rename from webapp/packages/plugin-data-viewer/src/TableViewer/TableLeftBar/TableLeftBar.tsx
rename to webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/TablePresentationBar.tsx
index fe45f941cd..9ac7cb6cde 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableLeftBar/TableLeftBar.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/TablePresentationBar.tsx
@@ -8,6 +8,7 @@
 
 import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';
+import { use } from 'reshadow';
 
 import { ITabData, TabList, TabsState, verticalRotatedTabStyles } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
@@ -15,17 +16,9 @@ import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
 import { composes, useStyles } from '@cloudbeaver/core-theming';
 
 import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataModel';
-import { DataPresentationService } from '../../DataPresentationService';
+import { DataPresentationService, DataPresentationType } from '../../DataPresentationService';
 import { PresentationTab } from './PresentationTab';
 
-interface Props {
-  presentationId: string;
-  supportedDataFormat: ResultDataFormat[];
-  model: IDatabaseDataModel<any>;
-  className?: string;
-  onPresentationChange: (id: string) => void;
-}
-
 const styles = composes(
   css`
     Tab {
@@ -48,13 +41,23 @@ const styles = composes(
         font-weight: normal !important;
       }
     }
-    tab-outer:only-child {
+    TabList[|flexible] tab-outer:only-child {
       display: none;
     }
   `
 );
 
-export const TableLeftBar = observer(function TableLeftBar({
+interface Props {
+  type: DataPresentationType;
+  presentationId: string | null | undefined;
+  supportedDataFormat: ResultDataFormat[];
+  model: IDatabaseDataModel<any>;
+  className?: string;
+  onPresentationChange: (id: string) => void;
+}
+
+export const TablePresentationBar = observer(function TablePresentationBar({
+  type,
   presentationId,
   supportedDataFormat,
   model,
@@ -62,14 +65,14 @@ export const TableLeftBar = observer(function TableLeftBar({
   onPresentationChange,
 }: Props) {
   const dataPresentationService = useService(DataPresentationService);
-  const presentations = dataPresentationService.getSupportedList(supportedDataFormat);
+  const presentations = dataPresentationService.getSupportedList(type, supportedDataFormat);
   const Tab = PresentationTab; // alias for styles matching
   const changePresentation = ({ tabId }: ITabData<any>) => onPresentationChange(tabId);
 
   return styled(useStyles(styles, verticalRotatedTabStyles))(
     <table-left-bar as="div" className={className}>
       <TabsState currentTabId={presentationId} onChange={changePresentation}>
-        <TabList>
+        <TabList {...use({ flexible: type === DataPresentationType.main })}>
           {presentations.map(presentation => (
             <Tab
               key={presentation.id}
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
index 31ea246566..3e80089ee5 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
@@ -10,24 +10,28 @@ import { observer } from 'mobx-react-lite';
 import { PropsWithChildren, useCallback } from 'react';
 import styled, { css, use } from 'reshadow';
 
-import { Button, Loader, TextPlaceholder, useErrorDetails, useStateDelay } from '@cloudbeaver/core-blocks';
+import { Button, Loader, Pane, ResizerControls, Split, splitStyles, TextPlaceholder, useErrorDetails, useStateDelay } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { ResultDataFormat } from '@cloudbeaver/core-sdk';
 import { composes, useStyles } from '@cloudbeaver/core-theming';
 
-import { DataPresentationService } from '../DataPresentationService';
+import { DataPresentationService, DataPresentationType } from '../DataPresentationService';
 import { TableFooter } from './TableFooter/TableFooter';
 import { TableGrid } from './TableGrid';
 import { TableHeader } from './TableHeader/TableHeader';
-import { TableLeftBar } from './TableLeftBar/TableLeftBar';
+import { TablePresentationBar } from './TablePresentationBar/TablePresentationBar';
 import { TableViewerStorageService } from './TableViewerStorageService';
+import { ValuePanel } from './ValuePanel';
 
 const viewerStyles = composes(
   css`
-    error {
+    error, Split {
       composes: theme-background-surface from global;
     }
+    table-viewer {
+      composes: theme-background-secondary from global;
+    }
   `,
   css`
     table-viewer {
@@ -36,19 +40,27 @@ const viewerStyles = composes(
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      padding: 0 8px;
     }
     table-content {
       display: flex;
       flex: 1;
       overflow: hidden;
     }
-    table-data, table-box {
+    table-data, table-box, Pane {
       position: relative;
       display: flex;
       flex: 1;
       flex-direction: column;
       overflow: hidden;
     }
+    Pane:first-child {
+      position: relative;
+      flex: 1;
+    }
+    Pane:last-child {
+      flex: 0 0 30%;
+    }
     error {
       position: absolute;
       box-sizing: border-box;
@@ -74,18 +86,22 @@ type TableViewerProps = PropsWithChildren<{
   tableId: string;
   resultIndex: number | undefined;
   presentationId: string | undefined;
+  valuePresentationId: string | null | undefined;
   className?: string;
   onPresentationChange: (id: string) => void;
+  onValuePresentationChange: (id: string | null) => void;
 }>;
 
 export const TableViewer = observer(function TableViewer({
   tableId,
   resultIndex = 0,
   presentationId,
+  valuePresentationId,
   className,
   onPresentationChange,
+  onValuePresentationChange,
 }: TableViewerProps) {
-  const styles = useStyles(viewerStyles);
+  const styles = useStyles(viewerStyles, splitStyles);
   const dataPresentationService = useService(DataPresentationService);
   const tableViewerStorageService = useService(TableViewerStorageService);
   const dataModel = tableViewerStorageService.get(tableId);
@@ -105,25 +121,50 @@ export const TableViewer = observer(function TableViewer({
     }
   }, [onPresentationChange, dataModel]);
 
+  function handleValuePresentationChange(id: string) {
+    if (id === valuePresentationId) {
+      onValuePresentationChange(null);
+      return;
+    }
+    const presentation = dataPresentationService.get(id);
+    if (presentation) {
+      onValuePresentationChange(id);
+    }
+  }
+
   if (!dataModel) {
     return <Loader />;
   }
 
   const dataFormat = result?.dataFormat || ResultDataFormat.Resultset;
+
   const presentation = dataPresentationService.getSupported(
+    DataPresentationType.main,
     dataFormat,
     presentationId
   );
 
+  const valuePresentation = valuePresentationId
+    ? dataPresentationService.getSupported(
+      DataPresentationType.value,
+      dataFormat,
+      valuePresentationId
+    )
+    : null;
+
   if (!presentation) {
     return <TextPlaceholder>There are no available presentation for data format: {dataFormat}</TextPlaceholder>;
   }
 
+  const overlay = dataModel.source.results.length > 0 && presentation.dataFormat === dataFormat;
+  const loading = dataModel.isLoading();
+
   return styled(styles)(
     <table-viewer as="div" className={className}>
       <TableHeader model={dataModel} />
       <table-content as='div'>
-        <TableLeftBar
+        <TablePresentationBar
+          type={DataPresentationType.main}
           presentationId={presentation.id}
           supportedDataFormat={dataModel.supportedDataFormats}
           model={dataModel}
@@ -131,35 +172,57 @@ export const TableViewer = observer(function TableViewer({
         />
         <table-data as='div'>
           <table-box as='div'>
-            {dataModel.source.hasResult(resultIndex) && (
-              <TableGrid
-                model={dataModel}
-                dataFormat={dataFormat}
-                presentation={presentation}
-                resultIndex={resultIndex}
-              />
+            {(overlay || !loading) && (
+              <Split sticky={30} mode={valuePresentation?.dataFormat === dataFormat ? undefined : 'maximize'} keepRatio>
+                <Pane main>
+                  {dataModel.source.hasResult(resultIndex) && (
+                    <TableGrid
+                      model={dataModel}
+                      dataFormat={dataFormat}
+                      presentation={presentation}
+                      resultIndex={resultIndex}
+                    />
+                  )}
+                  <error as="div" hidden={!error.details} {...use({ animated })}>
+                    {error.details?.message}
+                    <br /><br />
+                    <Button type='button' mod={['outlined']} onClick={() => dataModel.source.clearError()}>
+                      {translate('ui_error_close')}
+                    </Button>
+                    {error.details?.hasDetails && (
+                      <Button type='button' mod={['unelevated']} onClick={error.open}>
+                        {translate('ui_errors_details')}
+                      </Button>
+                    )}
+                  </error>
+                </Pane>
+                {valuePresentation?.dataFormat === dataFormat && <ResizerControls />}
+                <Pane>
+                  <ValuePanel
+                    model={dataModel}
+                    dataFormat={dataFormat}
+                    presentationId={valuePresentationId ?? null}
+                    resultIndex={resultIndex}
+                  />
+                </Pane>
+              </Split>
             )}
-            <error as="div" hidden={!error.details} {...use({ animated })}>
-              {error.details?.message}
-              <br /><br />
-              <Button type='button' mod={['outlined']} onClick={() => dataModel.source.clearError()}>
-                {translate('ui_error_close')}
-              </Button>
-              {error.details?.hasDetails && (
-                <Button type='button' mod={['unelevated']} onClick={error.open}>
-                  {translate('ui_errors_details')}
-                </Button>
-              )}
-            </error>
             <Loader
-              loading={dataModel.isLoading()}
+              loading={loading}
               cancelDisabled={!dataModel.source.canCancel}
-              overlay={dataModel.source.results.length > 0 && presentation.dataFormat === dataFormat}
+              overlay={overlay}
               onCancel={() => dataModel.source.cancel()}
             />
           </table-box>
           <TableFooter model={dataModel} resultIndex={resultIndex} />
         </table-data>
+        <TablePresentationBar
+          type={DataPresentationType.value}
+          presentationId={valuePresentationId ?? null}
+          supportedDataFormat={[dataFormat]}
+          model={dataModel}
+          onPresentationChange={handleValuePresentationChange}
+        />
       </table-content>
     </table-viewer>
   );
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel.tsx
new file mode 100644
index 0000000000..97e7a34b56
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel.tsx
@@ -0,0 +1,73 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import type { PropsWithChildren } from 'react';
+import styled, { css } from 'reshadow';
+
+import { TextPlaceholder } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
+
+import { DataPresentationService, DataPresentationType } from '../DataPresentationService';
+import type { DataModelWrapper } from './DataModelWrapper';
+
+type TableGridProps = PropsWithChildren<{
+  model: DataModelWrapper; // TODO: change to IDatabaseDataModel<any>
+  dataFormat: ResultDataFormat;
+  presentationId: string | null;
+  resultIndex: number;
+}>;
+
+const styles = css`
+  Presentation {
+    flex: 1;
+    overflow: auto;
+  }
+`;
+
+export const ValuePanel = observer(function ValuePanel({
+  model,
+  dataFormat,
+  presentationId,
+  resultIndex,
+}: TableGridProps) {
+  const translate = useTranslate();
+  const dataPresentationService = useService(DataPresentationService);
+
+  if (!presentationId) {
+    return null;
+  }
+
+  const presentation = dataPresentationService.getSupported(
+    DataPresentationType.value,
+    dataFormat,
+    presentationId
+  );
+  const result = model.getResult(resultIndex);
+
+  if (!presentation || dataFormat !== presentation.dataFormat) {
+    if (model.isLoading()) {
+      return null;
+    }
+
+    // eslint-disable-next-line react/no-unescaped-entities
+    return <TextPlaceholder>Current data can't be displayed by selected presentation</TextPlaceholder>;
+  }
+
+  const Presentation = presentation.getPresentationComponent();
+
+  if (result?.loadedFully && !result.data) {
+    return <TextPlaceholder>{translate('data_viewer_nodata_message')}</TextPlaceholder>;
+  }
+
+  return styled(styles)(
+    <Presentation model={model} resultIndex={resultIndex} />
+  );
+});
diff --git a/webapp/packages/plugin-data-viewer/src/index.ts b/webapp/packages/plugin-data-viewer/src/index.ts
index 5825dede3f..10631d9967 100644
--- a/webapp/packages/plugin-data-viewer/src/index.ts
+++ b/webapp/packages/plugin-data-viewer/src/index.ts
@@ -3,7 +3,9 @@ import { manifest } from './manifest';
 export default manifest;
 
 export * from './DatabaseDataModel/Actions/DatabaseDataActionDecorator';
+export * from './DatabaseDataModel/Actions/IDatabaseDataFormatAction';
 export * from './DatabaseDataModel/Actions/IDatabaseDataSelectAction';
+export * from './DatabaseDataModel/Actions/ResultSetFormatAction';
 export * from './DatabaseDataModel/Actions/ResultSetSelectAction';
 export * from './DatabaseDataModel/DatabaseDataActions';
 export * from './DatabaseDataModel/DatabaseDataEditor';
diff --git a/webapp/packages/plugin-data-viewer/src/locales/en.ts b/webapp/packages/plugin-data-viewer/src/locales/en.ts
index a07b5d7ec2..600f73ef4a 100644
--- a/webapp/packages/plugin-data-viewer/src/locales/en.ts
+++ b/webapp/packages/plugin-data-viewer/src/locales/en.ts
@@ -1,4 +1,5 @@
 export default [
   ['table_header_sql_expression', 'Enter a SQL expression to filter results'],
   ['data_viewer_nodata_message', 'No data to show'],
+  ['data_viewer_presentation_value_title', 'Value'],
 ];
diff --git a/webapp/packages/plugin-data-viewer/src/locales/ru.ts b/webapp/packages/plugin-data-viewer/src/locales/ru.ts
index 345ecf9fc1..d89106e015 100644
--- a/webapp/packages/plugin-data-viewer/src/locales/ru.ts
+++ b/webapp/packages/plugin-data-viewer/src/locales/ru.ts
@@ -1,4 +1,5 @@
 export default [
   ['table_header_sql_expression', 'Введите SQL выражение чтобы отфильтровать результаты'],
   ['data_viewer_nodata_message', 'Нет данных для отображения'],
+  ['data_viewer_presentation_value_title', 'Значение'],
 ];
diff --git a/webapp/packages/plugin-data-viewer/src/manifest.ts b/webapp/packages/plugin-data-viewer/src/manifest.ts
index 88e5608089..f0f90e86e4 100644
--- a/webapp/packages/plugin-data-viewer/src/manifest.ts
+++ b/webapp/packages/plugin-data-viewer/src/manifest.ts
@@ -6,8 +6,9 @@
  * you may not use this file except in compliance with the License.
  */
 
-import type { IServiceInjector, PluginManifest } from '@cloudbeaver/core-di';
+import type { PluginManifest } from '@cloudbeaver/core-di';
 
+import { TextValuePresentationBootstrap } from './DataPresentation/TextValuePresentation/TextValuePresentationBootstrap';
 import { DataPresentationService } from './DataPresentationService';
 import { DataViewerBootstrap } from './DataViewerBootstrap';
 import { DataViewerTableService } from './DataViewerTableService';
@@ -23,6 +24,7 @@ export const manifest: PluginManifest = {
   },
 
   providers: [
+    DataViewerBootstrap,
     DataViewerTabService,
     DataViewerTableService,
     DataPresentationService,
@@ -30,11 +32,6 @@ export const manifest: PluginManifest = {
     TableFooterMenuService,
     TableHeaderService,
     LocaleService,
+    TextValuePresentationBootstrap,
   ],
-
-  async initialize(services: IServiceInjector) {
-    services
-      .resolveServiceByClass(DataViewerBootstrap)
-      .bootstrap();
-  },
 };
diff --git a/webapp/packages/plugin-object-viewer/src/IObjectViewerTabState.ts b/webapp/packages/plugin-object-viewer/src/IObjectViewerTabState.ts
index cd19efdd3c..9102c38041 100644
--- a/webapp/packages/plugin-object-viewer/src/IObjectViewerTabState.ts
+++ b/webapp/packages/plugin-object-viewer/src/IObjectViewerTabState.ts
@@ -16,5 +16,5 @@ export interface IObjectViewerTabState {
   tabIcon?: string;
   tabTitle?: string;
   pageId: string;
-  pagesState: Map<string, any>;
+  pagesState: Record<string, any>;
 }
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPage/DBObjectPageService.ts b/webapp/packages/plugin-object-viewer/src/ObjectPage/DBObjectPageService.ts
index 21d9dc748a..46e75a5cec 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPage/DBObjectPageService.ts
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPage/DBObjectPageService.ts
@@ -44,7 +44,7 @@ export class DBObjectPageService {
   getPageState<T>(tab: ITab<IObjectViewerTabState>, page: ObjectPage<T>| string): T | undefined {
     const pageKey = typeof page === 'string' ? page : page.key;
 
-    return tab.handlerState.pagesState.get(pageKey);
+    return tab.handlerState.pagesState[pageKey];
   }
 
   trySwitchPage<T>(tab: ITab<IObjectViewerTabState>, page: ObjectPage<T>, state?: T): boolean {
@@ -60,14 +60,14 @@ export class DBObjectPageService {
   selectPage = async <T>(tab: ITab<IObjectViewerTabState>, page: ObjectPage<T>, state?: T) => {
     tab.handlerState.pageId = page.key;
     if (state !== undefined) {
-      tab.handlerState.pagesState.set(page.key, state);
+      tab.handlerState.pagesState[page.key] = state;
     }
     await this.callHandlerCallback(tab, page => page.onSelect);
   };
 
   async restorePages(tab: ITab<IObjectViewerTabState>): Promise<boolean> {
     for (const page of this.pages.values()) {
-      if (page.onRestore && !page.onRestore(tab, this.getPageState(tab, page))) {
+      if (page.onRestore && !(await page.onRestore(tab, this.getPageState(tab, page)))) {
         return false;
       }
     }
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPage/ObjectPage.ts b/webapp/packages/plugin-object-viewer/src/ObjectPage/ObjectPage.ts
index 68da507c62..369445c900 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPage/ObjectPage.ts
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPage/ObjectPage.ts
@@ -70,10 +70,10 @@ export class ObjectPage<T = unknown> {
   }
 
   getState(tab: ITab<IObjectViewerTabState>): T | undefined {
-    return tab.handlerState.pagesState.get(this.key);
+    return tab.handlerState.pagesState[this.key];
   }
 
   setState(tab: ITab<IObjectViewerTabState>, state: T): void {
-    tab.handlerState.pagesState.set(this.key, state);
+    tab.handlerState.pagesState[this.key] = state;
   }
 }
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectViewerTabService.ts b/webapp/packages/plugin-object-viewer/src/ObjectViewerTabService.ts
index 1f162a74cd..de597c0d21 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectViewerTabService.ts
+++ b/webapp/packages/plugin-object-viewer/src/ObjectViewerTabService.ts
@@ -78,7 +78,7 @@ export class ObjectViewerTabService {
     contexts: IExecutionContextProvider<INodeNavigationData>,
     data: INodeNavigationData
   ): Promise<IObjectViewerTabContext> => {
-    const tabInfo = await contexts.getContext(this.navigationTabsService.navigationTabContext);
+    const tabInfo = contexts.getContext(this.navigationTabsService.navigationTabContext);
     const nodeInfo = await contexts.getContext(this.navNodeManagerService.navigationNavNodeContext);
 
     // check if tab already exist for object
@@ -100,7 +100,7 @@ export class ObjectViewerTabService {
           parents: await nodeInfo.getParents(),
           folderId: nodeInfo.folderId,
           pageId: '',
-          pagesState: new Map(),
+          pagesState: {},
           tabIcon: nodeInfo.icon,
           tabTitle: nodeInfo.name,
         },
@@ -291,7 +291,7 @@ export class ObjectViewerTabService {
       && (!tab.handlerState.tabIcon || typeof tab.handlerState.tabIcon === 'string')
       && (!tab.handlerState.tabTitle || typeof tab.handlerState.tabTitle === 'string')
     ) {
-      tab.handlerState.pagesState = observable.map(tab.handlerState.pagesState);
+      // tab.handlerState.pagesState = observable.map(tab.handlerState.pagesState);
       if (tab.handlerState.connectionId) {
         if (!this.connectionInfo.has(tab.handlerState.connectionId)) {
           return false;
diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultPanel.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultPanel.tsx
index a6fb8842af..b4d21f8581 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultPanel.tsx
+++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultPanel.tsx
@@ -29,6 +29,7 @@ interface SqlResultPanelProps {
 
 export const SqlResultPanel = observer(function SqlResultPanel({ tab, panelInit }: SqlResultPanelProps) {
   const [presentationId, setPresentation] = useState('');
+  const [valuePresentationId, setValuePresentation] = useState<string | null>(null);
   const group = tab.handlerState.queryTabGroups.find(group => group.groupId === panelInit.groupId)!;
 
   return styled(style)(
@@ -37,7 +38,9 @@ export const SqlResultPanel = observer(function SqlResultPanel({ tab, panelInit
         tableId={group.modelId}
         resultIndex={panelInit.indexInResultSet}
         presentationId={presentationId}
+        valuePresentationId={valuePresentationId}
         onPresentationChange={setPresentation}
+        onValuePresentationChange={setValuePresentation}
       />
     </result-panel>
   );