feat: sync fixed header width

react-component · Aug 3, 2018 · 112346c · 112346c
1 parent 7e1ada1
commit 112346c
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 28 deletions.
diff --git a/examples/fixedColumnsAndHeader.js b/examples/fixedColumnsAndHeader.js
@@ -5,18 +5,24 @@ import Table from 'rc-table';
 import 'rc-table/assets/index.less';
 
 const columns = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
-  { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left' },
-  { title: 'title3', dataIndex: 'c', key: 'c', width: 150 },
-  { title: 'title4', dataIndex: 'c', key: 'd', width: 150 },
-  { title: 'title5', dataIndex: 'c', key: 'e', width: 150 },
-  { title: 'title6', dataIndex: 'c', key: 'f', width: 150 },
-  { title: 'title7', dataIndex: 'c', key: 'g', width: 150 },
-  { title: 'title8', dataIndex: 'c', key: 'h', width: 150 },
-  { title: 'title9', dataIndex: 'b', key: 'i', width: 150 },
-  { title: 'title10', dataIndex: 'b', key: 'j', width: 150 },
-  { title: 'title11', dataIndex: 'b', key: 'k', width: 150 },
-  { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
+  { title: 'title1', dataIndex: 'a', key: 'a', fixed: 'left' },
+  { title: 'title2', dataIndex: 'b', key: 'b', fixed: 'left' },
+  {
+    title: 'titleA',
+    key: 'cd',
+    children: [
+      { title: 'title3', dataIndex: 'c', key: 'c' },
+      { title: 'title4', dataIndex: 'c', key: 'd' },
+    ],
+  },
+  { title: 'title5', dataIndex: 'c', key: 'e' },
+  { title: 'title6', dataIndex: 'c', key: 'f' },
+  { title: 'title7', dataIndex: 'c', key: 'g' },
+  { title: 'title8', dataIndex: 'c', key: 'h' },
+  { title: 'title9', dataIndex: 'b', key: 'i' },
+  { title: 'title10', dataIndex: 'b', key: 'j' },
+  { title: 'title11', dataIndex: 'b', key: 'k' },
+  { title: 'title12', dataIndex: 'b', key: 'l', fixed: 'right' },
 ];
 
 const data = [

diff --git a/src/ColGroup.js b/src/ColGroup.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'mini-store';
 
-export default function ColGroup(props, { table }) {
+function ColGroup(props, { table }) {
   const { prefixCls, expandIconAsCell } = table.props;
-  const { fixed } = props;
+  const { fixed, firstRowCellsWidth } = props;
 
   let cols = [];
 
@@ -21,8 +22,9 @@ export default function ColGroup(props, { table }) {
     leafColumns = table.columnManager.leafColumns();
   }
   cols = cols.concat(
-    leafColumns.map(c => {
-      return <col key={c.key || c.dataIndex} style={{ width: c.width, minWidth: c.width }} />;
+    leafColumns.map((c, index) => {
+      const width = c.width || firstRowCellsWidth[index + cols.length];
+      return <col key={c.key || c.dataIndex} style={{ width, minWidth: width }} />;
     }),
   );
 
@@ -31,8 +33,13 @@ export default function ColGroup(props, { table }) {
 
 ColGroup.propTypes = {
   fixed: PropTypes.string,
+  firstRowCellsWidth: PropTypes.array,
 };
 
 ColGroup.contextTypes = {
   table: PropTypes.any,
 };
+
+export default connect(({ firstRowCellsWidth }) => ({
+  firstRowCellsWidth,
+}))(ColGroup);
diff --git a/src/Table.js b/src/Table.js
@@ -99,6 +99,7 @@ class Table extends React.Component {
       currentHoverKey: null,
       fixedColumnsHeadRowsHeight: [],
       fixedColumnsBodyRowsHeight: {},
+      firstRowCellsWidth: [],
     });
 
     this.setScrollPosition('left');
@@ -150,19 +151,23 @@ class Table extends React.Component {
   }
 
   componentDidMount() {
-    if (this.columnManager.isAnyColumnsFixed()) {
-      this.handleWindowResize();
-      this.resizeEvent = addEventListener(window, 'resize', this.debouncedWindowResize);
+    this.handleWindowResize();
+    this.resizeEvent = addEventListener(window, 'resize', this.debouncedWindowResize);
+
+    if (this.props.scroll.y) {
+      this.syncFixedHeaderWidth();
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.columnManager.isAnyColumnsFixed()) {
-      this.handleWindowResize();
-      if (!this.resizeEvent) {
-        this.resizeEvent = addEventListener(window, 'resize', this.debouncedWindowResize);
-      }
+  getSnapshotBeforeUpdate() {
+    if (this.props.scroll.y) {
+      this.syncFixedHeaderWidth();
     }
+    return null;
+  }
+
+  componentDidUpdate(prevProps) {
+    this.handleWindowResize(false);
     // when table changes to empty, reset scrollLeft
     if (prevProps.data.length > 0 && this.props.data.length === 0 && this.hasScrollX()) {
       this.resetScrollX();
@@ -223,9 +228,14 @@ class Table extends React.Component {
     }
   }
 
-  handleWindowResize = () => {
-    this.syncFixedTableRowHeight();
-    this.setScrollPositionClassName();
+  handleWindowResize = (syncHeaderWidth = true) => {
+    if (this.columnManager.isAnyColumnsFixed()) {
+      this.syncFixedTableRowHeight();
+      this.setScrollPositionClassName();
+    }
+    if (this.props.scroll.y && syncHeaderWidth) {
+      this.syncFixedHeaderWidth();
+    }
   };
 
   syncFixedTableRowHeight = () => {
@@ -256,6 +266,7 @@ class Table extends React.Component {
       },
       {},
     );
+
     if (
       shallowequal(state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
       shallowequal(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)
@@ -269,6 +280,22 @@ class Table extends React.Component {
     });
   };
 
+  syncFixedHeaderWidth() {
+    const { prefixCls } = this.props;
+    const firstRowCells = this.bodyTable.querySelectorAll(`.${prefixCls}-row:first-child td`) || [];
+    const state = this.store.getState();
+    const firstRowCellsWidth = [].map.call(
+      firstRowCells,
+      cell => cell.getBoundingClientRect().width,
+    );
+    if (shallowequal(state.firstRowCellsWidth, firstRowCellsWidth)) {
+      return;
+    }
+    this.store.setState({
+      firstRowCellsWidth,
+    });
+  }
+
   resetScrollX() {
     if (this.headTable) {
       this.headTable.scrollLeft = 0;