If <Table /> is hidden, don't recalculate rowHeight.

src/Table.jsx

@@ -583,6 +583,12 @@ export default class Table extends React.Component {
   }
 
   syncFixedTableRowHeight = () => {
+    const tableRect = this.tableNode.getBoundingClientRect();
+    // If tableNode's height less than 0, suppose it is hidden and don't recalculate rowHeight.
+    // see: https://github.com/ant-design/ant-design/issues/4836
+    if (tableRect.height !== undefined && tableRect.height <= 0) {
+      return;
+    }
     const { prefixCls } = this.props;
     const headRows = this.refs.headTable ?
             this.refs.headTable.querySelectorAll('thead') :

tests/Table.fixedColumns.spec.js

@@ -60,4 +60,96 @@ describe('Table.fixedColumns', () => {
     expect(tables.at(1).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(false);
     expect(tables.at(2).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(false);
   });
+
+  it('calculate fixedColumns row height', () => {
+    const wrapper = mount(
+      <Table
+        columns={columns}
+        data={data}
+        scroll={{ x: 1200 }}
+      />
+    );
+    const tableNode = wrapper.instance().tableNode;
+    const rows = tableNode.querySelectorAll('tr');
+    const theads = tableNode.querySelectorAll('thead');
+    const fixedLeftRows = tableNode.querySelectorAll('.rc-table-fixed-left tr');
+    const fixedRightRows = tableNode.querySelectorAll('.rc-table-fixed-right tr');
+    const rowHeight = '30px';
+
+    // see:
+    // https://github.com/airbnb/enzyme/issues/49#issuecomment-270250193
+    // https://github.com/tmpvar/jsdom/issues/653
+    function mockClientRect(node, rect) {
+      node.getBoundingClientRect = () => ({
+        ...rect,
+      });
+    }
+    function simulateTableShow() {
+      mockClientRect(tableNode, {
+        top: 0,
+        left: 0,
+        right: 500,
+        bottom: 300,
+        width: 500,
+        height: 300,
+      });
+      theads.forEach(thead => {
+        mockClientRect(thead, {
+          top: 0,
+          left: 0,
+          right: 500,
+          bottom: 30,
+          width: 500,
+          height: 30,
+        });
+      });
+
+      const height = parseInt(rowHeight, 10);
+      let i = 0;
+      rows.forEach(row => {
+        i = (rows.length / 3 === i ? 0 : (i + 1));
+        mockClientRect(row, {
+          top: i * height,
+          left: 0,
+          right: 500,
+          bottom: (i + 1) * height,
+          width: 500,
+          height,
+        });
+      });
+    }
+    function simulateTableHidden() {
+      const rect = {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: 0,
+        height: 0,
+      };
+      mockClientRect(tableNode, rect);
+      mockClientRect(theads, rect);
+      rows.forEach(row => mockClientRect(row, rect));
+    }
+
+    // <Table /> is show.
+    simulateTableShow();
+    wrapper.update();
+    fixedLeftRows.forEach(tr => {
+      expect(tr.style.height).toBe(rowHeight);
+    });
+    fixedRightRows.forEach(tr => {
+      expect(tr.style.height).toBe(rowHeight);
+    });
+
+    // <Table /> is hidden.
+    simulateTableHidden();
+    wrapper.update();
+    fixedLeftRows.forEach(tr => {
+      expect(tr.style.height).toBe(rowHeight);
+    });
+    fixedRightRows.forEach(tr => {
+      expect(tr.style.height).toBe(rowHeight);
+    });
+  });
 });

tests/Table.spec.js

@@ -102,6 +102,80 @@ describe('Table', () => {
       const wrapper = render(createTable({ scroll: { y: 200 } }));
       expect(renderToJson(wrapper)).toMatchSnapshot();
     });
+
+    it('fire scroll event', () => {
+      const newColumns = [
+        { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
+        { title: 'title2', dataIndex: 'b', key: 'b' },
+        { title: 'title3', dataIndex: 'c', key: 'c' },
+        { title: 'title4', dataIndex: 'd', key: 'd', width: 100, fixed: 'right' },
+      ];
+      const newData = [
+        { a: '123', b: 'xxxxxxxx', c: 3, d: 'hehe', key: '1' },
+        { a: 'cdd', b: 'edd12221', c: 3, d: 'haha', key: '2' },
+      ];
+      const wrapper = mount(
+        <Table
+          columns={newColumns}
+          data={newData}
+          scroll={{
+            x: 200,
+            y: 200,
+          }}
+        />
+      );
+      const inst = wrapper.instance();
+      const headTable = wrapper.ref('headTable');
+      const bodyTable = wrapper.ref('bodyTable');
+      const fixedColumnsBodyLeft = wrapper.ref('fixedColumnsBodyLeft');
+      const fixedColumnsBodyRight = wrapper.ref('fixedColumnsBodyRight');
+
+      expect(inst.lastScrollLeft).toBe(undefined);
+
+      // fire headTable scroll.
+      headTable.getNode().scrollTop = 0;
+      headTable.getNode().scrollLeft = 20;
+      headTable.simulate('mouseover');
+      headTable.simulate('scroll');
+      expect(bodyTable.getNode().scrollLeft).toBe(20);
+      expect(fixedColumnsBodyLeft.getNode().scrollTop).toBe(0);
+      expect(fixedColumnsBodyRight.getNode().scrollTop).toBe(0);
+
+      expect(inst.lastScrollLeft).toBe(20);
+
+      // fire bodyTable scroll.
+      bodyTable.getNode().scrollTop = 10;
+      bodyTable.getNode().scrollLeft = 40;
+      bodyTable.simulate('mouseover');
+      bodyTable.simulate('scroll');
+      expect(headTable.getNode().scrollLeft).toBe(40);
+      expect(fixedColumnsBodyLeft.getNode().scrollTop).toBe(10);
+      expect(fixedColumnsBodyRight.getNode().scrollTop).toBe(10);
+
+      expect(inst.lastScrollLeft).toBe(40);
+
+      // fire fixedColumnsBodyLeft scroll.
+      fixedColumnsBodyLeft.getNode().scrollTop = 30;
+      fixedColumnsBodyLeft.simulate('mouseover');
+      fixedColumnsBodyLeft.simulate('scroll');
+      expect(headTable.getNode().scrollLeft).toBe(40);
+      expect(bodyTable.getNode().scrollLeft).toBe(40);
+      expect(bodyTable.getNode().scrollTop).toBe(30);
+      expect(fixedColumnsBodyRight.getNode().scrollTop).toBe(30);
+
+      expect(inst.lastScrollLeft).toBe(0);
+
+      // fire fixedColumnsBodyRight scroll.
+      fixedColumnsBodyRight.getNode().scrollTop = 15;
+      fixedColumnsBodyRight.simulate('mouseover');
+      fixedColumnsBodyRight.simulate('scroll');
+      expect(headTable.getNode().scrollLeft).toBe(40);
+      expect(bodyTable.getNode().scrollLeft).toBe(40);
+      expect(bodyTable.getNode().scrollTop).toBe(15);
+      expect(fixedColumnsBodyLeft.getNode().scrollTop).toBe(15);
+
+      expect(inst.lastScrollLeft).toBe(0);
+    });
   });
 
   describe('row click', () => {