react-base-table - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # CHANGELOG
 
+## v1.1.0 (2019-04-26)
+
+- chore: stop using `Grid` for table's header
+- chore: add `role` to table's elements
+- chore: stop using `forceUpdate` to update the table
+- fix: table's header is re-rendered unnecessarily on row hovered
+
+## v1.0.2 (2019-04-03)
+
 - fix: `onScroll` is called redundantly if there are frozen columns
@@ -7,0 +16,0 @@

es/BaseTable.js

@@ -20,3 +20,3 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import GridTable from './GridTable';
-import TableHeader from './TableHeader';
+import TableHeaderRow from './TableHeaderRow';
 import TableRow from './TableRow';
@@ -43,3 +43,3 @@ import TableHeaderCell from './TableHeaderCell';
 
-var DEFUALT_COMPONENTS = {
+var DEFAULT_COMPONENTS = {
   TableCell: TableCell,
@@ -75,2 +75,3 @@ TableHeaderCell: TableHeaderCell,
       resizingKey: null,
+      resizingWidth: 0,
       expandedRowKeys: cloneArray(props.expandedRowKeys !== undefined ? expandedRowKeys : defaultExpandedRowKeys)
@@ -101,3 +102,3 @@ };
     _this._scrollHeight = 0;
-    _this._lastScanedRowIndex = -1;
+    _this._lastScannedRowIndex = -1;
     _this._hasDataChangedSinceEndReached = true;
@@ -163,4 +164,4 @@ _this._data = props.data;
     this.table && this.table.scrollToPosition(offset);
-    this.leftTable && this.leftTable.scollToTop(offset.scrollTop);
-    this.rightTable && this.rightTable.scollToTop(offset.scrollTop);
+    this.leftTable && this.leftTable.scrollToTop(offset.scrollTop);
+    this.rightTable && this.rightTable.scrollToTop(offset.scrollTop);
   }
@@ -177,4 +178,4 @@ /**
     this.table && this.table.scrollToPosition(this._scroll);
-    this.leftTable && this.leftTable.scollToTop(scrollTop);
-    this.rightTable && this.rightTable.scollToTop(scrollTop);
+    this.leftTable && this.leftTable.scrollToTop(scrollTop);
+    this.rightTable && this.rightTable.scrollToTop(scrollTop);
   }
@@ -284,2 +285,3 @@ /**
     var rowProps = _objectSpread({}, extraProps, {
+      role: 'row',
       key: "row-" + rowKey,
@@ -376,2 +378,3 @@ isScrolling: isScrolling,
     return React.createElement(Tag, _extends({
+      role: "gridcell",
       key: "row-" + rowData[this.props.rowKey] + "-cell-" + column.key
@@ -387,4 +390,3 @@ }, rest, {
 
-    var isScrolling = _ref5.isScrolling,
-        columns = _ref5.columns,
+    var columns = _ref5.columns,
         headerIndex = _ref5.headerIndex,
@@ -406,4 +408,4 @@ style = _ref5.style;
     var headerProps = _objectSpread({}, extraProps, {
+      role: 'row',
       key: "header-" + headerIndex,
-      isScrolling: isScrolling,
       className: className,
@@ -419,3 +421,3 @@ style: style,
 
-    return React.createElement(TableHeader, headerProps);
+    return React.createElement(TableHeaderRow, headerProps);
   };
@@ -426,4 +428,3 @@
 
-    var isScrolling = _ref6.isScrolling,
-        columns = _ref6.columns,
+    var columns = _ref6.columns,
         column = _ref6.column,
@@ -453,3 +454,2 @@ columnIndex = _ref6.columnIndex,
     var cellProps = {
-      isScrolling: isScrolling,
       columns: columns,
@@ -486,2 +486,3 @@ column: column,
     return React.createElement(Tag, _extends({
+      role: "gridcell",
       key: "header-" + headerIndex + "-cell-" + column.key,
@@ -513,3 +514,7 @@ onClick: column.sortable ? this._handleColumnSort : null
 
-    var scrollbarWidth = this.state.scrollbarWidth;
+    var _this$state = this.state,
+        scrollbarWidth = _this$state.scrollbarWidth,
+        hoveredRowKey = _this$state.hoveredRowKey,
+        resizingKey = _this$state.resizingKey,
+        resizingWidth = _this$state.resizingWidth;
 
@@ -543,2 +548,5 @@ var _this$_getTableSize = this._getTableSize(),
       rowRenderer: this.renderRow,
+      hoveredRowKey: hoveredRowKey,
+      resizingKey: resizingKey,
+      resizingWidth: resizingWidth,
       onScroll: this._handleScroll,
@@ -558,3 +566,7 @@ onRowsRendered: this._handleRowsRendered,
 
-    var scrollbarWidth = this.state.scrollbarWidth;
+    var _this$state2 = this.state,
+        scrollbarWidth = _this$state2.scrollbarWidth,
+        hoveredRowKey = _this$state2.hoveredRowKey,
+        resizingKey = _this$state2.resizingKey,
+        resizingWidth = _this$state2.resizingWidth;
 
@@ -584,2 +596,5 @@ var _this$_getTableSize2 = this._getTableSize(),
       rowRenderer: this.renderRow,
+      hoveredRowKey: hoveredRowKey,
+      resizingKey: resizingKey,
+      resizingWidth: resizingWidth,
       onScroll: this._handleVerticalScroll,
@@ -599,3 +614,7 @@ onRowsRendered: noop,
 
-    var scrollbarWidth = this.state.scrollbarWidth;
+    var _this$state3 = this.state,
+        scrollbarWidth = _this$state3.scrollbarWidth,
+        hoveredRowKey = _this$state3.hoveredRowKey,
+        resizingKey = _this$state3.resizingKey,
+        resizingWidth = _this$state3.resizingWidth;
 
@@ -624,2 +643,5 @@ var _this$_getTableSize3 = this._getTableSize(),
       rowRenderer: this.renderRow,
+      hoveredRowKey: hoveredRowKey,
+      resizingKey: resizingKey,
+      resizingWidth: resizingWidth,
       onScroll: this._handleVerticalScroll,
@@ -632,5 +654,5 @@ onRowsRendered: noop,
   _proto.renderResizingLine = function renderResizingLine() {
-    var _this$state = this.state,
-        resizingKey = _this$state.resizingKey,
-        scrollbarWidth = _this$state.scrollbarWidth;
+    var _this$state4 = this.state,
+        resizingKey = _this$state4.resizingKey,
+        scrollbarWidth = _this$state4.scrollbarWidth;
     if (!this.props.fixed || !resizingKey) return null;
@@ -718,3 +740,3 @@ var columns = this.columnManager.getMainColumns();
         footerHeight = _this$props10.footerHeight;
-    var cls = cn(classPrefix, className, (_cn6 = {}, _cn6[classPrefix + "--fixed"] = fixed, _cn6[classPrefix + "--expanable"] = !!expandColumnKey, _cn6[classPrefix + "--empty"] = data.length === 0, _cn6[classPrefix + "--has-frozen-rows"] = frozenData.length > 0, _cn6[classPrefix + "--has-frozen-columns"] = this.columnManager.hasFrozenColumns(), _cn6[classPrefix + "--disabled"] = disabled, _cn6));
+    var cls = cn(classPrefix, className, (_cn6 = {}, _cn6[classPrefix + "--fixed"] = fixed, _cn6[classPrefix + "--expandable"] = !!expandColumnKey, _cn6[classPrefix + "--empty"] = data.length === 0, _cn6[classPrefix + "--has-frozen-rows"] = frozenData.length > 0, _cn6[classPrefix + "--has-frozen-columns"] = this.columnManager.hasFrozenColumns(), _cn6[classPrefix + "--disabled"] = disabled, _cn6));
 
@@ -765,3 +787,3 @@ if (expandColumnKey) {
     if (nextProps.data !== this.props.data) {
-      this._lastScanedRowIndex = -1;
+      this._lastScannedRowIndex = -1;
       this._hasDataChangedSinceEndReached = true;
@@ -808,3 +830,3 @@ }
     if (this.props.components && this.props.components[name]) return this.props.components[name];
-    return DEFUALT_COMPONENTS[name];
+    return DEFAULT_COMPONENTS[name];
   };
@@ -906,3 +928,3 @@
 
-    if (this._lastScanedRowIndex >= 0 && distanceFromEnd <= onEndReachedThreshold && (this._hasDataChangedSinceEndReached || scrollHeight !== this._scrollHeight)) {
+    if (this._lastScannedRowIndex >= 0 && distanceFromEnd <= onEndReachedThreshold && (this._hasDataChangedSinceEndReached || scrollHeight !== this._scrollHeight)) {
       this._hasDataChangedSinceEndReached = false;
@@ -948,4 +970,4 @@ this._scrollHeight = scrollHeight;
 
-    if (args.overscanStopIndex > this._lastScanedRowIndex) {
-      this._lastScanedRowIndex = args.overscanStopIndex;
+    if (args.overscanStopIndex > this._lastScannedRowIndex) {
+      this._lastScannedRowIndex = args.overscanStopIndex;
 
@@ -962,3 +984,2 @@ this._maybeCallOnEndReached();
     });
-    this.forceUpdateTable();
   };
@@ -1002,3 +1023,5 @@
     this.columnManager.setColumnWidth(key, width);
-    this.forceUpdate();
+    this.setState({
+      resizingWidth: width
+    });
     var column = this.columnManager.getColumn(key);
@@ -1022,3 +1045,2 @@ this.props.onColumnResize({
     });
-    this.forceUpdateTable(); // forceUpdate or the resize handler will stay there until re-render
   };
@@ -1171,3 +1193,3 @@
    * Custom header renderer
-   * The renderer receives props `{ isScrolling, cells, columns, headerIndex }`
+   * The renderer receives props `{ cells, columns, headerIndex }`
    */
@@ -1230,3 +1252,3 @@ headerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   /**
-   * Default expanded row keys when initalize the table
+   * Default expanded row keys when initialize the table
    */
@@ -1233,0 +1255,0 @@ defaultExpandedRowKeys: PropTypes.arrayOf(PropTypes.string),

es/Column.js

@@ -107,3 +107,3 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
   /**
-   * Whether the colum is resizable, defaults to true
+   * Whether the column is resizable, defaults to true
    */
@@ -113,3 +113,3 @@ resizable: PropTypes.bool,
   /**
-   * Whether the colum is sortable, defaults to true
+   * Whether the column is sortable, defaults to true
    */
@@ -120,3 +120,3 @@ sortable: PropTypes.bool,
    * Custom column cell renderer
-   * The renderer receives props `{ isScrolling, cellData, columns, column, columnIndex, rowData, rowIndex, container }`
+   * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }`
    */
@@ -127,3 +127,3 @@ cellRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
    * Custom column header renderer
-   * The renderer receives props `{ isScrolling, columns, column, columnIndex, headerIndex, container }`
+   * The renderer receives props `{ columns, column, columnIndex, headerIndex, container }`
    */
@@ -130,0 +130,0 @@ headerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element])

es/GridTable.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
@@ -7,4 +9,2 @@
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -18,4 +18,4 @@
 import Grid from 'react-virtualized/dist/commonjs/Grid';
+import Header from './TableHeader';
 import cellRangeRenderer from './cellRangeRenderer';
-import { isObjectEqual } from './utils';
 /**
@@ -36,5 +36,3 @@ * A wrapper of the Grid for internal only
     _this._setBodyRef = _this._setBodyRef.bind(_assertThisInitialized(_this));
-    _this._headerRowHeight = _this._headerRowHeight.bind(_assertThisInitialized(_this));
     _this._handleSectionRendered = _this._handleSectionRendered.bind(_assertThisInitialized(_this));
-    _this.renderHeaderRow = _this.renderHeaderRow.bind(_assertThisInitialized(_this));
     _this.renderRow = _this.renderRow.bind(_assertThisInitialized(_this));
@@ -53,9 +51,7 @@ _this.renderCellRange = _this.renderCellRange.bind(_assertThisInitialized(_this));
   _proto.scrollToPosition = function scrollToPosition(args) {
-    this.headerRef && this.headerRef.scrollToPosition({
-      scrollLeft: args.scrollLeft
-    });
+    this.headerRef && this.headerRef.scrollTo(args.scrollLeft);
     this.bodyRef && this.bodyRef.scrollToPosition(args);
   };
 
-  _proto.scollToTop = function scollToTop(scrollTop) {
+  _proto.scrollToTop = function scrollToTop(scrollTop) {
     this.bodyRef && this.bodyRef.scrollToPosition({
@@ -67,5 +63,3 @@ scrollTop: scrollTop
   _proto.scrollToLeft = function scrollToLeft(scrollLeft) {
-    this.headerRef && this.headerRef.scrollToPosition({
-      scrollLeft: scrollLeft
-    });
+    this.headerRef && this.headerRef.scrollTo(scrollLeft);
     this.bodyRef && this.bodyRef.scrollToPosition({
@@ -87,37 +81,7 @@ scrollLeft: scrollLeft
 
-  _proto.renderHeaderRow = function renderHeaderRow(_ref) {
-    var index = _ref.rowIndex,
-        args = _objectWithoutPropertiesLoose(_ref, ["rowIndex"]);
-
+  _proto.renderRow = function renderRow(args) {
     var _this$props = this.props,
+        data = _this$props.data,
         columns = _this$props.columns,
-        frozenData = _this$props.frozenData,
-        headerRenderer = _this$props.headerRenderer,
         rowRenderer = _this$props.rowRenderer;
-
-    var headerCount = this._getHeaderCount();
-
-    if (index < headerCount) {
-      if (args.style.height === 0) return null;
-      return headerRenderer(_objectSpread({}, args, {
-        columns: columns,
-        headerIndex: index
-      }));
-    }
-
-    var rowData = frozenData[index - headerCount]; // for frozen row the `rowIndex` is negative
-
-    var rowIndex = headerCount - index - 1;
-    return rowRenderer(_objectSpread({}, args, {
-      columns: columns,
-      rowData: rowData,
-      rowIndex: rowIndex
-    }));
-  };
-
-  _proto.renderRow = function renderRow(args) {
-    var _this$props2 = this.props,
-        data = _this$props2.data,
-        columns = _this$props2.columns,
-        rowRenderer = _this$props2.rowRenderer;
     var rowData = data[args.rowIndex];
@@ -140,20 +104,19 @@ return rowRenderer(_objectSpread({}, args, {
   _proto.render = function render() {
-    var _this$props3 = this.props,
-        containerStyle = _this$props3.containerStyle,
-        classPrefix = _this$props3.classPrefix,
-        className = _this$props3.className,
-        data = _this$props3.data,
-        frozenData = _this$props3.frozenData,
-        width = _this$props3.width,
-        height = _this$props3.height,
-        rowHeight = _this$props3.rowHeight,
-        headerWidth = _this$props3.headerWidth,
-        bodyWidth = _this$props3.bodyWidth,
-        useIsScrolling = _this$props3.useIsScrolling,
-        onScroll = _this$props3.onScroll,
-        onScrollbarPresenceChange = _this$props3.onScrollbarPresenceChange,
-        rest = _objectWithoutPropertiesLoose(_this$props3, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "onScrollbarPresenceChange"]);
+    var _this$props2 = this.props,
+        containerStyle = _this$props2.containerStyle,
+        classPrefix = _this$props2.classPrefix,
+        className = _this$props2.className,
+        data = _this$props2.data,
+        frozenData = _this$props2.frozenData,
+        width = _this$props2.width,
+        height = _this$props2.height,
+        rowHeight = _this$props2.rowHeight,
+        headerWidth = _this$props2.headerWidth,
+        bodyWidth = _this$props2.bodyWidth,
+        useIsScrolling = _this$props2.useIsScrolling,
+        onScroll = _this$props2.onScroll,
+        onScrollbarPresenceChange = _this$props2.onScrollbarPresenceChange,
+        hoveredRowKey = _this$props2.hoveredRowKey,
+        rest = _objectWithoutPropertiesLoose(_this$props2, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "onScrollbarPresenceChange", "hoveredRowKey"]);
 
-    var headerCount = this._getHeaderCount();
-
     var headerHeight = this._getHeaderHeight();
@@ -168,2 +131,3 @@
     return React.createElement("div", _extends({
+      role: "table",
       className: cls
@@ -184,2 +148,3 @@ }, containerProps), React.createElement(Grid, _extends({}, rest, {
       cellRangeRenderer: this.renderCellRange,
+      hoveredRowKey: hoveredRowKey,
       onScroll: onScroll,
@@ -190,3 +155,3 @@ onSectionRendered: this._handleSectionRendered,
     // to prevent header's shadow being covered by body
-    React.createElement(Grid, _extends({}, rest, {
+    React.createElement(Header, _extends({}, rest, {
       className: classPrefix + "__header",
@@ -198,19 +163,10 @@ ref: this._setHeaderRef,
       height: Math.min(headerHeight + frozenRowsHeight, height),
-      rowHeight: this._headerRowHeight,
-      rowCount: headerCount + frozenRowCount,
-      columnWidth: headerWidth,
-      columnCount: 1,
-      isScrollingOptOut: !useIsScrolling,
-      cellRenderer: this.renderHeaderRow,
-      cellRangeRenderer: this.renderCellRange
+      rowWidth: headerWidth,
+      rowHeight: rowHeight,
+      headerHeight: this.props.headerHeight,
+      headerRenderer: this.props.headerRenderer,
+      rowRenderer: this.props.rowRenderer
     })));
   };
 
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    if (!isObjectEqual(this.props.headerHeight, prevProps.headerHeight) || // if there are frozen rows
-    this.props.rowHeight !== prevProps.rowHeight) {
-      this.headerRef && this.headerRef.recomputeGridSize();
-    }
-  };
-
   _proto._setHeaderRef = function _setHeaderRef(ref) {
@@ -224,7 +180,2 @@ this.headerRef = ref;
 
-  _proto._getHeaderCount = function _getHeaderCount() {
-    var headerHeight = this.props.headerHeight;
-    return Array.isArray(headerHeight) ? headerHeight.length : 1;
-  };
-
   _proto._getHeaderHeight = function _getHeaderHeight() {
@@ -242,20 +193,7 @@ var headerHeight = this.props.headerHeight;
 
-  _proto._headerRowHeight = function _headerRowHeight(_ref2) {
-    var index = _ref2.index;
-    var _this$props4 = this.props,
-        headerHeight = _this$props4.headerHeight,
-        rowHeight = _this$props4.rowHeight;
-
-    if (Array.isArray(headerHeight)) {
-      return index < headerHeight.length ? headerHeight[index] : rowHeight;
-    } else {
-      return index === 0 ? headerHeight : rowHeight;
-    }
-  };
-
-  _proto._handleSectionRendered = function _handleSectionRendered(_ref3) {
-    var rowOverscanStartIndex = _ref3.rowOverscanStartIndex,
-        rowOverscanStopIndex = _ref3.rowOverscanStopIndex,
-        rowStartIndex = _ref3.rowStartIndex,
-        rowStopIndex = _ref3.rowStopIndex;
+  _proto._handleSectionRendered = function _handleSectionRendered(_ref) {
+    var rowOverscanStartIndex = _ref.rowOverscanStartIndex,
+        rowOverscanStopIndex = _ref.rowOverscanStopIndex,
+        rowStartIndex = _ref.rowStartIndex,
+        rowStopIndex = _ref.rowStopIndex;
     var onRowsRendered = this.props.onRowsRendered;
@@ -287,4 +225,3 @@ onRowsRendered({
   useIsScrolling: PropTypes.bool,
-  setHeaderRef: PropTypes.func,
-  setBodyRef: PropTypes.func,
+  hoveredRowKey: PropTypes.string,
   onScroll: PropTypes.func,
@@ -291,0 +228,0 @@ onRowsRendered: PropTypes.func,

es/TableHeader.js

@@ -1,67 +0,116 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { renderElement } from './utils';
-/**
- * Header component for BaseTable
- */
 
-var TableHeader = function TableHeader(_ref) {
-  var isScrolling = _ref.isScrolling,
-      className = _ref.className,
-      style = _ref.style,
-      columns = _ref.columns,
-      headerIndex = _ref.headerIndex,
-      cellRenderer = _ref.cellRenderer,
-      headerRenderer = _ref.headerRenderer,
-      expandColumnKey = _ref.expandColumnKey,
-      ExpandIcon = _ref.expandIcon,
-      Tag = _ref.tagName,
-      rest = _objectWithoutPropertiesLoose(_ref, ["isScrolling", "className", "style", "columns", "headerIndex", "cellRenderer", "headerRenderer", "expandColumnKey", "expandIcon", "tagName"]);
+var TableHeader =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  _inheritsLoose(TableHeader, _React$PureComponent);
 
-  var cells = columns.map(function (column, columnIndex) {
-    return cellRenderer({
-      isScrolling: isScrolling,
+  function TableHeader(props) {
+    var _this;
+
+    _this = _React$PureComponent.call(this, props) || this;
+    _this.renderHeaderRow = _this.renderHeaderRow.bind(_assertThisInitialized(_this));
+    _this.renderFrozenRow = _this.renderFrozenRow.bind(_assertThisInitialized(_this));
+    _this._setRef = _this._setRef.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  var _proto = TableHeader.prototype;
+
+  _proto.scrollTo = function scrollTo(offset) {
+    if (this.headerRef) this.headerRef.scrollLeft = offset;
+  };
+
+  _proto.renderHeaderRow = function renderHeaderRow(height, index) {
+    var _this$props = this.props,
+        columns = _this$props.columns,
+        headerRenderer = _this$props.headerRenderer;
+    if (height <= 0) return null;
+    var style = {
+      width: '100%',
+      height: height
+    };
+    return headerRenderer({
+      style: style,
       columns: columns,
-      column: column,
-      columnIndex: columnIndex,
-      headerIndex: headerIndex,
-      expandIcon: column.key === expandColumnKey && React.createElement(ExpandIcon, null)
+      headerIndex: index
     });
-  });
+  };
 
-  if (headerRenderer) {
-    cells = renderElement(headerRenderer, {
-      isScrolling: isScrolling,
-      cells: cells,
+  _proto.renderFrozenRow = function renderFrozenRow(rowData, index) {
+    var _this$props2 = this.props,
+        columns = _this$props2.columns,
+        rowHeight = _this$props2.rowHeight,
+        rowRenderer = _this$props2.rowRenderer;
+    var style = {
+      width: '100%',
+      height: rowHeight
+    }; // for frozen row the `rowIndex` is negative
+
+    var rowIndex = -index - 1;
+    return rowRenderer({
+      style: style,
       columns: columns,
-      headerIndex: headerIndex
+      rowData: rowData,
+      rowIndex: rowIndex
     });
-  }
+  };
 
-  return React.createElement(Tag, _extends({}, rest, {
-    className: className,
-    style: style
-  }), cells);
-};
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        className = _this$props3.className,
+        width = _this$props3.width,
+        height = _this$props3.height,
+        rowWidth = _this$props3.rowWidth,
+        headerHeight = _this$props3.headerHeight,
+        frozenData = _this$props3.frozenData;
+    if (height <= 0) return null;
+    var style = {
+      width: width,
+      height: height,
+      position: 'relative',
+      overflow: 'hidden'
+    };
+    var innerStyle = {
+      width: rowWidth,
+      height: height
+    };
+    var rowHeights = Array.isArray(headerHeight) ? headerHeight : [headerHeight];
+    return React.createElement("div", {
+      role: "grid",
+      ref: this._setRef,
+      className: className,
+      style: style
+    }, React.createElement("div", {
+      role: "rowgroup",
+      style: innerStyle
+    }, rowHeights.map(this.renderHeaderRow), frozenData.map(this.renderFrozenRow)));
+  };
 
-TableHeader.defaultProps = {
-  tagName: 'div'
-};
+  _proto._setRef = function _setRef(ref) {
+    this.headerRef = ref;
+  };
+
+  return TableHeader;
+}(React.PureComponent);
+
 TableHeader.propTypes = {
-  isScrolling: PropTypes.bool,
   className: PropTypes.string,
-  style: PropTypes.object,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  headerHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
+  rowWidth: PropTypes.number.isRequired,
+  rowHeight: PropTypes.number.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  headerIndex: PropTypes.number,
-  cellRenderer: PropTypes.func,
-  headerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-  expandColumnKey: PropTypes.string,
-  expandIcon: PropTypes.func,
-  tagName: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  frozenData: PropTypes.arrayOf(PropTypes.object),
+  headerRenderer: PropTypes.func.isRequired,
+  rowRenderer: PropTypes.func.isRequired
 };
 export default TableHeader;
 //# sourceMappingURL=TableHeader.js.map

lib/BaseTable.js

@@ -22,3 +22,3 @@ "use strict";
 
-var _TableHeader = _interopRequireDefault(require("./TableHeader"));
+var _TableHeaderRow = _interopRequireDefault(require("./TableHeaderRow"));
 
@@ -88,3 +88,3 @@ var _TableRow = _interopRequireDefault(require("./TableRow"));
 
-var DEFUALT_COMPONENTS = {
+var DEFAULT_COMPONENTS = {
   TableCell: _TableCell.default,
@@ -122,2 +122,3 @@ TableHeaderCell: _TableHeaderCell.default,
       resizingKey: null,
+      resizingWidth: 0,
       expandedRowKeys: (0, _utils.cloneArray)(props.expandedRowKeys !== undefined ? expandedRowKeys : defaultExpandedRowKeys)
@@ -148,3 +149,3 @@ };
     _this._scrollHeight = 0;
-    _this._lastScanedRowIndex = -1;
+    _this._lastScannedRowIndex = -1;
     _this._hasDataChangedSinceEndReached = true;
@@ -214,4 +215,4 @@ _this._data = props.data;
       this.table && this.table.scrollToPosition(offset);
-      this.leftTable && this.leftTable.scollToTop(offset.scrollTop);
-      this.rightTable && this.rightTable.scollToTop(offset.scrollTop);
+      this.leftTable && this.leftTable.scrollToTop(offset.scrollTop);
+      this.rightTable && this.rightTable.scrollToTop(offset.scrollTop);
     }
@@ -229,4 +230,4 @@ /**
       this.table && this.table.scrollToPosition(this._scroll);
-      this.leftTable && this.leftTable.scollToTop(scrollTop);
-      this.rightTable && this.rightTable.scollToTop(scrollTop);
+      this.leftTable && this.leftTable.scrollToTop(scrollTop);
+      this.rightTable && this.rightTable.scrollToTop(scrollTop);
     }
@@ -338,2 +339,3 @@ /**
       var rowProps = _objectSpread({}, extraProps, {
+        role: 'row',
         key: "row-".concat(rowKey),
@@ -431,2 +433,3 @@ isScrolling: isScrolling,
       return _react.default.createElement(Tag, _extends({
+        role: "gridcell",
         key: "row-".concat(rowData[this.props.rowKey], "-cell-").concat(column.key)
@@ -443,4 +446,3 @@ }, rest, {
 
-      var isScrolling = _ref5.isScrolling,
-          columns = _ref5.columns,
+      var columns = _ref5.columns,
           headerIndex = _ref5.headerIndex,
@@ -462,4 +464,4 @@ style = _ref5.style;
       var headerProps = _objectSpread({}, extraProps, {
+        role: 'row',
         key: "header-".concat(headerIndex),
-        isScrolling: isScrolling,
         className: className,
@@ -475,3 +477,3 @@ style: style,
 
-      return _react.default.createElement(_TableHeader.default, headerProps);
+      return _react.default.createElement(_TableHeaderRow.default, headerProps);
     }
@@ -483,4 +485,3 @@ }, {
 
-      var isScrolling = _ref6.isScrolling,
-          columns = _ref6.columns,
+      var columns = _ref6.columns,
           column = _ref6.column,
@@ -510,3 +511,2 @@ columnIndex = _ref6.columnIndex,
       var cellProps = {
-        isScrolling: isScrolling,
         columns: columns,
@@ -543,2 +543,3 @@ column: column,
       return _react.default.createElement(Tag, _extends({
+        role: "gridcell",
         key: "header-".concat(headerIndex, "-cell-").concat(column.key),
@@ -571,3 +572,7 @@ onClick: column.sortable ? this._handleColumnSort : null
 
-      var scrollbarWidth = this.state.scrollbarWidth;
+      var _this$state = this.state,
+          scrollbarWidth = _this$state.scrollbarWidth,
+          hoveredRowKey = _this$state.hoveredRowKey,
+          resizingKey = _this$state.resizingKey,
+          resizingWidth = _this$state.resizingWidth;
 
@@ -601,2 +606,5 @@ var _this$_getTableSize = this._getTableSize(),
         rowRenderer: this.renderRow,
+        hoveredRowKey: hoveredRowKey,
+        resizingKey: resizingKey,
+        resizingWidth: resizingWidth,
         onScroll: this._handleScroll,
@@ -617,3 +625,7 @@ onRowsRendered: this._handleRowsRendered,
 
-      var scrollbarWidth = this.state.scrollbarWidth;
+      var _this$state2 = this.state,
+          scrollbarWidth = _this$state2.scrollbarWidth,
+          hoveredRowKey = _this$state2.hoveredRowKey,
+          resizingKey = _this$state2.resizingKey,
+          resizingWidth = _this$state2.resizingWidth;
 
@@ -643,2 +655,5 @@ var _this$_getTableSize2 = this._getTableSize(),
         rowRenderer: this.renderRow,
+        hoveredRowKey: hoveredRowKey,
+        resizingKey: resizingKey,
+        resizingWidth: resizingWidth,
         onScroll: this._handleVerticalScroll,
@@ -659,3 +674,7 @@ onRowsRendered: _noop.default,
 
-      var scrollbarWidth = this.state.scrollbarWidth;
+      var _this$state3 = this.state,
+          scrollbarWidth = _this$state3.scrollbarWidth,
+          hoveredRowKey = _this$state3.hoveredRowKey,
+          resizingKey = _this$state3.resizingKey,
+          resizingWidth = _this$state3.resizingWidth;
 
@@ -684,2 +703,5 @@ var _this$_getTableSize3 = this._getTableSize(),
         rowRenderer: this.renderRow,
+        hoveredRowKey: hoveredRowKey,
+        resizingKey: resizingKey,
+        resizingWidth: resizingWidth,
         onScroll: this._handleVerticalScroll,
@@ -693,5 +715,5 @@ onRowsRendered: _noop.default,
     value: function renderResizingLine() {
-      var _this$state = this.state,
-          resizingKey = _this$state.resizingKey,
-          scrollbarWidth = _this$state.scrollbarWidth;
+      var _this$state4 = this.state,
+          resizingKey = _this$state4.resizingKey,
+          scrollbarWidth = _this$state4.scrollbarWidth;
       if (!this.props.fixed || !resizingKey) return null;
@@ -783,3 +805,3 @@ var columns = this.columnManager.getMainColumns();
           footerHeight = _this$props10.footerHeight;
-      var cls = (0, _classnames.default)(classPrefix, className, (_cn6 = {}, _defineProperty(_cn6, "".concat(classPrefix, "--fixed"), fixed), _defineProperty(_cn6, "".concat(classPrefix, "--expanable"), !!expandColumnKey), _defineProperty(_cn6, "".concat(classPrefix, "--empty"), data.length === 0), _defineProperty(_cn6, "".concat(classPrefix, "--has-frozen-rows"), frozenData.length > 0), _defineProperty(_cn6, "".concat(classPrefix, "--has-frozen-columns"), this.columnManager.hasFrozenColumns()), _defineProperty(_cn6, "".concat(classPrefix, "--disabled"), disabled), _cn6));
+      var cls = (0, _classnames.default)(classPrefix, className, (_cn6 = {}, _defineProperty(_cn6, "".concat(classPrefix, "--fixed"), fixed), _defineProperty(_cn6, "".concat(classPrefix, "--expandable"), !!expandColumnKey), _defineProperty(_cn6, "".concat(classPrefix, "--empty"), data.length === 0), _defineProperty(_cn6, "".concat(classPrefix, "--has-frozen-rows"), frozenData.length > 0), _defineProperty(_cn6, "".concat(classPrefix, "--has-frozen-columns"), this.columnManager.hasFrozenColumns()), _defineProperty(_cn6, "".concat(classPrefix, "--disabled"), disabled), _cn6));
 
@@ -832,3 +854,3 @@ if (expandColumnKey) {
       if (nextProps.data !== this.props.data) {
-        this._lastScanedRowIndex = -1;
+        this._lastScannedRowIndex = -1;
         this._hasDataChangedSinceEndReached = true;
@@ -882,3 +904,3 @@ }
       if (this.props.components && this.props.components[name]) return this.props.components[name];
-      return DEFUALT_COMPONENTS[name];
+      return DEFAULT_COMPONENTS[name];
     }
@@ -987,3 +1009,3 @@ }, {
 
-      if (this._lastScanedRowIndex >= 0 && distanceFromEnd <= onEndReachedThreshold && (this._hasDataChangedSinceEndReached || scrollHeight !== this._scrollHeight)) {
+      if (this._lastScannedRowIndex >= 0 && distanceFromEnd <= onEndReachedThreshold && (this._hasDataChangedSinceEndReached || scrollHeight !== this._scrollHeight)) {
         this._hasDataChangedSinceEndReached = false;
@@ -1033,4 +1055,4 @@ this._scrollHeight = scrollHeight;
 
-      if (args.overscanStopIndex > this._lastScanedRowIndex) {
-        this._lastScanedRowIndex = args.overscanStopIndex;
+      if (args.overscanStopIndex > this._lastScannedRowIndex) {
+        this._lastScannedRowIndex = args.overscanStopIndex;
 
@@ -1048,3 +1070,2 @@ this._maybeCallOnEndReached();
       });
-      this.forceUpdateTable();
     }
@@ -1090,3 +1111,5 @@ }, {
       this.columnManager.setColumnWidth(key, width);
-      this.forceUpdate();
+      this.setState({
+        resizingWidth: width
+      });
       var column = this.columnManager.getColumn(key);
@@ -1112,3 +1135,2 @@ this.props.onColumnResize({
       });
-      this.forceUpdateTable(); // forceUpdate or the resize handler will stay there until re-render
     }
@@ -1263,3 +1285,3 @@ }, {
    * Custom header renderer
-   * The renderer receives props `{ isScrolling, cells, columns, headerIndex }`
+   * The renderer receives props `{ cells, columns, headerIndex }`
    */
@@ -1322,3 +1344,3 @@ headerRenderer: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element]),
   /**
-   * Default expanded row keys when initalize the table
+   * Default expanded row keys when initialize the table
    */
@@ -1325,0 +1347,0 @@ defaultExpandedRowKeys: _propTypes.default.arrayOf(_propTypes.default.string),

lib/Column.js

@@ -135,3 +135,3 @@ "use strict";
   /**
-   * Whether the colum is resizable, defaults to true
+   * Whether the column is resizable, defaults to true
    */
@@ -141,3 +141,3 @@ resizable: _propTypes.default.bool,
   /**
-   * Whether the colum is sortable, defaults to true
+   * Whether the column is sortable, defaults to true
    */
@@ -148,3 +148,3 @@ sortable: _propTypes.default.bool,
    * Custom column cell renderer
-   * The renderer receives props `{ isScrolling, cellData, columns, column, columnIndex, rowData, rowIndex, container }`
+   * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }`
    */
@@ -155,3 +155,3 @@ cellRenderer: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element]),
    * Custom column header renderer
-   * The renderer receives props `{ isScrolling, columns, column, columnIndex, headerIndex, container }`
+   * The renderer receives props `{ columns, column, columnIndex, headerIndex, container }`
    */
@@ -158,0 +158,0 @@ headerRenderer: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element])

lib/GridTable.js

@@ -16,6 +16,6 @@ "use strict";
 
+var _TableHeader = _interopRequireDefault(require("./TableHeader"));
+
 var _cellRangeRenderer = _interopRequireDefault(require("./cellRangeRenderer"));
 
-var _utils = require("./utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,2 +27,6 @@
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
@@ -32,6 +36,2 @@
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -69,5 +69,3 @@
     _this._setBodyRef = _this._setBodyRef.bind(_assertThisInitialized(_this));
-    _this._headerRowHeight = _this._headerRowHeight.bind(_assertThisInitialized(_this));
     _this._handleSectionRendered = _this._handleSectionRendered.bind(_assertThisInitialized(_this));
-    _this.renderHeaderRow = _this.renderHeaderRow.bind(_assertThisInitialized(_this));
     _this.renderRow = _this.renderRow.bind(_assertThisInitialized(_this));
@@ -87,10 +85,8 @@ _this.renderCellRange = _this.renderCellRange.bind(_assertThisInitialized(_this));
     value: function scrollToPosition(args) {
-      this.headerRef && this.headerRef.scrollToPosition({
-        scrollLeft: args.scrollLeft
-      });
+      this.headerRef && this.headerRef.scrollTo(args.scrollLeft);
       this.bodyRef && this.bodyRef.scrollToPosition(args);
     }
   }, {
-    key: "scollToTop",
-    value: function scollToTop(scrollTop) {
+    key: "scrollToTop",
+    value: function scrollToTop(scrollTop) {
       this.bodyRef && this.bodyRef.scrollToPosition({
@@ -103,5 +99,3 @@ scrollTop: scrollTop
     value: function scrollToLeft(scrollLeft) {
-      this.headerRef && this.headerRef.scrollToPosition({
-        scrollLeft: scrollLeft
-      });
+      this.headerRef && this.headerRef.scrollTo(scrollLeft);
       this.bodyRef && this.bodyRef.scrollToPosition({
@@ -121,39 +115,8 @@ scrollLeft: scrollLeft
   }, {
-    key: "renderHeaderRow",
-    value: function renderHeaderRow(_ref) {
-      var index = _ref.rowIndex,
-          args = _objectWithoutProperties(_ref, ["rowIndex"]);
-
+    key: "renderRow",
+    value: function renderRow(args) {
       var _this$props = this.props,
+          data = _this$props.data,
           columns = _this$props.columns,
-          frozenData = _this$props.frozenData,
-          headerRenderer = _this$props.headerRenderer,
           rowRenderer = _this$props.rowRenderer;
-
-      var headerCount = this._getHeaderCount();
-
-      if (index < headerCount) {
-        if (args.style.height === 0) return null;
-        return headerRenderer(_objectSpread({}, args, {
-          columns: columns,
-          headerIndex: index
-        }));
-      }
-
-      var rowData = frozenData[index - headerCount]; // for frozen row the `rowIndex` is negative
-
-      var rowIndex = headerCount - index - 1;
-      return rowRenderer(_objectSpread({}, args, {
-        columns: columns,
-        rowData: rowData,
-        rowIndex: rowIndex
-      }));
-    }
-  }, {
-    key: "renderRow",
-    value: function renderRow(args) {
-      var _this$props2 = this.props,
-          data = _this$props2.data,
-          columns = _this$props2.columns,
-          rowRenderer = _this$props2.rowRenderer;
       var rowData = data[args.rowIndex];
@@ -178,20 +141,19 @@ return rowRenderer(_objectSpread({}, args, {
     value: function render() {
-      var _this$props3 = this.props,
-          containerStyle = _this$props3.containerStyle,
-          classPrefix = _this$props3.classPrefix,
-          className = _this$props3.className,
-          data = _this$props3.data,
-          frozenData = _this$props3.frozenData,
-          width = _this$props3.width,
-          height = _this$props3.height,
-          rowHeight = _this$props3.rowHeight,
-          headerWidth = _this$props3.headerWidth,
-          bodyWidth = _this$props3.bodyWidth,
-          useIsScrolling = _this$props3.useIsScrolling,
-          onScroll = _this$props3.onScroll,
-          onScrollbarPresenceChange = _this$props3.onScrollbarPresenceChange,
-          rest = _objectWithoutProperties(_this$props3, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "onScrollbarPresenceChange"]);
+      var _this$props2 = this.props,
+          containerStyle = _this$props2.containerStyle,
+          classPrefix = _this$props2.classPrefix,
+          className = _this$props2.className,
+          data = _this$props2.data,
+          frozenData = _this$props2.frozenData,
+          width = _this$props2.width,
+          height = _this$props2.height,
+          rowHeight = _this$props2.rowHeight,
+          headerWidth = _this$props2.headerWidth,
+          bodyWidth = _this$props2.bodyWidth,
+          useIsScrolling = _this$props2.useIsScrolling,
+          onScroll = _this$props2.onScroll,
+          onScrollbarPresenceChange = _this$props2.onScrollbarPresenceChange,
+          hoveredRowKey = _this$props2.hoveredRowKey,
+          rest = _objectWithoutProperties(_this$props2, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "onScrollbarPresenceChange", "hoveredRowKey"]);
 
-      var headerCount = this._getHeaderCount();
-
       var headerHeight = this._getHeaderHeight();
@@ -206,2 +168,3 @@
       return _react.default.createElement("div", _extends({
+        role: "table",
         className: cls
@@ -222,2 +185,3 @@ }, containerProps), _react.default.createElement(_Grid.default, _extends({}, rest, {
         cellRangeRenderer: this.renderCellRange,
+        hoveredRowKey: hoveredRowKey,
         onScroll: onScroll,
@@ -228,3 +192,3 @@ onSectionRendered: this._handleSectionRendered,
       // to prevent header's shadow being covered by body
-      _react.default.createElement(_Grid.default, _extends({}, rest, {
+      _react.default.createElement(_TableHeader.default, _extends({}, rest, {
         className: "".concat(classPrefix, "__header"),
@@ -236,20 +200,10 @@ ref: this._setHeaderRef,
         height: Math.min(headerHeight + frozenRowsHeight, height),
-        rowHeight: this._headerRowHeight,
-        rowCount: headerCount + frozenRowCount,
-        columnWidth: headerWidth,
-        columnCount: 1,
-        isScrollingOptOut: !useIsScrolling,
-        cellRenderer: this.renderHeaderRow,
-        cellRangeRenderer: this.renderCellRange
+        rowWidth: headerWidth,
+        rowHeight: rowHeight,
+        headerHeight: this.props.headerHeight,
+        headerRenderer: this.props.headerRenderer,
+        rowRenderer: this.props.rowRenderer
       })));
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (!(0, _utils.isObjectEqual)(this.props.headerHeight, prevProps.headerHeight) || // if there are frozen rows
-      this.props.rowHeight !== prevProps.rowHeight) {
-        this.headerRef && this.headerRef.recomputeGridSize();
-      }
-    }
-  }, {
     key: "_setHeaderRef",
@@ -265,8 +219,2 @@ value: function _setHeaderRef(ref) {
   }, {
-    key: "_getHeaderCount",
-    value: function _getHeaderCount() {
-      var headerHeight = this.props.headerHeight;
-      return Array.isArray(headerHeight) ? headerHeight.length : 1;
-    }
-  }, {
     key: "_getHeaderHeight",
@@ -285,22 +233,8 @@ value: function _getHeaderHeight() {
   }, {
-    key: "_headerRowHeight",
-    value: function _headerRowHeight(_ref2) {
-      var index = _ref2.index;
-      var _this$props4 = this.props,
-          headerHeight = _this$props4.headerHeight,
-          rowHeight = _this$props4.rowHeight;
-
-      if (Array.isArray(headerHeight)) {
-        return index < headerHeight.length ? headerHeight[index] : rowHeight;
-      } else {
-        return index === 0 ? headerHeight : rowHeight;
-      }
-    }
-  }, {
     key: "_handleSectionRendered",
-    value: function _handleSectionRendered(_ref3) {
-      var rowOverscanStartIndex = _ref3.rowOverscanStartIndex,
-          rowOverscanStopIndex = _ref3.rowOverscanStopIndex,
-          rowStartIndex = _ref3.rowStartIndex,
-          rowStopIndex = _ref3.rowStopIndex;
+    value: function _handleSectionRendered(_ref) {
+      var rowOverscanStartIndex = _ref.rowOverscanStartIndex,
+          rowOverscanStopIndex = _ref.rowOverscanStopIndex,
+          rowStartIndex = _ref.rowStartIndex,
+          rowStopIndex = _ref.rowStopIndex;
       var onRowsRendered = this.props.onRowsRendered;
@@ -333,4 +267,3 @@ onRowsRendered({
   useIsScrolling: _propTypes.default.bool,
-  setHeaderRef: _propTypes.default.func,
-  setBodyRef: _propTypes.default.func,
+  hoveredRowKey: _propTypes.default.string,
   onScroll: _propTypes.default.func,
@@ -337,0 +270,0 @@ onRowsRendered: _propTypes.default.func,

lib/TableHeader.js

@@ -12,68 +12,135 @@ "use strict";
 
-var _utils = require("./utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-/**
- * Header component for BaseTable
- */
-var TableHeader = function TableHeader(_ref) {
-  var isScrolling = _ref.isScrolling,
-      className = _ref.className,
-      style = _ref.style,
-      columns = _ref.columns,
-      headerIndex = _ref.headerIndex,
-      cellRenderer = _ref.cellRenderer,
-      headerRenderer = _ref.headerRenderer,
-      expandColumnKey = _ref.expandColumnKey,
-      ExpandIcon = _ref.expandIcon,
-      Tag = _ref.tagName,
-      rest = _objectWithoutProperties(_ref, ["isScrolling", "className", "style", "columns", "headerIndex", "cellRenderer", "headerRenderer", "expandColumnKey", "expandIcon", "tagName"]);
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-  var cells = columns.map(function (column, columnIndex) {
-    return cellRenderer({
-      isScrolling: isScrolling,
-      columns: columns,
-      column: column,
-      columnIndex: columnIndex,
-      headerIndex: headerIndex,
-      expandIcon: column.key === expandColumnKey && _react.default.createElement(ExpandIcon, null)
-    });
-  });
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-  if (headerRenderer) {
-    cells = (0, _utils.renderElement)(headerRenderer, {
-      isScrolling: isScrolling,
-      cells: cells,
-      columns: columns,
-      headerIndex: headerIndex
-    });
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var TableHeader =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  _inherits(TableHeader, _React$PureComponent);
+
+  function TableHeader(props) {
+    var _this;
+
+    _classCallCheck(this, TableHeader);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TableHeader).call(this, props));
+    _this.renderHeaderRow = _this.renderHeaderRow.bind(_assertThisInitialized(_this));
+    _this.renderFrozenRow = _this.renderFrozenRow.bind(_assertThisInitialized(_this));
+    _this._setRef = _this._setRef.bind(_assertThisInitialized(_this));
+    return _this;
   }
 
-  return _react.default.createElement(Tag, _extends({}, rest, {
-    className: className,
-    style: style
-  }), cells);
-};
+  _createClass(TableHeader, [{
+    key: "scrollTo",
+    value: function scrollTo(offset) {
+      if (this.headerRef) this.headerRef.scrollLeft = offset;
+    }
+  }, {
+    key: "renderHeaderRow",
+    value: function renderHeaderRow(height, index) {
+      var _this$props = this.props,
+          columns = _this$props.columns,
+          headerRenderer = _this$props.headerRenderer;
+      if (height <= 0) return null;
+      var style = {
+        width: '100%',
+        height: height
+      };
+      return headerRenderer({
+        style: style,
+        columns: columns,
+        headerIndex: index
+      });
+    }
+  }, {
+    key: "renderFrozenRow",
+    value: function renderFrozenRow(rowData, index) {
+      var _this$props2 = this.props,
+          columns = _this$props2.columns,
+          rowHeight = _this$props2.rowHeight,
+          rowRenderer = _this$props2.rowRenderer;
+      var style = {
+        width: '100%',
+        height: rowHeight
+      }; // for frozen row the `rowIndex` is negative
 
-TableHeader.defaultProps = {
-  tagName: 'div'
-};
+      var rowIndex = -index - 1;
+      return rowRenderer({
+        style: style,
+        columns: columns,
+        rowData: rowData,
+        rowIndex: rowIndex
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          width = _this$props3.width,
+          height = _this$props3.height,
+          rowWidth = _this$props3.rowWidth,
+          headerHeight = _this$props3.headerHeight,
+          frozenData = _this$props3.frozenData;
+      if (height <= 0) return null;
+      var style = {
+        width: width,
+        height: height,
+        position: 'relative',
+        overflow: 'hidden'
+      };
+      var innerStyle = {
+        width: rowWidth,
+        height: height
+      };
+      var rowHeights = Array.isArray(headerHeight) ? headerHeight : [headerHeight];
+      return _react.default.createElement("div", {
+        role: "grid",
+        ref: this._setRef,
+        className: className,
+        style: style
+      }, _react.default.createElement("div", {
+        role: "rowgroup",
+        style: innerStyle
+      }, rowHeights.map(this.renderHeaderRow), frozenData.map(this.renderFrozenRow)));
+    }
+  }, {
+    key: "_setRef",
+    value: function _setRef(ref) {
+      this.headerRef = ref;
+    }
+  }]);
+
+  return TableHeader;
+}(_react.default.PureComponent);
+
 TableHeader.propTypes = {
-  isScrolling: _propTypes.default.bool,
   className: _propTypes.default.string,
-  style: _propTypes.default.object,
+  width: _propTypes.default.number.isRequired,
+  height: _propTypes.default.number.isRequired,
+  headerHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.number)]).isRequired,
+  rowWidth: _propTypes.default.number.isRequired,
+  rowHeight: _propTypes.default.number.isRequired,
   columns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  headerIndex: _propTypes.default.number,
-  cellRenderer: _propTypes.default.func,
-  headerRenderer: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element]),
-  expandColumnKey: _propTypes.default.string,
-  expandIcon: _propTypes.default.func,
-  tagName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
+  data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  frozenData: _propTypes.default.arrayOf(_propTypes.default.object),
+  headerRenderer: _propTypes.default.func.isRequired,
+  rowRenderer: _propTypes.default.func.isRequired
 };
@@ -80,0 +147,0 @@ var _default = TableHeader;

package.json

 {
   "name": "react-base-table",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "a react table component to display large data set with high performance and flexibility",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

79

increased by5.33%

Lines of code

5975

increased by2.68%

Worsened metrics

Total package byte prevSize

818574

decreased by-0.23%

No dependency changes