diff --git a/src/Table.jsx b/src/Table.jsx
index 494a71526..bead2255b 100644
--- a/src/Table.jsx
+++ b/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') :
diff --git a/tests/Table.fixedColumns.spec.js b/tests/Table.fixedColumns.spec.js
index a49683346..2d62ffd22 100644
--- a/tests/Table.fixedColumns.spec.js
+++ b/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(
+
+ );
+ 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));
+ }
+
+ // is show.
+ simulateTableShow();
+ wrapper.update();
+ fixedLeftRows.forEach(tr => {
+ expect(tr.style.height).toBe(rowHeight);
+ });
+ fixedRightRows.forEach(tr => {
+ expect(tr.style.height).toBe(rowHeight);
+ });
+
+ // is hidden.
+ simulateTableHidden();
+ wrapper.update();
+ fixedLeftRows.forEach(tr => {
+ expect(tr.style.height).toBe(rowHeight);
+ });
+ fixedRightRows.forEach(tr => {
+ expect(tr.style.height).toBe(rowHeight);
+ });
+ });
});
diff --git a/tests/Table.spec.js b/tests/Table.spec.js
index 9986e2223..5fa17a85f 100644
--- a/tests/Table.spec.js
+++ b/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(
+
+ );
+ 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', () => {