From 44b42a4d2c8207f62c4af62be0cfc668ba66435c Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Thu, 7 Jun 2018 16:12:54 +0300
Subject: [PATCH 1/3] fix(vue-grid): optimize cell rendering

---
 packages/dx-vue-grid/src/plugins/table.js     | 20 +++++-
 .../dx-vue-grid/src/plugins/table.test.js     | 70 ++++++++++++++++---
 2 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/packages/dx-vue-grid/src/plugins/table.js b/packages/dx-vue-grid/src/plugins/table.js
index 972d992b3b..0ca915991f 100644
--- a/packages/dx-vue-grid/src/plugins/table.js
+++ b/packages/dx-vue-grid/src/plugins/table.js
@@ -30,13 +30,27 @@ const RowPlaceholder = {
     );
   },
 };
+
 const CellPlaceholder = {
-  functional: true,
-  render(h, context) {
+  props: {
+    tableColumn: {
+      type: Object,
+      required: true,
+    },
+    tableRow: {
+      type: Object,
+      required: true,
+    },
+    colSpan: {
+      type: Number,
+      required: true,
+    },
+  },
+  render() {
     return (
       <DxTemplatePlaceholder
         name="tableCell"
-        {...context.data}
+        {...{ attrs: { ...this.$props } }}
       />
     );
   },
diff --git a/packages/dx-vue-grid/src/plugins/table.test.js b/packages/dx-vue-grid/src/plugins/table.test.js
index f85773e019..b05542842f 100644
--- a/packages/dx-vue-grid/src/plugins/table.test.js
+++ b/packages/dx-vue-grid/src/plugins/table.test.js
@@ -141,6 +141,48 @@ describe('DxTable', () => {
     });
   });
 
+  describe('Table Layout', () => {
+    it('should pass cell placeholder props to cell component attrs', () => {
+      isDataTableCell.mockImplementation(() => true);
+      const tableCellArgs = {
+        tableRow: { row: 'row', type: 'data' },
+        tableColumn: { column: 'row' },
+        colSpan: 4,
+      };
+
+      const wrapper = mount({
+        render() {
+          return (
+            <DxPluginHost>
+              <PluginDepsToComponents deps={defaultDeps} />
+              <DxTable
+                {...{ attrs: { ...defaultProps } }}
+                layoutComponent={{
+                  props: {
+                    cellComponent: {
+                      type: Object,
+                    },
+                  },
+                  render() {
+                    return (
+                      <this.cellComponent
+                        class="cell-component"
+                        {...{ props: { ...tableCellArgs } }}
+                      />
+                    );
+                  },
+                }}
+              />
+            </DxPluginHost>
+          );
+        },
+      });
+
+      expect(wrapper.find(defaultProps.cellComponent).vm.$attrs)
+        .toMatchObject(tableCellArgs);
+    });
+  });
+
   it('should render row by using rowComponent', () => {
     isDataTableRow.mockImplementation(() => true);
     const tableRowArgs = {
@@ -183,7 +225,7 @@ describe('DxTable', () => {
     const tableCellArgs = {
       tableRow: { row: 'row' },
       tableColumn: { column: { name: 'a' } },
-      style: {},
+      colSpan: 1,
     };
 
     const tree = mount({
@@ -199,7 +241,7 @@ describe('DxTable', () => {
                     type: Object,
                   },
                 },
-                render() { return <this.cellComponent {...{ attrs: { ...tableCellArgs } }} />; },
+                render() { return <this.cellComponent {...{ props: { ...tableCellArgs } }} />; },
               }}
             />
           </DxPluginHost>
@@ -222,7 +264,7 @@ describe('DxTable', () => {
     const tableCellArgs = {
       tableRow: { row: 'row' },
       tableColumn: { column: { name: 'column', dataType: 'column' } },
-      style: {},
+      colSpan: 1,
     };
     const tree = mount({
       render() {
@@ -237,7 +279,7 @@ describe('DxTable', () => {
                     type: Object,
                   },
                 },
-                render() { return <this.cellComponent {...{ attrs: { ...tableCellArgs } }} />; },
+                render() { return <this.cellComponent {...{ props: { ...tableCellArgs } }} />; },
               }}
             />
           </DxPluginHost>
@@ -287,7 +329,11 @@ describe('DxTable', () => {
   });
 
   it('should render stub cell on plugin-defined column and row intersection', () => {
-    const tableCellArgs = { tableRow: { row: 'row' }, tableColumn: { column: 'column' }, style: {} };
+    const tableCellArgs = {
+      tableRow: { row: 'row' },
+      tableColumn: { column: 'column' },
+      colSpan: 1,
+    };
 
     const tree = mount({
       render() {
@@ -302,7 +348,7 @@ describe('DxTable', () => {
                     type: Object,
                   },
                 },
-                render() { return <this.cellComponent {...{ attrs: { ...tableCellArgs } }} />; },
+                render() { return <this.cellComponent {...{ props: { ...tableCellArgs } }} />; },
               }}
             />
           </DxPluginHost>
@@ -316,7 +362,11 @@ describe('DxTable', () => {
 
   it('should render stub header cell on plugin-defined column and row intersection', () => {
     isHeaderStubTableCell.mockImplementation(() => true);
-    const tableCellArgs = { tableRow: { row: 'row' }, tableColumn: { column: 'column' }, style: {} };
+    const tableCellArgs = {
+      tableRow: { row: 'row' },
+      tableColumn: { column: 'column' },
+      colSpan: 1,
+    };
 
     const tree = mount({
       render() {
@@ -331,7 +381,7 @@ describe('DxTable', () => {
                     type: Object,
                   },
                 },
-                render() { return <this.cellComponent {...{ attrs: { ...tableCellArgs } }} />; },
+                render() { return <this.cellComponent {...{ props: { ...tableCellArgs } }} />; },
               }}
             />
           </DxPluginHost>
@@ -349,7 +399,7 @@ describe('DxTable', () => {
     isNoDataTableRow.mockImplementation(() => true);
     isNoDataTableCell.mockImplementation(() => true);
     const tableCellArgs = {
-      tableRow: { row: 'row' }, tableColumn: { column: 'column' }, style: {}, colSpan: 4,
+      tableRow: { row: 'row' }, tableColumn: { column: 'column' }, colSpan: 4,
     };
 
     const tree = mount({
@@ -366,7 +416,7 @@ describe('DxTable', () => {
                     type: Object,
                   },
                 },
-                render() { return <this.cellComponent {...{ attrs: { ...tableCellArgs } }} />; },
+                render() { return <this.cellComponent {...{ props: { ...tableCellArgs } }} />; },
               }}
             />
           </DxPluginHost>

From 2cc5bdfe9127b831ed06bee98f26ab4f8086440f Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Thu, 14 Jun 2018 09:35:40 +0300
Subject: [PATCH 2/3] Change the RowPlaceholder

---
 packages/dx-vue-grid/src/plugins/table.js     | 45 ++++++++++++-------
 .../dx-vue-grid/src/plugins/table.test.js     |  6 +--
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/dx-vue-grid/src/plugins/table.js b/packages/dx-vue-grid/src/plugins/table.js
index 0ca915991f..08112ace6b 100644
--- a/packages/dx-vue-grid/src/plugins/table.js
+++ b/packages/dx-vue-grid/src/plugins/table.js
@@ -18,14 +18,22 @@ import {
 } from '@devexpress/dx-grid-core';
 
 const RowPlaceholder = {
-  functional: true,
-  render(h, context) {
+  props: {
+    tableRow: {
+      type: Object,
+      required: true,
+    },
+    height: {
+      type: [Number, String],
+    },
+  },
+  render() {
     return (
       <DxTemplatePlaceholder
         name="tableRow"
-        {...context.data}
+        {...{ attrs: { ...this.$props } }}
       >
-        {context.children}
+        {this.$slots.default}
       </DxTemplatePlaceholder>
     );
   },
@@ -45,6 +53,9 @@ const CellPlaceholder = {
       type: Number,
       required: true,
     },
+    rowSpan: {
+      type: Number,
+    },
   },
   render() {
     return (
@@ -167,19 +178,19 @@ export const DxTable = {
                 getTableCellColSpan,
               },
             }) => (
-              <Layout
-                tableComponent={tableComponent}
-                headComponent={headComponent}
-                bodyComponent={bodyComponent}
-                containerComponent={containerComponent}
-                headerRows={headerRows}
-                bodyRows={bodyRows}
-                columns={columns}
-                rowComponent={RowPlaceholder}
-                cellComponent={CellPlaceholder}
-                getCellColSpan={getTableCellColSpan}
-              />
-            )}
+                <Layout
+                  tableComponent={tableComponent}
+                  headComponent={headComponent}
+                  bodyComponent={bodyComponent}
+                  containerComponent={containerComponent}
+                  headerRows={headerRows}
+                  bodyRows={bodyRows}
+                  columns={columns}
+                  rowComponent={RowPlaceholder}
+                  cellComponent={CellPlaceholder}
+                  getCellColSpan={getTableCellColSpan}
+                />
+              )}
           </DxTemplateConnector>
         </DxTemplate>
         <DxTemplate name="tableCell">
diff --git a/packages/dx-vue-grid/src/plugins/table.test.js b/packages/dx-vue-grid/src/plugins/table.test.js
index b05542842f..66889f0f56 100644
--- a/packages/dx-vue-grid/src/plugins/table.test.js
+++ b/packages/dx-vue-grid/src/plugins/table.test.js
@@ -148,6 +148,7 @@ describe('DxTable', () => {
         tableRow: { row: 'row', type: 'data' },
         tableColumn: { column: 'row' },
         colSpan: 4,
+        rowSpan: 2,
       };
 
       const wrapper = mount({
@@ -187,8 +188,7 @@ describe('DxTable', () => {
     isDataTableRow.mockImplementation(() => true);
     const tableRowArgs = {
       tableRow: { row: 'row', type: 'data' },
-      style: {},
-      children: null,
+      height: 40,
     };
 
     const tree = mount({
@@ -436,8 +436,6 @@ describe('DxTable', () => {
     isNoDataTableRow.mockImplementation(() => true);
     const tableRowArgs = {
       tableRow: { row: 'row', type: 'nodata' },
-      style: {},
-      children: null,
     };
 
     const tree = mount({

From 374d71408131d729f94677e6601dd3c8bc78acb5 Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Thu, 14 Jun 2018 09:37:47 +0300
Subject: [PATCH 3/3] Remove an excess indent

---
 packages/dx-vue-grid/src/plugins/table.js | 26 +++++++++++------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/dx-vue-grid/src/plugins/table.js b/packages/dx-vue-grid/src/plugins/table.js
index 08112ace6b..83f0ac4b12 100644
--- a/packages/dx-vue-grid/src/plugins/table.js
+++ b/packages/dx-vue-grid/src/plugins/table.js
@@ -178,19 +178,19 @@ export const DxTable = {
                 getTableCellColSpan,
               },
             }) => (
-                <Layout
-                  tableComponent={tableComponent}
-                  headComponent={headComponent}
-                  bodyComponent={bodyComponent}
-                  containerComponent={containerComponent}
-                  headerRows={headerRows}
-                  bodyRows={bodyRows}
-                  columns={columns}
-                  rowComponent={RowPlaceholder}
-                  cellComponent={CellPlaceholder}
-                  getCellColSpan={getTableCellColSpan}
-                />
-              )}
+              <Layout
+                tableComponent={tableComponent}
+                headComponent={headComponent}
+                bodyComponent={bodyComponent}
+                containerComponent={containerComponent}
+                headerRows={headerRows}
+                bodyRows={bodyRows}
+                columns={columns}
+                rowComponent={RowPlaceholder}
+                cellComponent={CellPlaceholder}
+                getCellColSpan={getTableCellColSpan}
+              />
+            )}
           </DxTemplateConnector>
         </DxTemplate>
         <DxTemplate name="tableCell">