diff --git a/src/controls/AntdImageControl.tsx b/src/controls/AntdImageControl.tsx
new file mode 100644
index 0000000..33c0591
--- /dev/null
+++ b/src/controls/AntdImageControl.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { rankWith, RankedTester, uiTypeIs } from '../testers';
+import { Image } from 'antd';
+import { withStoreToControlProps } from '../util/ContextToProps';
+
+export const AntdImageControl = (props: any): JSX.Element => {
+  const { uiOptions, data } = props;
+  return <Image height={'100%'} src={Array.isArray(data) ? data[0] || '' : ''} fallback={uiOptions.fallback} />;
+};
+
+export const antdImageControlTester: RankedTester = rankWith(3, uiTypeIs('aldkg:Image'));
+export const AntdImageControlWithStore = withStoreToControlProps(AntdImageControl);
diff --git a/src/controls/index.ts b/src/controls/index.ts
index 1838419..7b4cbf1 100644
--- a/src/controls/index.ts
+++ b/src/controls/index.ts
@@ -17,6 +17,7 @@ import { antdRadioGroupControlTester, AntdRadioGroupControlWithStore } from './A
 import { antdSliderControlTester, AntdSliderControlWithStore } from './AntdSliderControl';
 import { antdTextControlTester, AntdTextControlWithStore } from './AntdTextControl';
 import { tinyMCEControlTester, TinyMCEControlWithStore } from './TinyMCEControl';
+import { antdImageControlTester, AntdImageControlWithStore } from './AntdImageControl';
 
 export const antdControlRenderers: RendererRegistryEntry[] = [
   { tester: antdBooleanControlTester, renderer: AntdBooleanControlWithStore },
@@ -28,6 +29,10 @@ export const antdControlRenderers: RendererRegistryEntry[] = [
     tester: antdRadioGroupControlTester,
     renderer: AntdRadioGroupControlWithStore,
   },
+  {
+    tester: antdImageControlTester,
+    renderer: AntdImageControlWithStore,
+  },
   { tester: antdSliderControlTester, renderer: AntdSliderControlWithStore },
   { tester: antdTextControlTester, renderer: AntdTextControlWithStore },
 
@@ -44,3 +49,4 @@ export * from './AntdRadioGroupControl';
 export * from './AntdSliderControl';
 export * from './AntdTextControl';
 export * from './TinyMCEControl';
+export * from './AntdImageControl';
diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx
index 3fedf46..eebfb0b 100644
--- a/src/layouts/AntdFormLayout.tsx
+++ b/src/layouts/AntdFormLayout.tsx
@@ -78,12 +78,14 @@ export const AntdFormLayout: React.FC<any> = ({
   onEdit,
   editing,
 }) => {
-  const { readOnly } = viewKindElement.options;
+  const { readOnly, style } = viewKindElement.options;
   return (
     <AutoSizer>
       {({ width, height }: any) => (
-        <div style={{ width, height, overflow: 'auto' }} onClick={() => onEdit()}>
-          <span style={{ padding: '7px', fontSize: '2em' }}>{title}</span>
+        <div
+          style={{ width, height, overflow: 'auto', position: 'relative', ...style }}
+          onClick={() => !readOnly && onEdit()}>
+          {title && <span style={{ padding: '7px', fontSize: '2em' }}>{title}</span>}
           {readOnly ? null : <LogicalButton form={id} onSave={onSave} onCancel={onCancel} />}
           <Form labelAlign={'left'}>
             <AntdVerticalLayoutWithStore
diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx
index 3ce4430..def4b3b 100644
--- a/src/layouts/AntdHorizontalLayout.tsx
+++ b/src/layouts/AntdHorizontalLayout.tsx
@@ -25,13 +25,19 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
   viewDescrElement,
   enabled,
   visible,
+  form,
 }) => {
   //const layout = viewKindElement as Layout;
-  const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled, form }) => {
+  const parentViewKindElement = viewKindElement;
+  const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => {
+    const defaultSize = parentViewKindElement.options?.defaultSize;
     const options = viewKindElement.options || {};
+    const numberOfColumns = Math.ceil(24 / (parentViewKindElement.elements?.length || 1));
     const style: any = options.style;
     const span =
-      options.contentSize || !viewKindElement.elements ? undefined : Math.ceil(24 / viewKindElement.elements.length);
+      defaultSize && defaultSize[viewKindElement['@id']]
+        ? defaultSize && defaultSize[viewKindElement['@id']]
+        : options.contentSize || numberOfColumns;
     return (
       <Col key={idx} style={style} span={span}>
         <FormsDispatch
@@ -44,11 +50,12 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
       </Col>
     );
   };
-  const justify: any = viewKindElement.options ? viewKindElement.options.justify : 'center';
+  const justify: any = viewKindElement.options?.justify || 'space-between';
+  const align: any = viewKindElement.options?.align || 'middle';
   const rowStyle: any = { flexWrap: 'nowrap' };
   if (viewKindElement.options && viewKindElement.options.width === 'all-empty-space') rowStyle.width = '100%';
   return (
-    <Row justify={justify} style={rowStyle} align={'middle'}>
+    <Row justify={justify} style={rowStyle} align={align}>
       {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render })}
     </Row>
   );
diff --git a/src/layouts/AntdVerticalLayout.tsx b/src/layouts/AntdVerticalLayout.tsx
index 27cfd52..0e990e2 100644
--- a/src/layouts/AntdVerticalLayout.tsx
+++ b/src/layouts/AntdVerticalLayout.tsx
@@ -9,7 +9,7 @@
  ********************************************************************************/
 import React from 'react';
 import { Row, Col } from 'antd';
-
+import { getSnapshot } from 'mobx-state-tree';
 import { FormsDispatchProps, FormsDispatch } from '../Form';
 import { rankWith, uiTypeIs, RankedTester } from '../testers';
 import { withLayoutProps } from '../util/ContextToProps';
@@ -28,10 +28,11 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
   form,
   readOnly,
 }) => {
+  const style = viewKindElement.options?.style;
   const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => {
-    const options = viewKindElement.options || {};
+    const height = viewKindElement.options?.style?.height;
+    console.log('OPT', viewKindElement, height);
     const newViewKindElement = { ...viewKindElement };
-    const style = viewKindElement.options?.style;
     if (newViewKindElement.options) {
       newViewKindElement.options.style = {};
     }
@@ -39,11 +40,11 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
       <Row
         style={{
           position: 'relative',
-          width: '100%',
+          width: '100%', //
+          height,
           //flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '',
-          ...style,
         }}>
-        <Col span={24}>
+        <Col span={24} style={{ position: 'relative' }}>
           <FormsDispatch
             viewKind={viewKind}
             viewKindElement={newViewKindElement}
@@ -57,7 +58,7 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
   };
   return (
     <React.Fragment>
-      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%', ...style }}>
         {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render, readOnly })}
       </div>
     </React.Fragment>
diff --git a/src/util/ContextToProps.tsx b/src/util/ContextToProps.tsx
index 0779397..b220c83 100644
--- a/src/util/ContextToProps.tsx
+++ b/src/util/ContextToProps.tsx
@@ -599,7 +599,7 @@ const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, data }:
   const labelDesc = createLabelDescriptionFrom(viewKindElement as any, schema);
   const label = labelDesc.show ? (labelDesc.text as string) : '';
   const key = pathSegments[1];
-  const enabled = data[key] && (editable ?? true);
+  const enabled = data[key] !== undefined && data[key] !== null ? editable ?? true : false;
   return {
     description,
     label,
diff --git a/src/util/layout.tsx b/src/util/layout.tsx
index 07bec8f..7230383 100644
--- a/src/util/layout.tsx
+++ b/src/util/layout.tsx
@@ -35,7 +35,7 @@ export const renderLayoutElements = ({
   //const sort = id ? viewKind.properties && viewKind.properties[id] && viewKind.properties[id].order : undefined;
   if (!elements || elements.length === 0) return <></>;
   return elements.map((el: IViewKindElement, idx: number) => {
-    el = { ...el, options: { ...el.options, readOnly } };
+    el = { ...el, options: { readOnly, ...el.options } };
     return (
       <Render key={idx} idx={idx} viewKind={viewKind} viewKindElement={el} viewDescr={viewDescr} enabled={enabled} />
     );
diff --git a/stories/FormColumnsAndTable.stories.tsx b/stories/FormColumnsAndTable.stories.tsx
new file mode 100644
index 0000000..4ce4de1
--- /dev/null
+++ b/stories/FormColumnsAndTable.stories.tsx
@@ -0,0 +1,576 @@
+/********************************************************************************
+ * Copyright (c) 2020 Agentlab and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the GNU General Public License v. 3.0 which is available at
+ * https://www.gnu.org/licenses/gpl-3.0.html.
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ ********************************************************************************/
+import moment from 'moment';
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Provider } from 'react-redux';
+import { asReduxStore, connectReduxDevtools } from 'mst-middlewares';
+import { CollState, rootModelInitialState, SparqlClientImpl } from '@agentlab/sparql-jsld-client';
+
+import {
+  antdCells,
+  antdControlRenderers,
+  antdLayoutRenderers,
+  antdDataControlRenderers,
+  Form,
+  MstContextProvider,
+  RendererRegistryEntry,
+  tableRenderers,
+} from '../src';
+import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs';
+import { createUiModelFromState } from '../src/models/MstViewDescr';
+
+export default {
+  title: 'Several Controls/FormColumns and Table',
+  component: Form,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+export const Empty: Story<{}> = () => {
+  const antdRenderers: RendererRegistryEntry[] = [
+    ...antdControlRenderers,
+    ...antdLayoutRenderers,
+    ...antdDataControlRenderers,
+    ...tableRenderers,
+  ];
+
+  const client = new SparqlClientImpl(
+    'https://rdf4j.agentlab.ru/rdf4j-server',
+    'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces',
+  );
+  const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls);
+  const store: any = asReduxStore(rootStore);
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  connectReduxDevtools(require('remotedev'), rootStore);
+  return (
+    <div style={{ height: 'calc(100vh - 32px)' }}>
+      <Provider store={store}>
+        <MstContextProvider store={rootStore} renderers={antdRenderers} cells={antdCells}>
+          <Form viewDescrId={viewDescrs[0]['@id']} viewDescrCollId={viewDescrCollConstr['@id']} />
+        </MstContextProvider>
+      </Provider>
+    </div>
+  );
+};
+
+const mktpSchemaRepoIri = 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp-schema';
+const mktpOntopRepoIri = 'http://192.168.1.33:8090/sparql';
+
+const viewKinds = [
+  {
+    '@id': 'mktp:FormWithColumnsViewKind',
+    '@type': 'aldkg:ViewKind',
+    title: 'FormWithColumns',
+    description: 'FormWithColumns',
+    collsConstrs: [
+      {
+        '@id': 'rm:Cards_Coll',
+        '@type': 'aldkg:CollConstr',
+        entConstrs: [
+          {
+            '@id': 'rm:Cards_Coll_Ent0',
+            '@type': 'aldkg:EntConstr',
+            schema: 'hs:ProductCardShape',
+            service: mktpSchemaRepoIri,
+            conditions: {
+              '@id': 'mktp:Cards_Coll_Ent0_con',
+              identifier: 'https://huntersales.ru/catalog/products/18279449',
+            },
+          },
+        ],
+        //orderBy: [{ expression: variable('identifier0'), descending: false }],
+      },
+    ],
+    // child ui elements configs
+    elements: [
+      {
+        '@id': 'mktp:_8255hFsd',
+        '@type': 'aldkg:VerticalLayout',
+        options: {
+          style: {
+            height: '20%',
+          },
+          width: 'all-empty-space',
+        },
+        elements: [
+          {
+            '@id': 'rm:_834hd7f',
+            '@type': 'aldkg:FormLayout',
+            options: {
+              style: {
+                height: '100%',
+              },
+              readOnly: true,
+            },
+            elements: [
+              {
+                '@id': 'mktp:_87Dfg78',
+                '@type': 'aldkg:HorizontalLayout',
+                options: {
+                  justify: 'start', // start end center space-between space-around
+                  align: 'flex-start',
+                  //contentSize: true,
+                  style: {
+                    //flexGrow: '5',
+                    width: '100%',
+                  },
+                  defaultSize: {
+                    'mktp:_8255hFd3': 4,
+                    'mktp:_88Dfg78': 20,
+                  },
+                  width: 'all-empty-space',
+                },
+                elements: [
+                  {
+                    '@id': 'mktp:_8255hFd3',
+                    '@type': 'aldkg:VerticalLayout',
+                    options: {
+                      style: {
+                        padding: '5px',
+                      },
+                      width: 'all-empty-space',
+                    },
+                    elements: [
+                      {
+                        '@id': 'mktp:_63JdF67',
+                        '@type': 'aldkg:Image',
+                        resultsScope: 'rm:Cards_Coll/imageUrl',
+                        options: {
+                          fallback:
+                            'data:image/png;base64,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',
+                        },
+                      },
+                    ],
+                  },
+                  {
+                    '@id': 'mktp:_88Dfg78',
+                    '@type': 'aldkg:VerticalLayout',
+                    options: {
+                      style: {
+                        height: '20%',
+                      },
+                    },
+                    elements: [
+                      {
+                        '@id': 'mktp:_63JdF67',
+                        '@type': 'aldkg:Control',
+                        resultsScope: 'rm:Cards_Coll/name',
+                      },
+                      {
+                        '@id': 'mktp:_87Dfg78',
+                        '@type': 'aldkg:HorizontalLayout',
+                        options: {
+                          justify: 'start', // start end center space-between space-around
+                          align: 'flex-start',
+                          //contentSize: true,
+                          style: {
+                            //flexGrow: '5',
+                            width: '100%',
+                          },
+                          width: 'all-empty-space',
+                        },
+                        elements: [
+                          {
+                            '@id': 'mktp:_93JhdA78',
+                            '@type': 'aldkg:VerticalLayout',
+                            options: {
+                              style: {
+                                padding: '5px',
+                              },
+                              width: 'all-empty-space',
+                            },
+                            elements: [
+                              {
+                                '@id': 'mktp:_Kjd7F7s8',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/country',
+                              },
+                              {
+                                '@id': 'mktp:_Kf893Jd6',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/brand',
+                              },
+                              {
+                                '@id': 'mktp:_K84jd^',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/price',
+                              },
+                              {
+                                '@id': 'mktp:_dF7jdF6',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/saleValue',
+                              },
+                              {
+                                '@id': 'mktp:_93Kdf7j',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/seller',
+                              },
+                            ],
+                          },
+                          {
+                            '@id': 'mktp:_87Kdf3Ry7',
+                            '@type': 'aldkg:VerticalLayout',
+                            options: {
+                              style: {
+                                padding: '5px',
+                              },
+                              width: 'all-empty-space',
+                            },
+                            elements: [
+                              {
+                                '@id': 'mktp:_93Kd8hH',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/categoryPopularity',
+                              },
+                              {
+                                '@id': 'mktp:_j7JG8d',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/commentsCount',
+                              },
+                              {
+                                '@id': 'mktp:_fg78Dfj6',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/starsValue',
+                              },
+                              {
+                                '@id': 'mktp:_924KFhf7',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/questionsCount',
+                              },
+                            ],
+                          },
+                          {
+                            '@id': 'mktp:_86hDyf9',
+                            '@type': 'aldkg:VerticalLayout',
+                            options: {
+                              style: {
+                                padding: '5px',
+                              },
+                              width: 'all-empty-space',
+                            },
+                            elements: [
+                              {
+                                '@id': 'mktp:_Kd83457',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/lastMonthSalesAmount',
+                              },
+                              {
+                                '@id': 'mktp:_8385jKd',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/lastMonthSalesValue',
+                              },
+                              {
+                                '@id': 'mktp:_956jsnH',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/perMonthSalesValue',
+                              },
+                              {
+                                '@id': 'mktp:_834LdjR',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/prevMonthSalesAmount',
+                              },
+                              {
+                                '@id': 'mktp:_935jFhj',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/prevMonthSalesValue',
+                              },
+                            ],
+                          },
+                          {
+                            '@id': 'mktp:_9348jDf7',
+                            '@type': 'aldkg:VerticalLayout',
+                            options: {
+                              style: {
+                                padding: '5px',
+                              },
+                              width: 'all-empty-space',
+                            },
+                            elements: [
+                              {
+                                '@id': 'mktp:_912JdmF',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/salesAmountDiff',
+                              },
+                              {
+                                '@id': 'mktp:_935KfH',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/totalSales',
+                              },
+                              {
+                                '@id': 'mktp:_482fDg8',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/totalSalesDiff',
+                              },
+                              {
+                                '@id': 'mktp:_94Fdf72',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/stocks',
+                              },
+                              {
+                                '@id': 'mktp:_68hDf2',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/stocksDiffOrders',
+                              },
+                              {
+                                '@id': 'mktp:_683Jfg72',
+                                '@type': 'aldkg:Control',
+                                resultsScope: 'rm:Cards_Coll/stocksDiffReturns',
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        '@id': 'mktp:_8255hFsd',
+        '@type': 'aldkg:VerticalLayout',
+        options: {
+          style: {
+            height: '80%',
+          },
+          width: 'all-empty-space',
+        },
+        elements: [
+          {
+            '@id': 'mktp:CategoryCardsTable',
+            '@type': 'aldkg:Array',
+            resultsScope: 'rm:Cards_Coll',
+            options: {
+              draggable: true,
+              resizeableHeader: true,
+              height: 'all-empty-space',
+              style: { height: '100%' },
+              order: [
+                'imageUrl',
+                'name',
+                'price',
+                'saleValue',
+                'categoryPopularity',
+                'commentsCount',
+                'starsValue',
+                'questionsCount',
+                'lastMonthSalesAmount',
+                'lastMonthSalesValue',
+                'perMonthSalesAmount',
+                'perMonthSalesValue',
+                'prevMonthSalesAmount',
+                'prevMonthSalesValue',
+                'salesAmountDiff',
+                'totalSales',
+                'totalSalesDiff',
+                'stocks',
+                'stocksDiffOrders',
+                'stocksDiffReturns',
+                'country',
+                'brand',
+                'seller',
+                'identifier',
+                'rootId',
+                'photosCount',
+                'firstParsedAt',
+                'lastMonthParsedAt',
+                'parsedAt',
+                'prevParsedAt',
+              ],
+              imageUrl: {
+                width: 60,
+                formatter: 'image',
+                editable: false,
+              },
+              identifier: {
+                formatter: 'link',
+                //dataToFormatter: { link: 'identifier' },
+                sortable: true,
+                editable: false,
+              },
+              name: {
+                width: 340,
+                formatter: 'link',
+                dataToFormatter: { link: '@id' },
+                sortable: true,
+                editable: false,
+              },
+              country: {
+                width: 60,
+                sortable: true,
+                editable: false,
+              },
+              brand: {
+                formatter: 'link',
+                sortable: true,
+                editable: false,
+              },
+              price: {
+                width: 60,
+                sortable: true,
+                editable: false,
+              },
+              saleValue: {
+                width: 60,
+                sortable: true,
+                editable: false,
+              },
+              seller: {
+                formatter: 'link',
+                sortable: true,
+                editable: false,
+              },
+              categoryPopularity: {
+                width: 100,
+                editable: false,
+              },
+              commentsCount: {
+                width: 100,
+                sortable: true,
+                editable: false,
+              },
+              starsValue: {
+                width: 100,
+                sortable: true,
+                editable: false,
+              },
+              questionsCount: {
+                width: 100,
+                sortable: true,
+                editable: false,
+              },
+              lastMonthSalesAmount: {
+                width: 150,
+                sortable: true,
+                editable: false,
+              },
+              lastMonthSalesValue: {
+                width: 150,
+                sortable: true,
+                editable: false,
+              },
+              perMonthSalesAmount: {
+                width: 150,
+                sortable: true,
+                editable: false,
+              },
+              perMonthSalesValue: {
+                width: 150,
+                sortable: true,
+                editable: false,
+              },
+              prevMonthSalesAmount: {
+                width: 150,
+                sortable: true,
+                editable: false,
+              },
+              prevMonthSalesValue: {
+                width: 150,
+                sortable: true,
+                editable: false,
+              },
+              salesAmountDiff: {
+                width: 150,
+                sortable: true,
+                editable: false,
+              },
+              totalSales: {
+                width: 100,
+                sortable: true,
+                editable: false,
+              },
+              totalSalesDiff: {
+                width: 150,
+                sortable: true,
+                editable: false,
+              },
+              stocks: {
+                width: 100,
+                sortable: true,
+                editable: false,
+              },
+              stocksDiffOrders: {
+                width: 100,
+                sortable: true,
+                editable: false,
+              },
+              stocksDiffReturns: {
+                width: 100,
+                sortable: true,
+                editable: false,
+              },
+              rootId: {
+                editable: false,
+              },
+              photosCount: {
+                editable: false,
+              },
+              firstParsedAt: {
+                editable: false,
+              },
+              lastMonthParsedAt: {
+                editable: false,
+              },
+              parsedAt: {
+                editable: false,
+              },
+              prevParsedAt: {
+                editable: false,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const viewDescrs = [
+  {
+    '@id': 'mktp:FormWithColumnsViewDescr',
+    '@type': 'aldkg:ViewDescr',
+    viewKind: 'mktp:FormWithColumnsViewKind',
+    title: 'FormWithColumns',
+    description: 'FormWithColumns',
+    collsConstrs: [],
+    options: {},
+    // child ui elements configs
+    elements: [],
+  },
+];
+
+const additionalColls: CollState[] = [
+  // ViewKinds Collection
+  {
+    constr: viewKindCollConstr,
+    data: viewKinds,
+    opt: {
+      updPeriod: undefined,
+      lastSynced: moment.now(),
+      //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs
+    },
+  },
+  // ViewDescrs Collection
+  {
+    constr: viewDescrCollConstr,
+    data: viewDescrs,
+    opt: {
+      updPeriod: undefined,
+      lastSynced: moment.now(),
+      //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server
+      // for viewDescrs.collConstrs (it loads lazily -- after the first access)
+    },
+  },
+];
diff --git a/stories/FormWithColumns.stories.tsx b/stories/FormWithColumns.stories.tsx
deleted file mode 100644
index 2abd662..0000000
--- a/stories/FormWithColumns.stories.tsx
+++ /dev/null
@@ -1,349 +0,0 @@
-/********************************************************************************
- * Copyright (c) 2020 Agentlab and others.
- *
- * This program and the accompanying materials are made available under the
- * terms of the GNU General Public License v. 3.0 which is available at
- * https://www.gnu.org/licenses/gpl-3.0.html.
- *
- * SPDX-License-Identifier: GPL-3.0-only
- ********************************************************************************/
-import moment from 'moment';
-import React from 'react';
-import { Story, Meta } from '@storybook/react';
-
-import { Provider } from 'react-redux';
-import { asReduxStore, connectReduxDevtools } from 'mst-middlewares';
-import { CollState, rootModelInitialState, SparqlClientImpl } from '@agentlab/sparql-jsld-client';
-
-import {
-  antdCells,
-  antdControlRenderers,
-  antdLayoutRenderers,
-  antdDataControlRenderers,
-  Form,
-  MstContextProvider,
-  RendererRegistryEntry,
-} from '../src';
-import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs';
-import { createUiModelFromState } from '../src/models/MstViewDescr';
-
-export default {
-  title: 'Form/Form with Columns',
-  component: Form,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as Meta;
-
-export const Empty: Story<{}> = () => {
-  const antdRenderers: RendererRegistryEntry[] = [
-    ...antdControlRenderers,
-    ...antdLayoutRenderers,
-    ...antdDataControlRenderers,
-  ];
-
-  const client = new SparqlClientImpl(
-    'https://rdf4j.agentlab.ru/rdf4j-server',
-    'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces',
-  );
-  const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls);
-  const store: any = asReduxStore(rootStore);
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  connectReduxDevtools(require('remotedev'), rootStore);
-  return (
-    <div style={{ height: 'calc(100vh - 32px)' }}>
-      <Provider store={store}>
-        <MstContextProvider store={rootStore} renderers={antdRenderers} cells={antdCells}>
-          <Form viewDescrId={viewDescrs[0]['@id']} viewDescrCollId={viewDescrCollConstr['@id']} />
-        </MstContextProvider>
-      </Provider>
-    </div>
-  );
-};
-
-const mktpSchemaRepoIri = 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp-schema';
-const mktpOntopRepoIri = 'http://192.168.1.33:8090/sparql';
-
-const viewKinds = [
-  {
-    '@id': 'mktp:FormWithColumnsViewKind',
-    '@type': 'aldkg:ViewKind',
-    title: 'FormWithColumns',
-    description: 'FormWithColumns',
-    collsConstrs: [
-      {
-        '@id': 'rm:Cards_Coll',
-        '@type': 'aldkg:CollConstr',
-        entConstrs: [
-          {
-            '@id': 'rm:Cards_Coll_Ent0',
-            '@type': 'aldkg:EntConstr',
-            schema: 'hs:ProductCardShape',
-            service: mktpSchemaRepoIri,
-          },
-        ],
-        //orderBy: [{ expression: variable('identifier0'), descending: false }],
-      },
-    ],
-    // child ui elements configs
-    elements: [
-      {
-        '@id': 'mktp:_87Dfg78',
-        '@type': 'aldkg:HorizontalLayout',
-        options: {
-          justify: 'start', // start end center space-between space-around
-          //contentSize: true,
-          style: {
-            //flexGrow: '5',
-            width: '100%',
-          },
-          width: 'all-empty-space',
-        },
-        elements: [
-          {
-            '@id': 'mktp:_8255hFd3',
-            '@type': 'aldkg:VerticalLayout',
-            options: {
-              style: {
-                width: '20%',
-              },
-              width: 'all-empty-space',
-            },
-            elements: [
-              {
-                '@id': 'mktp:_63JdF67',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/imageUrl',
-              },
-            ],
-          },
-          {
-            '@id': 'mktp:_93JhdA78',
-            '@type': 'aldkg:VerticalLayout',
-            options: {
-              style: {
-                width: '20%',
-              },
-              width: 'all-empty-space',
-            },
-            elements: [
-              /*{
-                    '@id': 'mktp:_92KdFj6',
-                    '@type': 'aldkg:Control',
-                    resultsScope: 'rm:Cards_Coll/identifier',
-                  },*/
-              {
-                '@id': 'mktp:_63JdF67',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/name',
-              },
-              {
-                '@id': 'mktp:_Kjd7F7s8',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/country',
-              },
-              {
-                '@id': 'mktp:_Kf893Jd6',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/brand',
-              },
-              {
-                '@id': 'mktp:_K84jd^',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/price',
-              },
-              {
-                '@id': 'mktp:_dF7jdF6',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/saleValue',
-              },
-              {
-                '@id': 'mktp:_93Kdf7j',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/seller',
-              },
-            ],
-          },
-          {
-            '@id': 'mktp:_87Kdf3Ry7',
-            '@type': 'aldkg:VerticalLayout',
-            options: {
-              style: {
-                width: '20%',
-              },
-              width: 'all-empty-space',
-            },
-            elements: [
-              {
-                '@id': 'mktp:_93Kd8hH',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/categoryPopularity',
-              },
-              {
-                '@id': 'mktp:_j7JG8d',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/commentsCount',
-              },
-              {
-                '@id': 'mktp:_fg78Dfj6',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/starsValue',
-              },
-              {
-                '@id': 'mktp:_924KFhf7',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/questionsCount',
-              },
-            ],
-          },
-          {
-            '@id': 'mktp:_86hDyf9',
-            '@type': 'aldkg:VerticalLayout',
-            options: {
-              style: {
-                width: '20%',
-              },
-              width: 'all-empty-space',
-            },
-            elements: [
-              {
-                '@id': 'mktp:_Kd83457',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/lastMonthSalesAmount',
-              },
-              {
-                '@id': 'mktp:_8385jKd',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/lastMonthSalesValue',
-              },
-              {
-                '@id': 'mktp:_8357KhfEm',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/perMonthSalesAmount',
-              },
-              {
-                '@id': 'mktp:_956jsnH',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/perMonthSalesValue',
-              },
-              {
-                '@id': 'mktp:_834LdjR',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/prevMonthSalesAmount',
-              },
-              {
-                '@id': 'mktp:_935jFhj',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/prevMonthSalesValue',
-              },
-            ],
-          },
-          {
-            '@id': 'mktp:_9348jDf7',
-            '@type': 'aldkg:VerticalLayout',
-            options: {
-              style: {
-                width: '20%',
-              },
-              width: 'all-empty-space',
-            },
-            elements: [
-              {
-                '@id': 'mktp:_912JdmF',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/salesAmountDiff',
-              },
-              {
-                '@id': 'mktp:_935KfH',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/totalSales',
-              },
-              {
-                '@id': 'mktp:_482fDg8',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/totalSalesDiff',
-              },
-              {
-                '@id': 'mktp:_94Fdf72',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/stocks',
-              },
-              {
-                '@id': 'mktp:_68hDf2',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/stocksDiffOrders',
-              },
-              {
-                '@id': 'mktp:_683Jfg72',
-                '@type': 'aldkg:Control',
-                resultsScope: 'rm:Cards_Coll/stocksDiffReturns',
-              },
-              /*{
-                  '@type': 'aldkg:Control',
-                  resultsScope: 'rm:Cards_Coll/rootId',
-                },
-                {
-                  '@type': 'aldkg:Control',
-                  resultsScope: 'rm:Cards_Coll/photosCount',
-                },
-                {
-                  '@type': 'aldkg:Control',
-                  resultsScope: 'rm:Cards_Coll/firstParsedAt',
-                },
-                {
-                  '@type': 'aldkg:Control',
-                  resultsScope: 'rm:Cards_Coll/lastMonthParsedAt',
-                },
-                {
-                  '@type': 'aldkg:Control',
-                  resultsScope: 'rm:Cards_Coll/parsedAt',
-                },
-                {
-                  '@type': 'aldkg:Control',
-                  resultsScope: 'rm:Cards_Coll/prevParsedAt',
-                },*/
-            ],
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const viewDescrs = [
-  {
-    '@id': 'mktp:FormWithColumnsViewDescr',
-    '@type': 'aldkg:ViewDescr',
-    viewKind: 'mktp:FormWithColumnsViewKind',
-    title: 'FormWithColumns',
-    description: 'FormWithColumns',
-    collsConstrs: [],
-    options: {},
-    // child ui elements configs
-    elements: [],
-  },
-];
-
-const additionalColls: CollState[] = [
-  // ViewKinds Collection
-  {
-    constr: viewKindCollConstr,
-    data: viewKinds,
-    opt: {
-      updPeriod: undefined,
-      lastSynced: moment.now(),
-      //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs
-    },
-  },
-  // ViewDescrs Collection
-  {
-    constr: viewDescrCollConstr,
-    data: viewDescrs,
-    opt: {
-      updPeriod: undefined,
-      lastSynced: moment.now(),
-      //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server
-      // for viewDescrs.collConstrs (it loads lazily -- after the first access)
-    },
-  },
-];