fix(react-grid): fix virtual table layout in Edge (#1593)

DevExpress · Nov 8, 2018 · 65fdf63 · 65fdf63
1 parent ceba7de
commit 65fdf63
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/packages/dx-grid-core/src/utils/virtual-table.js b/packages/dx-grid-core/src/utils/virtual-table.js
@@ -134,7 +134,10 @@ export const getCollapsedColumns = (columns, visibleBoundaries, boundaries, getC
 
     if (isVisible) {
       const column = columns[boundary[0]];
-      collapsedColumns.push(column);
+      collapsedColumns.push({
+        ...column,
+        width: getColumnWidth(column, 0),
+      });
     } else {
       collapsedColumns.push({
         key: `${TABLE_STUB_TYPE.toString()}_${boundary[0]}_${boundary[1]}`,

diff --git a/packages/dx-grid-core/src/utils/virtual-table.test.js b/packages/dx-grid-core/src/utils/virtual-table.test.js
@@ -328,6 +328,34 @@ describe('VirtualTableLayout utils', () => {
       expect(getCollapsedColumns(columns, visibleBoundary, boundaries, getColumnWidth))
         .toEqual(result);
     });
+
+    it('should assign width to all columns', () => {
+      const columns = [
+        { key: 0, colWidth: 30 },
+        { key: 1, colWidth: 40 },
+        { key: 2, colWidth: 50 },
+        { key: 3, colWidth: 60 },
+        { key: 4, colWidth: 70 },
+        { key: 5, colWidth: 80 },
+        { key: 6, colWidth: 90 },
+        { key: 7, colWidth: 100 },
+      ];
+      const visibleBoundary = [[2, 5]];
+      const boundaries = [[0, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 7]];
+      const getColumnWidth = column => column.colWidth;
+
+      const result = [
+        { type: TABLE_STUB_TYPE, key: `${TABLE_STUB_TYPE.toString()}_0_1`, width: 70 },
+        { ...columns[2], width: 50 },
+        { ...columns[3], width: 60 },
+        { ...columns[4], width: 70 },
+        { ...columns[5], width: 80 },
+        { type: TABLE_STUB_TYPE, key: `${TABLE_STUB_TYPE.toString()}_6_7`, width: 190 },
+      ];
+
+      expect(getCollapsedColumns(columns, visibleBoundary, boundaries, getColumnWidth))
+        .toEqual(result);
+    });
   });
 
   describe('#getCollapsedCells', () => {

diff --git a/...x-react-grid/src/components/table-layout/__snapshots__/virtual-table-layout.test.jsx.snap b/...x-react-grid/src/components/table-layout/__snapshots__/virtual-table-layout.test.jsx.snap
@@ -25,30 +25,35 @@ exports[`VirtualTableLayout should render correct layout 1`] = `
                 "name": "a",
               },
               "key": "a",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "b",
               },
               "key": "b",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "c",
               },
               "key": "c",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "d",
               },
               "key": "d",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "e",
               },
               "key": "e",
+              "width": 120,
             },
           ]
         }
@@ -171,30 +176,35 @@ exports[`VirtualTableLayout should render correct layout 1`] = `
                 "name": "a",
               },
               "key": "a",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "b",
               },
               "key": "b",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "c",
               },
               "key": "c",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "d",
               },
               "key": "d",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "e",
               },
               "key": "e",
+              "width": 120,
             },
           ]
         }
@@ -1092,30 +1102,35 @@ exports[`VirtualTableLayout should render correct layout 1`] = `
                 "name": "a",
               },
               "key": "a",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "b",
               },
               "key": "b",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "c",
               },
               "key": "c",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "d",
               },
               "key": "d",
+              "width": 120,
             },
             Object {
               "column": Object {
                 "name": "e",
               },
               "key": "e",
+              "width": 120,
             },
           ]
         }