Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
fixed-data-table-2
Advanced tools
fixed-data-table-2 - npm Package Compare versions
Comparing version 0.8.3 to 0.8.4
@@ -25,2 +25,10 @@ <!-- File generated from "src/FixedDataTableColumn.js" --> | ||
| ### `fixedRight` | ||
| Controls if the column is fixed to the right side of the table when scrolling in the X axis. | ||
| type: `bool` | ||
| defaultValue: `false` | ||
| ### `header` | ||
@@ -27,0 +35,0 @@ |
@@ -129,2 +129,3 @@ <!-- File generated from "src/FixedDataTable.js" --> | ||
| type: `bool` | ||
| defaultValue: `true` | ||
@@ -135,2 +136,3 @@ | ||
| type: `bool` | ||
| defaultValue: `true` | ||
@@ -205,3 +207,3 @@ | ||
| rowIndex; number // (the row index) | ||
| height: number // (supplied from subRowHeight or subRowHeightGetter) | ||
| height: number // (supplied from the Table or rowHeightGetter) | ||
| width: number // (supplied from the Table) | ||
@@ -241,2 +243,3 @@ } | ||
| type: `number` | ||
| defaultValue: `0` | ||
@@ -249,4 +252,27 @@ | ||
| type: `number` | ||
| defaultValue: `0` | ||
| ### `cellGroupWrapperHeight` | ||
| Pixel height of fixedDataTableCellGroupLayout/cellGroupWrapper. | ||
| Default is headerHeight and groupHeaderHeight. | ||
| This can be used with CSS to make a header cell span both the group & normal header row. | ||
| Setting this to a value larger than height will cause the content to | ||
| overflow the height. This is useful when adding a 2nd table as the group | ||
| header and vertically merging the 2 headers when a column is not part | ||
| of a group. Here are the necessary CSS changes: | ||
| Both headers: | ||
| - cellGroupWrapper needs overflow-x: hidden and pointer-events: none | ||
| - cellGroup needs pointer-events: auto to reenable them on child els | ||
| Group header: | ||
| - Layout/main needs overflow: visible and a higher z-index | ||
| - CellLayout/main needs overflow-y: visible | ||
| - cellGroup needs overflow: visible | ||
| type: `number` | ||
| ### `footerHeight` | ||
@@ -257,2 +283,3 @@ | ||
| type: `number` | ||
| defaultValue: `0` | ||
@@ -342,2 +369,9 @@ | ||
| ### `onRowMouseUp` | ||
| Callback that is called when a mouse-up event happens on a row. | ||
| type: `func` | ||
| ### `onRowMouseEnter` | ||
@@ -357,2 +391,23 @@ | ||
| ### `onRowTouchStart` | ||
| Callback that is called when a touch-start event happens on a row. | ||
| type: `func` | ||
| ### `onRowTouchEnd` | ||
| Callback that is called when a touch-end event happens on a row. | ||
| type: `func` | ||
| ### `onRowTouchMove` | ||
| Callback that is called when a touch-move event happens on a row. | ||
| type: `func` | ||
| ### `onColumnResizeEndCallback` | ||
@@ -414,10 +469,1 @@ | ||
| ### `elementHeights` | ||
| defaultValue: `{ | ||
| footerHeight: 0, | ||
| groupHeaderHeight: 0, | ||
| headerHeight: 0, | ||
| }` | ||
@@ -36,2 +36,6 @@ /** | ||
| var _FixedDataTableEventHelper = require('./FixedDataTableEventHelper'); | ||
| var _FixedDataTableEventHelper2 = _interopRequireDefault(_FixedDataTableEventHelper); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -49,6 +53,8 @@ | ||
| /*function*/onMoveEnd, | ||
| /*DOMElement*/domNode) { | ||
| /*DOMElement*/domNode, | ||
| /*boolean*/touchEnabled) { | ||
| _classCallCheck(this, DOMMouseMoveTracker); | ||
| this._isDragging = false; | ||
| this._isTouchEnabled = touchEnabled; | ||
| this._animationFrameID = null; | ||
@@ -82,2 +88,8 @@ this._domNode = domNode; | ||
| if (this._isTouchEnabled && !this._eventTouchStartToken && !this._eventTouchMoveToken && !this._eventTouchEndToken) { | ||
| this._eventTouchStartToken = _EventListener2.default.listen(this._domNode, 'touchstart', this._onMouseMove); | ||
| this._eventTouchMoveToken = _EventListener2.default.listen(this._domNode, 'touchmove', this._onMouseMove); | ||
| this._eventTouchEndToken = _EventListener2.default.listen(this._domNode, 'touchend', this._onMouseUp); | ||
| } | ||
| if (!this._isDragging) { | ||
@@ -87,4 +99,7 @@ this._deltaX = 0; | ||
| this._isDragging = true; | ||
| this._x = event.clientX; | ||
| this._y = event.clientY; | ||
| var coordinates = _FixedDataTableEventHelper2.default.getCoordinatesFromEvent(event); | ||
| var x = coordinates.x; | ||
| var y = coordinates.y; | ||
| this._x = x; | ||
| this._y = y; | ||
| } | ||
@@ -112,2 +127,11 @@ event.preventDefault(); | ||
| if (this._isTouchEnabled && this._eventTouchStartToken && this._eventTouchMoveToken && this._eventTouchEndToken) { | ||
| this._eventTouchStartToken.remove(); | ||
| this._eventTouchStartToken = null; | ||
| this._eventTouchMoveToken.remove(); | ||
| this._eventTouchMoveToken = null; | ||
| this._eventTouchEndToken.remove(); | ||
| this._eventTouchEndToken = null; | ||
| } | ||
| if (this._animationFrameID !== null) { | ||
@@ -142,4 +166,5 @@ (0, _cancelAnimationFramePolyfill2.default)(this._animationFrameID); | ||
| value: function _onMouseMove( /*object*/event) { | ||
| var x = event.clientX; | ||
| var y = event.clientY; | ||
| var coordinates = _FixedDataTableEventHelper2.default.getCoordinatesFromEvent(event); | ||
| var x = coordinates.x; | ||
| var y = coordinates.y; | ||
@@ -146,0 +171,0 @@ this._deltaX += x - this._x; |
@@ -66,2 +66,6 @@ 'use strict'; | ||
| var _FixedDataTableEventHelper = require('./FixedDataTableEventHelper'); | ||
| var _FixedDataTableEventHelper2 = _interopRequireDefault(_FixedDataTableEventHelper); | ||
| var _cx = require('./cx'); | ||
@@ -585,2 +589,3 @@ | ||
| fixedColumns: state.groupHeaderFixedColumns, | ||
| fixedRightColumns: state.groupHeaderFixedRightColumns, | ||
| scrollableColumns: state.groupHeaderScrollableColumns, | ||
@@ -647,3 +652,4 @@ onColumnResize: this._onColumnResize, | ||
| onColumnResizeEnd: props.onColumnResizeEndCallback, | ||
| columnKey: state.columnResizingData.key | ||
| columnKey: state.columnResizingData.key, | ||
| touchEnabled: state.touchScrollEnabled | ||
| }); | ||
@@ -663,2 +669,3 @@ | ||
| fixedColumns: state.footFixedColumns, | ||
| fixedRightColumns: state.footFixedRightColumns, | ||
| scrollableColumns: state.footScrollableColumns, | ||
@@ -683,3 +690,5 @@ scrollLeft: state.scrollX | ||
| fixedColumns: state.headFixedColumns, | ||
| fixedRightColumns: state.headFixedRightColumns, | ||
| scrollableColumns: state.headScrollableColumns, | ||
| touchEnabled: state.touchScrollEnabled, | ||
| onColumnResize: this._onColumnResize, | ||
@@ -745,2 +754,3 @@ onColumnReorder: onColumnReorder, | ||
| fixedColumns: state.bodyFixedColumns, | ||
| fixedRightColumns: state.bodyFixedRightColumns, | ||
| height: state.bodyHeight, | ||
@@ -788,2 +798,7 @@ offsetTop: offsetTop, | ||
| /*object*/event) { | ||
| var coordinates = _FixedDataTableEventHelper2.default.getCoordinatesFromEvent(event); | ||
| var x = coordinates.x; | ||
| var y = coordinates.y; | ||
| this.setState({ | ||
@@ -797,4 +812,4 @@ isColumnResizing: true, | ||
| initialEvent: { | ||
| clientX: event.clientX, | ||
| clientY: event.clientY, | ||
| clientX: x, | ||
| clientY: y, | ||
| preventDefault: _emptyFunction2.default | ||
@@ -917,6 +932,9 @@ }, | ||
| columnInfo.bodyFixedColumns = oldState.bodyFixedColumns; | ||
| columnInfo.bodyFixedRightColumns = oldState.bodyFixedRightColumns; | ||
| columnInfo.bodyScrollableColumns = oldState.bodyScrollableColumns; | ||
| columnInfo.headFixedColumns = oldState.headFixedColumns; | ||
| columnInfo.headFixedRightColumns = oldState.headFixedRightColumns; | ||
| columnInfo.headScrollableColumns = oldState.headScrollableColumns; | ||
| columnInfo.footFixedColumns = oldState.footFixedColumns; | ||
| columnInfo.footFixedRightColumns = oldState.footFixedRightColumns; | ||
| columnInfo.footScrollableColumns = oldState.footScrollableColumns; | ||
@@ -926,2 +944,3 @@ } else { | ||
| columnInfo.bodyFixedColumns = bodyColumnTypes.fixed; | ||
| columnInfo.bodyFixedRightColumns = bodyColumnTypes.fixedRight; | ||
| columnInfo.bodyScrollableColumns = bodyColumnTypes.scrollable; | ||
@@ -931,2 +950,3 @@ | ||
| columnInfo.headFixedColumns = headColumnTypes.fixed; | ||
| columnInfo.headFixedRightColumns = headColumnTypes.fixedRight; | ||
| columnInfo.headScrollableColumns = headColumnTypes.scrollable; | ||
@@ -936,2 +956,3 @@ | ||
| columnInfo.footFixedColumns = footColumnTypes.fixed; | ||
| columnInfo.footFixedRightColumns = footColumnTypes.fixedRight; | ||
| columnInfo.footScrollableColumns = footColumnTypes.scrollable; | ||
@@ -942,2 +963,3 @@ } | ||
| columnInfo.groupHeaderFixedColumns = oldState.groupHeaderFixedColumns; | ||
| columnInfo.groupHeaderFixedRightColumns = oldState.groupHeaderFixedRightColumns; | ||
| columnInfo.groupHeaderScrollableColumns = oldState.groupHeaderScrollableColumns; | ||
@@ -948,2 +970,3 @@ } else { | ||
| columnInfo.groupHeaderFixedColumns = groupHeaderColumnTypes.fixed; | ||
| columnInfo.groupHeaderFixedRightColumns = groupHeaderColumnTypes.fixedRight; | ||
| columnInfo.groupHeaderScrollableColumns = groupHeaderColumnTypes.scrollable; | ||
@@ -1194,2 +1217,3 @@ } | ||
| var fixedColumns = []; | ||
| var fixedRightColumns = []; | ||
| var scrollableColumns = []; | ||
@@ -1199,2 +1223,4 @@ for (var i = 0; i < columns.length; ++i) { | ||
| fixedColumns.push(columns[i]); | ||
| } else if (columns[i].props.fixedRight) { | ||
| fixedRightColumns.push(columns[i]); | ||
| } else { | ||
@@ -1206,2 +1232,3 @@ scrollableColumns.push(columns[i]); | ||
| fixed: fixedColumns, | ||
| fixedRight: fixedRightColumns, | ||
| scrollable: scrollableColumns | ||
@@ -1208,0 +1235,0 @@ }; |
@@ -59,2 +59,3 @@ 'use strict'; | ||
| fixedColumns: _propTypes2.default.array.isRequired, | ||
| fixedRightColumns: _propTypes2.default.array.isRequired, | ||
| height: _propTypes2.default.number.isRequired, | ||
@@ -168,2 +169,3 @@ offsetTop: _propTypes2.default.number.isRequired, | ||
| fixedColumns: props.fixedColumns, | ||
| fixedRightColumns: props.fixedRightColumns, | ||
| scrollableColumns: props.scrollableColumns, | ||
@@ -170,0 +172,0 @@ onClick: props.onRowClick, |
@@ -112,3 +112,8 @@ 'use strict'; | ||
| */ | ||
| pureRendering: _propTypes2.default.bool | ||
| pureRendering: _propTypes2.default.bool, | ||
| /** | ||
| * Whether touch is enabled or not. | ||
| */ | ||
| touchEnabled: _propTypes2.default.bool | ||
| }, | ||
@@ -273,3 +278,10 @@ | ||
| style: columnResizerStyle, | ||
| onMouseDown: this._onColumnResizerMouseDown }, | ||
| onMouseDown: this._onColumnResizerMouseDown, | ||
| onTouchStart: this.props.touchEnabled ? this._onColumnResizerMouseDown : null, | ||
| onTouchEnd: this.props.touchEnabled ? function (e) { | ||
| return e.stopPropagation(); | ||
| } : null, | ||
| onTouchMove: this.props.touchEnabled ? function (e) { | ||
| return e.stopPropagation(); | ||
| } : null }, | ||
| _React2.default.createElement('div', { | ||
@@ -287,3 +299,5 @@ className: (0, _joinClasses2.default)((0, _cx2.default)('fixedDataTableCellLayout/columnResizerKnob'), (0, _cx2.default)('public/fixedDataTableCell/columnResizerKnob')), | ||
| columnKey: this.columnKey, | ||
| touchEnabled: this.props.touchEnabled, | ||
| onMouseDown: this._onColumnReorderMouseDown, | ||
| onTouchStart: this._onColumnReorderMouseDown, | ||
| height: height | ||
@@ -326,2 +340,9 @@ }, this.props)); | ||
| this.props.onColumnResize(this.props.left, this.props.width, this.props.minWidth, this.props.maxWidth, this.props.columnKey, event); | ||
| /** | ||
| * This prevents the rows from moving around when we resize the | ||
| * headers on touch devices. | ||
| */ | ||
| if (this.props.touchEnabled) { | ||
| event.stopPropagation(); | ||
| } | ||
| }, | ||
@@ -328,0 +349,0 @@ _onColumnReorderMouseDown: function _onColumnReorderMouseDown( /*object*/event) { |
@@ -89,3 +89,5 @@ /** | ||
| zIndex: _propTypes2.default.number.isRequired | ||
| zIndex: _propTypes2.default.number.isRequired, | ||
| touchEnabled: _propTypes2.default.bool | ||
| }, | ||
@@ -162,2 +164,3 @@ | ||
| minWidth: columnProps.minWidth, | ||
| touchEnabled: this.props.touchEnabled, | ||
| onColumnResize: onColumnResize, | ||
@@ -164,0 +167,0 @@ onColumnReorder: onColumnReorder, |
@@ -69,2 +69,7 @@ 'use strict'; | ||
| /** | ||
| * Controls if the column is fixed to the right side of the table when scrolling in the X axis. | ||
| */ | ||
| fixedRight: _propTypes2.default.bool, | ||
| /** | ||
| * The header cell for this column. | ||
@@ -205,3 +210,4 @@ * This can either be a string a React element, or a function that generates | ||
| allowCellsRecycling: false, | ||
| fixed: false | ||
| fixed: false, | ||
| fixedRight: false | ||
| }; | ||
@@ -208,0 +214,0 @@ |
@@ -27,2 +27,6 @@ 'use strict'; | ||
| var _FixedDataTableEventHelper = require('./FixedDataTableEventHelper'); | ||
| var _FixedDataTableEventHelper2 = _interopRequireDefault(_FixedDataTableEventHelper); | ||
| var _clamp = require('./clamp'); | ||
@@ -38,17 +42,2 @@ | ||
| /** | ||
| * Copyright Schrodinger, LLC | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. An additional grant | ||
| * of patent rights can be found in the PATENTS file in the same directory. | ||
| * | ||
| * This is to be used with the FixedDataTable. It is a header icon | ||
| * that allows you to reorder the corresponding column. | ||
| * | ||
| * @providesModule FixedDataTableColumnReorderHandle | ||
| * @typechecks | ||
| */ | ||
| var FixedDataTableColumnReorderHandle = (0, _createReactClass2.default)({ | ||
@@ -68,3 +57,8 @@ displayName: 'FixedDataTableColumnReorderHandle', | ||
| */ | ||
| columnKey: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]) | ||
| columnKey: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]), | ||
| /** | ||
| * Whether the reorder handle should respond to touch events or not. | ||
| */ | ||
| touchEnabled: _propTypes2.default.bool | ||
| }, | ||
@@ -96,2 +90,9 @@ | ||
| onMouseDown: this.onMouseDown, | ||
| onTouchStart: this.props.touchEnabled ? this.onMouseDown : null, | ||
| onTouchEnd: this.props.touchEnabled ? function (e) { | ||
| return e.stopPropagation(); | ||
| } : null, | ||
| onTouchMove: this.props.touchEnabled ? function (e) { | ||
| return e.stopPropagation(); | ||
| } : null, | ||
| style: style }); | ||
@@ -101,7 +102,8 @@ }, | ||
| var targetRect = event.target.getBoundingClientRect(); | ||
| var coordinates = _FixedDataTableEventHelper2.default.getCoordinatesFromEvent(event); | ||
| var mouseLocationInElement = event.clientX - targetRect.offsetLeft; | ||
| var mouseLocationInElement = coordinates.x - targetRect.offsetLeft; | ||
| var mouseLocationInRelationToColumnGroup = mouseLocationInElement + event.target.parentElement.offsetLeft; | ||
| this._mouseMoveTracker = new _DOMMouseMoveTracker2.default(this._onMove, this._onColumnReorderEnd, document.body); | ||
| this._mouseMoveTracker = new _DOMMouseMoveTracker2.default(this._onMove, this._onColumnReorderEnd, document.body, this.props.touchEnabled); | ||
| this._mouseMoveTracker.captureMouseMoves(event); | ||
@@ -123,2 +125,10 @@ this.setState({ | ||
| this.frameId = requestAnimationFrame(this._updateState); | ||
| /** | ||
| * This prevents the rows from moving around when we drag the | ||
| * headers on touch devices. | ||
| */ | ||
| if (this.props.touchEnabled) { | ||
| event.stopPropagation(); | ||
| } | ||
| }, | ||
@@ -145,4 +155,17 @@ _onMove: function _onMove( /*number*/deltaX) { | ||
| } | ||
| }); | ||
| }); /** | ||
| * Copyright Schrodinger, LLC | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. An additional grant | ||
| * of patent rights can be found in the PATENTS file in the same directory. | ||
| * | ||
| * This is to be used with the FixedDataTable. It is a header icon | ||
| * that allows you to reorder the corresponding column. | ||
| * | ||
| * @providesModule FixedDataTableColumnReorderHandle | ||
| * @typechecks | ||
| */ | ||
| module.exports = FixedDataTableColumnReorderHandle; |
@@ -107,3 +107,8 @@ 'use strict'; | ||
| */ | ||
| columnKey: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]) | ||
| columnKey: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]), | ||
| /** | ||
| * Whether the resize handle should respond to touch events or not. | ||
| */ | ||
| touchEnabled: _propTypes2.default.bool | ||
| }, | ||
@@ -127,3 +132,3 @@ | ||
| componentDidMount: function componentDidMount() { | ||
| this._mouseMoveTracker = new _DOMMouseMoveTracker2.default(this._onMove, this._onColumnResizeEnd, document.body); | ||
| this._mouseMoveTracker = new _DOMMouseMoveTracker2.default(this._onMove, this._onColumnResizeEnd, document.body, this.props.touchEnabled); | ||
| }, | ||
@@ -130,0 +135,0 @@ componentWillUnmount: function componentWillUnmount() { |
@@ -39,3 +39,3 @@ /** | ||
| FixedDataTableRoot.version = '0.8.3'; | ||
| FixedDataTableRoot.version = '0.8.4'; | ||
| module.exports = FixedDataTableRoot; |
@@ -74,3 +74,3 @@ /** | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FixedDataTableRowImpl.__proto__ || Object.getPrototypeOf(FixedDataTableRowImpl)).call.apply(_ref, [this].concat(args))), _this), _this._getColumnsWidth = function ( /*array*/columns) /*number*/{ | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FixedDataTableRowImpl.__proto__ || Object.getPrototypeOf(FixedDataTableRowImpl)).call.apply(_ref, [this].concat(args))), _this), _this.mouseLeaveIndex = null, _this._getColumnsWidth = function ( /*array*/columns) /*number*/{ | ||
| var width = 0; | ||
@@ -111,2 +111,9 @@ for (var i = 0; i < columns.length; ++i) { | ||
| return _React2.default.createElement('div', { className: className, style: style }); | ||
| }, _this._renderFixedRightColumnsShadow = function ( /*number*/left) /*?object*/{ | ||
| var className = (0, _cx2.default)('fixedDataTableRowLayout/columnsShadow', 'fixedDataTableRowLayout/columnsRightShadow', 'fixedDataTableRowLayout/fixedColumnsDivider', 'public/fixedDataTableRow/columnsShadow', 'public/fixedDataTableRow/columnsRightShadow', 'public/fixedDataTableRow/fixedColumnsDivider'); | ||
| var style = { | ||
| height: _this.props.height, | ||
| left: left | ||
| }; | ||
| return _React2.default.createElement('div', { className: className, style: style }); | ||
| }, _this._renderColumnsRightShadow = function ( /*number*/totalWidth) /*?object*/{ | ||
@@ -129,5 +136,17 @@ if (Math.ceil(_this.props.scrollLeft + _this.props.width) < Math.floor(totalWidth)) { | ||
| }, _this._onMouseEnter = function ( /*object*/event) { | ||
| _this.props.onMouseEnter(event, _this.props.index); | ||
| /** | ||
| * This is necessary so that onMouseLeave is fired with the initial | ||
| * row index since this row could be updated with a different index | ||
| * when scrolling. | ||
| */ | ||
| _this.mouseLeaveIndex = _this.props.index; | ||
| if (_this.props.onMouseEnter) { | ||
| _this.props.onMouseEnter(event, _this.props.index); | ||
| } | ||
| }, _this._onMouseLeave = function ( /*object*/event) { | ||
| _this.props.onMouseLeave(event, _this.props.index); | ||
| if (_this.mouseLeaveIndex === null) { | ||
| _this.mouseLeaveIndex = _this.props.index; | ||
| } | ||
| _this.props.onMouseLeave(event, _this.mouseLeaveIndex); | ||
| _this.mouseLeaveIndex = null; | ||
| }, _this._onTouchStart = function ( /*object*/event) { | ||
@@ -142,2 +161,7 @@ _this.props.onTouchStart(event, _this.props.index); | ||
| /** | ||
| * The index of a row for which to fire the onMouseLeave event. | ||
| */ | ||
| _createClass(FixedDataTableRowImpl, [{ | ||
@@ -168,2 +192,3 @@ key: 'render', | ||
| columns: this.props.fixedColumns, | ||
| touchEnabled: this.props.touchEnabled, | ||
| onColumnResize: this.props.onColumnResize, | ||
@@ -179,2 +204,23 @@ onColumnReorder: this.props.onColumnReorder, | ||
| var columnsLeftShadow = this._renderColumnsLeftShadow(fixedColumnsWidth); | ||
| var fixedRightColumnsWidth = this._getColumnsWidth(this.props.fixedRightColumns); | ||
| var fixedRightColumns = _React2.default.createElement(_FixedDataTableCellGroup2.default, { | ||
| key: 'fixed_right_cells', | ||
| isScrolling: this.props.isScrolling, | ||
| height: this.props.height, | ||
| cellGroupWrapperHeight: this.props.cellGroupWrapperHeight, | ||
| left: -this.props.width + fixedRightColumnsWidth, | ||
| width: fixedRightColumnsWidth, | ||
| zIndex: 2, | ||
| columns: this.props.fixedRightColumns, | ||
| touchEnabled: this.props.touchEnabled, | ||
| onColumnResize: this.props.onColumnResize, | ||
| onColumnReorder: this.props.onColumnReorder, | ||
| onColumnReorderMove: this.props.onColumnReorderMove, | ||
| onColumnReorderEnd: this.props.onColumnReorderEnd, | ||
| isColumnReordering: this.props.isColumnReordering, | ||
| columnReorderingData: this.props.columnReorderingData, | ||
| rowHeight: this.props.height, | ||
| rowIndex: this.props.index | ||
| }); | ||
| var fixedRightColumnsShdadow = fixedRightColumnsWidth ? this._renderFixedRightColumnsShadow(this.props.width - fixedRightColumnsWidth - 5) : null; | ||
| var scrollableColumns = _React2.default.createElement(_FixedDataTableCellGroup2.default, { | ||
@@ -185,7 +231,9 @@ key: 'scrollable_cells', | ||
| cellGroupWrapperHeight: this.props.cellGroupWrapperHeight, | ||
| align: 'right', | ||
| left: this.props.scrollLeft, | ||
| offsetLeft: fixedColumnsWidth, | ||
| width: this.props.width - fixedColumnsWidth, | ||
| width: this.props.width - fixedColumnsWidth - fixedRightColumnsWidth, | ||
| zIndex: 0, | ||
| columns: this.props.scrollableColumns, | ||
| touchEnabled: this.props.touchEnabled, | ||
| onColumnResize: this.props.onColumnResize, | ||
@@ -217,3 +265,3 @@ onColumnReorder: this.props.onColumnReorder, | ||
| onMouseUp: this.props.onMouseUp ? this._onMouseUp : null, | ||
| onMouseEnter: this.props.onMouseEnter ? this._onMouseEnter : null, | ||
| onMouseEnter: this.props.onMouseEnter || this.props.onMouseLeave ? this._onMouseEnter : null, | ||
| onMouseLeave: this.props.onMouseLeave ? this._onMouseLeave : null, | ||
@@ -229,3 +277,5 @@ onTouchStart: this.props.onTouchStart ? this._onTouchStart : null, | ||
| scrollableColumns, | ||
| columnsLeftShadow | ||
| columnsLeftShadow, | ||
| fixedRightColumns, | ||
| fixedRightColumnsShdadow | ||
| ), | ||
@@ -257,2 +307,7 @@ rowExpanded && _React2.default.createElement( | ||
| /** | ||
| * Array of <FixedDataTableColumn /> for the fixed columns positioned at end of the table. | ||
| */ | ||
| fixedRightColumns: _propTypes2.default.array.isRequired, | ||
| /** | ||
| * Height of the row. | ||
@@ -342,3 +397,5 @@ */ | ||
| */ | ||
| onColumnReorderEnd: _propTypes2.default.func | ||
| onColumnReorderEnd: _propTypes2.default.func, | ||
| touchEnabled: _propTypes2.default.bool | ||
| }; | ||
@@ -345,0 +402,0 @@ |
| { | ||
| "name": "fixed-data-table-2", | ||
| "version": "0.8.3", | ||
| "version": "0.8.4", | ||
| "description": "A React table component designed to allow presenting thousands of rows of data.", | ||
@@ -5,0 +5,0 @@ "main": "main.js", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.73%
1466732
- Number of package files
- increased by1.64%
124
- Lines of code
- increased by2.19%
21138
No dependency changes