New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-table-hoc-fixed-columns

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-table-hoc-fixed-columns - npm Package Compare versions

Comparing version

0.1.5
to
1.0.0-beta

lib/createForNewBrowsers.js
lib/createForOldBrowsers.js
lib/OldCompatibility.js
lib/withFixedColumn.js
lib/withFixedColumnOldSupport.js
lib/withFixedColumns.js
lib/withFixedColumnsOldSupport.js

451

lib/index.js

@@ -12,2 +12,13 @@ "use strict";

var _uniqid = _interopRequireDefault(require("uniqid"));
var _classnames = _interopRequireDefault(require("classnames"));
var _emotion = require("emotion");
var _templateObject = /*#__PURE__*/ _taggedTemplateLiteral(["\n position: relative;\n z-Index: 2;\n"]),
_templateObject2 = /*#__PURE__*/ _taggedTemplateLiteral(["\n .-header .rt-th,\n .-filters .rt-th,\n .rt-td.", " {\n background-color: #fff;\n }\n\n .-headerGroups .rt-th {\n background-color: #f7f7f7;\n }\n\n .-header .rt-th {\n border-bottom: solid 1px #eee;\n }\n"]),
_templateObject3 = /*#__PURE__*/ _taggedTemplateLiteral(["\n box-shadow: 2px 0px 4px #eee !important;\n border-right: ", ";\n"]),
_templateObject4 = /*#__PURE__*/ _taggedTemplateLiteral(["\n box-shadow: -2px 0px 4px #eee !important;\n border-left: ", ";\n"]);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -21,10 +32,14 @@

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
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); } }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
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, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
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; }

@@ -34,34 +49,62 @@

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
var fixedLeftClassName = '__fixedLeftClassName';
var fixedRightClassName = '__fixedRightClassName';
var fixedClassName = (0, _emotion.css)(_templateObject);
var tableClassName = (0, _emotion.css)(_templateObject2, fixedClassName);
var border = 'solid 1px #ccc !important';
var lastLeftFixedClassName = (0, _emotion.css)(_templateObject3, border);
var lastRightFixedClassName = (0, _emotion.css)(_templateObject4, border);
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var isLeftFixed = function isLeftFixed(column) {
return [true, 'left'].includes(column.fixed);
};
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); } }
var isRightFixed = function isRightFixed(column) {
return column.fixed === 'right';
};
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var sortColumns = function sortColumns(columns) {
return columns.sort(function (a, b) {
if (isLeftFixed(a) && !isLeftFixed(b)) return -1;
if (!isLeftFixed(a) && isLeftFixed(b)) return 1;
if (isRightFixed(a) && !isRightFixed(b)) return 1;
if (!isRightFixed(a) && isRightFixed(b)) return -1;
return 0;
});
};
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, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var getColumnsWithFixed = function getColumnsWithFixed(columns, parentIsfixed, parentIsLastFixed, parentIsFirstFixed) {
return columns.map(function (column, index) {
var fixed = column.fixed || parentIsfixed || false;
var nextColumn = columns[index + 1];
var getFixedColumnId = function getFixedColumnId(id) {
return "__fixedHidden__".concat(id);
};
var _parentIsLastFixed = fixed && parentIsfixed === undefined && nextColumn && !nextColumn.fixed;
var getColumnId = function getColumnId(column) {
return column.id || column.accessor;
};
var isLastFixed = fixed && (parentIsfixed ? [true, 'left'].includes(parentIsfixed) && parentIsLastFixed : true) && (parentIsfixed && !nextColumn || !parentIsfixed && nextColumn && !nextColumn.fixed);
var prevColumn = columns[index - 1];
var styleFixedVisible = {
position: 'absolute',
height: '100%',
backgroundColor: '#fff',
zIndex: 3,
boxShadow: '2px 0px 5px #ddd'
var _parentIsFirstFixed = fixed && parentIsfixed === undefined && prevColumn && !prevColumn.fixed;
var isFirstFixed = fixed && (parentIsfixed ? parentIsfixed === 'right' && parentIsFirstFixed : true) && (parentIsfixed && !prevColumn || !parentIsfixed && prevColumn && !prevColumn.fixed);
return _objectSpread({}, column, {
fixed: fixed,
className: (0, _classnames.default)(column.className, fixed && fixedClassName, isLeftFixed({
fixed: fixed
}) && fixedLeftClassName, isRightFixed({
fixed: fixed
}) && fixedRightClassName, isLastFixed && lastLeftFixedClassName, isFirstFixed && lastRightFixedClassName),
headerClassName: (0, _classnames.default)(column.headerClassName, fixed && fixedClassName, isLeftFixed({
fixed: fixed
}) && fixedLeftClassName, isRightFixed({
fixed: fixed
}) && fixedRightClassName, (_parentIsLastFixed || parentIsLastFixed && isLastFixed) && lastLeftFixedClassName, (_parentIsFirstFixed || parentIsFirstFixed && isFirstFixed) && lastRightFixedClassName),
columns: column.columns && getColumnsWithFixed(column.columns, fixed, _parentIsLastFixed, _parentIsFirstFixed)
});
});
};
var _default = function _default(ReactTable) {
var _class, _temp;
return _temp = _class =
var ReactTableFixedColumns =
/*#__PURE__*/

@@ -71,18 +114,2 @@ function (_React$Component) {

_createClass(ReactTableFixedColumns, null, [{
key: "preparedColumns",
value: function preparedColumns(columns) {
return columns.map(function (column) {
return _objectSpread({}, column, {
width: column.fixed ? column.width || 150 : column.width
});
});
}
}, {
key: "getHeaderGhost",
value: function getHeaderGhost() {
return document.querySelector('.rt-thead.-headerGroups .rt-tr .rt-th');
}
}]);
function ReactTableFixedColumns(props) {

@@ -94,71 +121,9 @@ var _this;

_this = _possibleConstructorReturn(this, (ReactTableFixedColumns.__proto__ || Object.getPrototypeOf(ReactTableFixedColumns)).call(this, props));
_this.state = {
resized: []
};
_this.fixedColumns = [];
_this.onScrollX = function (event) {
if (event.nativeEvent.target.getAttribute('class') !== 'rt-table') return;
var currentScrollLeft = event.nativeEvent.target.scrollLeft;
if (currentScrollLeft !== _this.prevScrollLeft) {
_this.updateLeftPos(currentScrollLeft);
}
_this.calculatePos(event.nativeEvent.target);
};
_this.onResizedChange = function (resized) {
var onResizedChange = _this.props.onResizedChange;
var nextResized = resized.slice();
_this.fixedColumns.forEach(function (_ref) {
var id = _ref.id;
var fixedColumnsResized = nextResized.find(function (resizedItem) {
return resizedItem.id === id;
});
var fixedColumnsHiddenIndex = nextResized.findIndex(function (resizedItem) {
return resizedItem.id === getFixedColumnId(id);
});
if (fixedColumnsResized) {
if (fixedColumnsHiddenIndex !== -1) {
nextResized[fixedColumnsHiddenIndex].value = fixedColumnsResized.value;
} else {
nextResized.push({
id: getFixedColumnId(id),
value: fixedColumnsResized.value
});
}
}
});
_this.setState({
resized: nextResized
}, function () {
nextResized.forEach(function (item) {
var fixedColumn = _this.fixedColumns.find(function (_ref2) {
var id = _ref2.id;
return id === item.id;
});
if (fixedColumn) {
fixedColumn.width = item.value;
}
});
_this.updateHeaderEmptyColWidth();
_this.calculateOffsetLeft();
_this.updateLeftPos();
});
if (onResizedChange) {
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
rest[_key - 1] = arguments[_key];
}
onResizedChange.apply(void 0, [resized].concat(rest));
}
};
_this.onPageSizeChange = function () {

@@ -171,21 +136,13 @@ var onPageSizeChange = _this.props.onPageSizeChange;

_this.updateLeftPos();
_this.updatePos();
};
_this.mergeProps = function (propsKey, args, nextProps) {
var getProps = _this.props[propsKey];
var prevProps = getProps && getProps.apply(void 0, _toConsumableArray(args)) || {};
return _objectSpread({}, prevProps, nextProps, {
style: _objectSpread({}, prevProps.style, nextProps.style)
});
};
_this.onResizedChange = function () {
var onResizedChange = _this.props.onResizedChange;
_this.getColumns = function (columns) {
var hasFixedColumns = !!columns.find(function (_ref3) {
var fixed = _ref3.fixed;
return fixed === true;
});
if (!hasFixedColumns) return columns;
var preparedColumns = ReactTableFixedColumns.preparedColumns(columns);
return _this.processColumns(preparedColumns);
if (onResizedChange) {
onResizedChange.apply(void 0, arguments);
}
_this.calculatePos();
};

@@ -195,72 +152,22 @@

var getProps = _this.props.getProps;
return _objectSpread({}, getProps && getProps.apply(void 0, arguments), {
return _objectSpread({}, getProps && getProps.apply(void 0, arguments), _defineProperty({
onScroll: _this.onScrollX
});
}, _this.tableDataId, true));
};
_this.getTbodyProps = function () {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
var hasGroups = !!props.columns.find(function (column) {
return column.columns;
});
_this.tableDataId = "data-table-".concat((0, _uniqid.default)());
var fixedColumnsWithoutGroup = props.columns.filter(function (column) {
return column.fixed && !column.columns;
}).map(function (_ref) {
var Header = _ref.Header;
return "'".concat(Header, "'");
});
return _this.mergeProps('getTbodyProps', args, {
style: {
zIndex: 1
}
});
};
if (hasGroups && fixedColumnsWithoutGroup.length) {
console.warn(['WARNING react-table-hoc-fixed-column: ReactTable has fixed columns outside groups.', "For a better UI render, place ".concat(fixedColumnsWithoutGroup.join(' and '), " columns into a group (even a group with an empty Header label)")].join('\n\n'));
}
_this.getTdAndThProps = function (key) {
return function () {
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
var column = args[2];
var nextProps = {
'data-colid': getColumnId(column),
style: {}
};
if (column.__fixedHidden) {
nextProps.style.visibility = 'hidden';
} else if (column.__fixedVisible) {
nextProps.style = _objectSpread({}, styleFixedVisible);
nextProps['data-fixedvisible'] = true;
}
if (column.__extraTdPropsStyle) {
nextProps.style.left = column.__extraTdPropsStyle.left;
}
return _this.mergeProps(key, args, nextProps);
};
};
_this.getTrProps = function (key) {
return function () {
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
args[_key4] = arguments[_key4];
}
return _this.mergeProps(key, args, {
style: {
position: 'relative'
}
});
};
};
_this.innerRef = function (c) {
var innerRef = _this.props.innerRef;
if (innerRef) {
innerRef(c);
}
};
_this.hasFixedColumns = !!props.columns.find(function (_ref4) {
var fixed = _ref4.fixed;
return fixed === true;
});
return _this;

@@ -272,125 +179,55 @@ }

value: function componentDidMount() {
if (this.hasFixedColumns) {
this.updateHeaderEmptyColWidth();
this.calculateOffsetLeft();
}
this.tableRef = document.querySelector("[".concat(this.tableDataId, "] .rt-table"));
this.calculatePos();
this.leftFixedCells = this.tableRef.querySelectorAll(".".concat(fixedLeftClassName));
this.rightFixedCells = this.tableRef.querySelectorAll(".".concat(fixedRightClassName));
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.loading && !this.props.loading) {
this.updateHeaderEmptyColWidth();
}
key: "calculatePos",
value: function calculatePos() {
var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.tableRef;
var scrollLeft = target.scrollLeft,
scrollWidth = target.scrollWidth,
offsetWidth = target.offsetWidth;
this.nextTranslateLeftX = scrollLeft;
this.nextTranslateRightX = scrollWidth - scrollLeft - offsetWidth;
this.updatePos(target);
}
}, {
key: "updateHeaderEmptyColWidth",
value: function updateHeaderEmptyColWidth() {
var $offsetEl = ReactTableFixedColumns.getHeaderGhost();
if (this.hasFixedColumns && $offsetEl) {
var width = Array.from(document.querySelectorAll('.rt-thead.-header [data-fixedvisible="true"]')).map(function ($el) {
return $el.offsetWidth;
}).reduce(function (a, b) {
return a + b;
}, 0);
$offsetEl.style.marginLeft = "-".concat(width, "px");
}
}
}, {
key: "updateLeftPos",
value: function updateLeftPos() {
key: "updatePos",
value: function updatePos(target) {
var _this2 = this;
var currentScrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.prevScrollLeft || 0;
Array.from(document.querySelectorAll('[data-fixedvisible="true"]')).forEach(function ($el) {
var colId = $el.getAttribute('data-colid');
var _this2$fixedColumns$f = _this2.fixedColumns.find(function (_ref5) {
var id = _ref5.id;
return id === colId;
}),
offsetLeft = _this2$fixedColumns$f.offsetLeft;
var left = offsetLeft + currentScrollLeft;
$el.style.left = "".concat(left, "px"); // eslint-disable-line
/* eslint-disable no-param-reassign */
target.querySelectorAll(".".concat(fixedLeftClassName)).forEach(function (td) {
td.style.transform = "translate3d(".concat(_this2.nextTranslateLeftX, "px, 0, 0)");
});
this.prevScrollLeft = currentScrollLeft;
target.querySelectorAll(".".concat(fixedRightClassName)).forEach(function (td) {
td.style.transform = "translate3d(".concat(-_this2.nextTranslateRightX, "px, 0, 0)");
});
/* eslint-enable no-param-reassign */
}
}, {
key: "calculateOffsetLeft",
value: function calculateOffsetLeft() {
for (var i = 0; i < this.fixedColumns.length; i += 1) {
if (i > 0) {
var prev = this.fixedColumns[i - 1];
this.fixedColumns[i].offsetLeft = prev.offsetLeft + prev.width;
}
}
key: "getColumns",
value: function getColumns() {
var columns = this.props.columns;
var sortedColumns = sortColumns(columns);
var columnsWithFixed = getColumnsWithFixed(sortedColumns);
return columnsWithFixed;
}
}, {
key: "processColumns",
value: function processColumns(columns) {
var _this3 = this;
var columnFixedOffset = 0;
return columns.map(function (column) {
var nextColumn = _objectSpread({}, column, {
columns: column.columns && _this3.processColumns(column.columns)
});
var columnId = getColumnId(nextColumn);
if (nextColumn.fixed) {
var output = [_objectSpread({}, nextColumn, {
width: nextColumn.width || 200,
__fixedVisible: true,
__extraTdPropsStyle: {
left: columnFixedOffset
}
}), _objectSpread({}, nextColumn, {
width: nextColumn.width || 200,
__fixedHidden: true,
id: getFixedColumnId(columnId)
})];
if (!_this3.fixedColumns.find(function (_ref6) {
var id = _ref6.id;
return id === columnId;
})) {
_this3.fixedColumns.push({
id: columnId,
width: nextColumn.width,
offsetLeft: columnFixedOffset
});
}
columnFixedOffset += nextColumn.width;
return output;
}
return [nextColumn];
}).reduce(function (a, b) {
return _toConsumableArray(a).concat(_toConsumableArray(b));
}, []);
}
}, {
key: "render",
value: function render() {
var _props = this.props,
columns = _props.columns,
props = _objectWithoutProperties(_props, ["columns"]);
className = _props.className,
innerRef = _props.innerRef,
props = _objectWithoutProperties(_props, ["className", "innerRef"]);
return _react.default.createElement(ReactTable, _extends({}, props, {
ref: this.innerRef,
columns: this.getColumns(columns),
getTheadTrProps: this.getTrProps('getTheadTrProps'),
getTheadThProps: this.getTdAndThProps('getTheadThProps'),
getTheadFilterTrProps: this.getTrProps('getTheadFilterTrProps'),
getTheadFilterThProps: this.getTdAndThProps('getTheadFilterThProps'),
getTbodyProps: this.getTbodyProps,
getTrProps: this.getTrProps('getTrProps'),
getTdProps: this.getTdAndThProps('getTdProps'),
ref: innerRef,
className: (0, _classnames.default)(className, tableClassName),
columns: this.getColumns(),
getProps: this.getProps,
onResizedChange: this.onResizedChange,
onPageSizeChange: this.onPageSizeChange,
resized: this.state.resized
onResizedChange: this.onResizedChange
}));

@@ -401,28 +238,24 @@ }

return ReactTableFixedColumns;
}(_react.default.Component), _class.propTypes = {
}(_react.default.Component);
ReactTableFixedColumns.propTypes = {
columns: _propTypes.default.array.isRequired,
getTdProps: _propTypes.default.func,
getTheadThProps: _propTypes.default.func,
getProps: _propTypes.default.func,
onResizedChange: _propTypes.default.func,
innerRef: _propTypes.default.func,
className: _propTypes.default.string,
onPageSizeChange: _propTypes.default.func,
innerRef: _propTypes.default.func,
loading: _propTypes.default.bool
}, _class.defaultProps = {
getTdProps: function getTdProps() {
return {};
},
getTheadThProps: function getTheadThProps() {
return {};
},
getProps: function getProps() {
return {};
},
onResizedChange: null,
onResizedChange: _propTypes.default.func
};
ReactTableFixedColumns.defaultProps = {
getTdProps: null,
getProps: null,
innerRef: null,
className: null,
onPageSizeChange: null,
innerRef: null,
loading: false
}, _temp;
onResizedChange: null
};
return ReactTableFixedColumns;
};
exports.default = _default;

7

package.json
{
"name": "react-table-hoc-fixed-columns",
"version": "0.1.5",
"version": "1.0.0-beta",
"description": "ReactTable HOC for fixed columns",

@@ -50,3 +50,8 @@ "main": "lib/index.js",

"url": "git@github.com:guillaumejasmin/react-table-hoc-fixed-columns.git"
},
"dependencies": {
"classnames": "^2.2.6",
"emotion": "^9.2.3",
"uniqid": "^5.0.3"
}
}

29

README.md

@@ -5,3 +5,3 @@

Higher Order Components for [ReactTable](https://react-table.js.org). It make possible to fixed 1 or more columns.
Higher Order Components for [ReactTable](https://react-table.js.org). It make possible to fixed one or more columns on the left and/or on the right.

@@ -16,9 +16,11 @@ [Demo here](https://guillaumejasmin.github.io/react-table-hoc-fixed-columns/)

It's really simple: add `fixed` property to your columns:
It's really simple: add `fixed` property to your columns with value `left` and `right`
*Note:* for migration to `v0.1.x` to `v1.x.x` , `fixed: true` is equivalent to `fixed: left`, no need to change the value.
```js
import ReactTable from 'react-table';
import createTable from 'react-table-hoc-fixed-columns';
const ReactTableFixedColumns = createTable(ReactTable);
import withFixedColumns from 'react-table-hoc-fixed-columns';
const ReactTableFixedColumns = withFixedColumns(ReactTable);
...

@@ -33,3 +35,3 @@ render () {

accessor: 'firstName',
fixed: true,
fixed: 'left',
},

@@ -39,14 +41,10 @@ {

accessor: 'lastName',
fixed: true,
fixed: 'left',
},
...
{
Header: 'age',
accessor: 'age',
},
{
Header: 'other',
columns: [
...
]
},
fixed: 'right',
}
]}

@@ -61,6 +59,5 @@ />

* animation is not always smooth, it depend on your browser, OS, and scroll trigger (mouse wheel or scroll bar), but it works.
* fixed columns must be placed a the index 0
* fixed columns cannot be placed in a group
* fixed columns works on simple column or groups
* fixed columns are resizable
* fixed columns must have a hardcoded `width`, by default it's 150
* works with differents cell height

@@ -67,0 +64,0 @@