react-sticky-table - npm Package Compare versions

Comparing version 3.1.1 to 4.0.0

dist/__tests__/index.js

@@ -28,4 +28,4 @@ (function (global, factory) {
         stickyColumnCount: 1
-      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'header 1'), _react["default"].createElement(_index.Cell, null, 'header 2')), _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'column 1 cell'), _react["default"].createElement(_index.Cell, null, 'column 2 cell'))));
-      (0, _chai.expect)(table.find('.sticky-table-cell')).to.have.length(4);
+      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "header 1"), _react["default"].createElement(_index.Cell, null, "header 2")), _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "column 1 cell"), _react["default"].createElement(_index.Cell, null, "column 2 cell"))));
+      (0, _chai.expect)(table.find(_index.Cell)).to.have.length(4);
     });
@@ -35,4 +35,4 @@ it('shouldn\'t render columns when opting out', function () {
         stickyColumnCount: 0
-      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'header 1'), _react["default"].createElement(_index.Cell, null, 'header 2')), _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'column 1 cell'), _react["default"].createElement(_index.Cell, null, 'column 2 cell'))));
-      (0, _chai.expect)(table.find('.sticky-table-cell')).to.have.length(4);
+      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "header 1"), _react["default"].createElement(_index.Cell, null, "header 2")), _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "column 1 cell"), _react["default"].createElement(_index.Cell, null, "column 2 cell"))));
+      (0, _chai.expect)(table.find(_index.Cell)).to.have.length(4);
     });
@@ -42,4 +42,4 @@ it('should render the correct number of stickyColumnCount', function () {
         stickyColumnCount: 3
-      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'header 1'), _react["default"].createElement(_index.Cell, null, 'header 2'), _react["default"].createElement(_index.Cell, null, 'header 3'), _react["default"].createElement(_index.Cell, null, 'header 4')), _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'column 1 cell'), _react["default"].createElement(_index.Cell, null, 'column 2 cell'), _react["default"].createElement(_index.Cell, null, 'column 3 cell'), _react["default"].createElement(_index.Cell, null, 'column 4 cell'))));
-      (0, _chai.expect)(table.find('.sticky-table-cell')).to.have.length(8);
+      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "header 1"), _react["default"].createElement(_index.Cell, null, "header 2"), _react["default"].createElement(_index.Cell, null, "header 3"), _react["default"].createElement(_index.Cell, null, "header 4")), _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "column 1 cell"), _react["default"].createElement(_index.Cell, null, "column 2 cell"), _react["default"].createElement(_index.Cell, null, "column 3 cell"), _react["default"].createElement(_index.Cell, null, "column 4 cell"))));
+      (0, _chai.expect)(table.find(_index.Cell)).to.have.length(8);
     });
@@ -50,4 +50,4 @@ it('shouldn\'t render headers when opting out', function () {
         stickyHeaderCount: 0
-      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'header 1'), _react["default"].createElement(_index.Cell, null, 'header 2')), _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'column 1 cell'), _react["default"].createElement(_index.Cell, null, 'column 2 cell'))));
-      (0, _chai.expect)(table.find('.sticky-table-cell')).to.have.length(4);
+      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "header 1"), _react["default"].createElement(_index.Cell, null, "header 2")), _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "column 1 cell"), _react["default"].createElement(_index.Cell, null, "column 2 cell"))));
+      (0, _chai.expect)(table.find(_index.Cell)).to.have.length(4);
     });
@@ -57,8 +57,8 @@ it('should support sibling components and arrays', function () {
         stickyColumnCount: 1
-      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, 'header 1'), [_react["default"].createElement(_index.Cell, {
+      }, _react["default"].createElement(_index.Row, null, _react["default"].createElement(_index.Cell, null, "header 1"), [_react["default"].createElement(_index.Cell, {
         key: 1
-      }, 'header 2')])));
-      (0, _chai.expect)(table.find('.sticky-table-cell')).to.have.length(2);
+      }, "header 2")])));
+      (0, _chai.expect)(table.find(_index.Cell)).to.have.length(2);
     });
   });
 });

dist/index.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "prop-types", "./Table", "./Row", "./Cell"], factory);
+    define(["exports", "react", "styled-components"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("prop-types"), require("./Table"), require("./Row"), require("./Cell"));
+    factory(exports, require("react"), require("styled-components"));
   } else {
@@ -10,6 +10,6 @@ var mod = {
     };
-    factory(mod.exports, global.react, global.propTypes, global.Table, global.Row, global.Cell);
+    factory(mod.exports, global.react, global.styledComponents);
     global.index = mod.exports;
   }
-})(this, function (_exports, _react, _propTypes, _Table, _Row, _Cell) {
+})(this, function (_exports, _react, _styledComponents) {
   "use strict";
@@ -20,110 +20,98 @@
   });
-  Object.defineProperty(_exports, "Table", {
-    enumerable: true,
-    get: function get() {
-      return _Table["default"];
-    }
-  });
-  Object.defineProperty(_exports, "Row", {
-    enumerable: true,
-    get: function get() {
-      return _Row["default"];
-    }
-  });
-  Object.defineProperty(_exports, "Cell", {
-    enumerable: true,
-    get: function get() {
-      return _Cell["default"];
-    }
-  });
-  _exports.StickyTable = void 0;
-  _react = _interopRequireWildcard(_react);
-  _propTypes = _interopRequireDefault(_propTypes);
-  _Table = _interopRequireDefault(_Table);
-  _Row = _interopRequireDefault(_Row);
-  _Cell = _interopRequireDefault(_Cell);
+  _exports.StickyTable = StickyTable;
+  _exports.Cell = _exports.Row = _exports.Table = void 0;
+  _react = _interopRequireDefault(_react);
+  _styledComponents = _interopRequireDefault(_styledComponents);
 
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+  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); } }
+  function _templateObject4() {
+    var data = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: auto;\n  height: 100%;\n  box-sizing: border-box;\n\n  & ", ":nth-child(", ") ", " {\n    position: -webkit-sticky;\n    position: sticky;\n    top: 0;\n    z-index: 2;\n  }\n\n  & ", " ", ":nth-child(-n+", ") {\n    position: -webkit-sticky;\n    position: sticky;\n    left: 0;\n    z-index: 2;\n  }\n  & ", ":nth-child(-n+", ") ", ":nth-child(-n+", ") {\n    position: -webkit-sticky;\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 3;\n\n    &:first-child {\n      border-right: 2px solid #e5e5e5;\n    }\n  }\n"]);
 
-  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+    _templateObject4 = function _templateObject4() {
+      return data;
+    };
 
-  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+    return data;
+  }
 
-  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+  function _templateObject3() {
+    var data = _taggedTemplateLiteral(["\n  display: table-cell;\n  box-sizing: border-box;\n\n  padding: 0.5rem 0.75rem;\n  border-bottom: 2px solid #e5e5e5;\n  background-color: #fff;\n"]);
 
-  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+    _templateObject3 = function _templateObject3() {
+      return data;
+    };
 
-  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); }
+    return data;
+  }
 
-  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+  function _templateObject2() {
+    var data = _taggedTemplateLiteral(["\n  display: table-row;\n\n  & ", ":first-child {\n    border-right: 2px solid #e5e5e5;\n  }\n"]);
 
-  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    _templateObject2 = function _templateObject2() {
+      return data;
+    };
 
-  var index = 0;
-  /**
-   * StickyTable Component
-   * Responsive, dynamically sized fixed headers and columns for tables
-   * ------------------------------------------------------------------
-   * Intentionally not setting state because we don't want to require
-   * a full re-render every time the user scrolls or changes the
-   * width of a cell.
-   */
+    return data;
+  }
 
-  var StickyTable =
-  /*#__PURE__*/
-  function (_PureComponent) {
-    _inherits(StickyTable, _PureComponent);
+  function _templateObject() {
+    var data = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  display: table;\n  box-sizing: border-box;\n"]);
 
-    function StickyTable(props) {
-      var _this;
+    _templateObject = function _templateObject() {
+      return data;
+    };
 
-      _classCallCheck(this, StickyTable);
+    return data;
+  }
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(StickyTable).call(this, props));
-      _this.index = index = index + 1;
-      return _this;
-    }
-    /**
-     * Get the column and header to render
-     * @returns {undefined}
-     */
+  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+  var Table = (0, _styledComponents["default"])('div').attrs({
+    className: 'sticky-table-table'
+  })(_templateObject());
+  _exports.Table = Table;
+  Table.displayName = 'Table';
+  var Row = (0, _styledComponents["default"])('div').attrs({
+    className: 'sticky-table-row'
+  })(_templateObject2(), Cell);
+  _exports.Row = Row;
+  Row.displayName = 'Row';
+  var Cell = (0, _styledComponents["default"])('div').attrs({
+    className: 'sticky-table-cell'
+  })(_templateObject3());
+  _exports.Cell = Cell;
+  Cell.displayName = 'Cell';
+  var Wrapper = (0, _styledComponents["default"])('div').attrs({
+    className: 'sticky-table'
+  })(_templateObject4(), Row, function (props) {
+    return "-n+".concat(props.stickyHeaderCount);
+  }, Cell, Row, Cell, function (props) {
+    return props.stickyColumnCount;
+  }, Row, function (props) {
+    return props.stickyHeaderCount;
+  }, Cell, function (props) {
+    return props.stickyColumnCount;
+  });
+  Wrapper.displayName = 'Wrapper';
 
-    _createClass(StickyTable, [{
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-            stickyColumnCount = _this$props.stickyColumnCount,
-            stickyHeaderCount = _this$props.stickyHeaderCount;
-        stickyColumnCount = Math.min(stickyColumnCount, 1);
-        stickyHeaderCount = Math.min(stickyHeaderCount, 1);
-        return _react["default"].createElement("div", {
-          className: ['sticky-table', "sticky-table-".concat(this.index), this.props.className || ''].join(' ')
-        }, _react["default"].createElement("style", null, "\n            .sticky-table-".concat(this.index, " .sticky-table-row:nth-child(-n+").concat(stickyHeaderCount, ") .sticky-table-cell {\n              position: -webkit-sticky;\n              position: sticky;\n              top: 0;\n              z-index: 2;\n            }\n            .sticky-table-").concat(this.index, " .sticky-table-row .sticky-table-cell:nth-child(-n+").concat(stickyColumnCount, ") {\n              position: -webkit-sticky;\n              position: sticky;\n              left: 0;\n              z-index: 2;\n            }\n            .sticky-table-").concat(this.index, " .sticky-table-row:nth-child(-n+").concat(stickyHeaderCount, ") .sticky-table-cell:nth-child(-n+").concat(stickyColumnCount, ") {\n              position: -webkit-sticky;\n              position: sticky;\n              top: 0;\n              left: 0;\n              z-index: 3;\n            }\n          ")), _react["default"].createElement(_Table["default"], null, this.props.children));
-      }
-    }]);
+  function StickyTable(_ref) {
+    var _ref$stickyColumnCoun = _ref.stickyColumnCount,
+        stickyColumnCount = _ref$stickyColumnCoun === void 0 ? 1 : _ref$stickyColumnCoun,
+        _ref$stickyHeaderCoun = _ref.stickyHeaderCount,
+        stickyHeaderCount = _ref$stickyHeaderCoun === void 0 ? 1 : _ref$stickyHeaderCoun,
+        children = _ref.children,
+        rest = _objectWithoutProperties(_ref, ["stickyColumnCount", "stickyHeaderCount", "children"]);
 
-    return StickyTable;
-  }(_react.PureComponent);
-
-  _exports.StickyTable = StickyTable;
-
-  _defineProperty(StickyTable, "propTypes", {
-    stickyHeaderCount: _propTypes["default"].number,
-    stickyColumnCount: _propTypes["default"].number,
-    onScroll: _propTypes["default"].func
-  });
-
-  _defineProperty(StickyTable, "defaultProps", {
-    stickyHeaderCount: 1,
-    stickyColumnCount: 1
-  });
+    return _react["default"].createElement(Wrapper, _extends({
+      stickyColumnCount: stickyColumnCount,
+      stickyHeaderCount: stickyHeaderCount
+    }, rest), _react["default"].createElement(Table, null, children));
+  }
 });

package.json

 {
   "name": "react-sticky-table",
   "description": "Dynamically sized fixed header and columns for tables",
-  "version": "3.1.1",
+  "version": "4.0.0",
   "author": "Henrybuilt",
@@ -9,3 +9,5 @@ "bugs": {
   },
-  "dependencies": {},
+  "dependencies": {
+    "styled-components": "^4.3.2"
+  },
   "devDependencies": {
@@ -71,4 +73,3 @@ "@babel/cli": "7.4.4",
   "scripts": {
-    "build": "npm run build-js && npm run build-css",
-    "build-css": "cat src/**/*.css src/*.css > dist/react-sticky-table.css",
+    "build": "npm run build-js",
     "build-js": "babel --plugins '@babel/plugin-transform-modules-umd' src --ignore __tests__ --out-dir ./dist",
@@ -75,0 +76,0 @@ "build-storybook": "build-storybook -o ./docs",

src/__tests__/index.js

@@ -16,8 +16,8 @@ import React from 'react';
         <Row>
-          <Cell>{'header 1'}</Cell>
-          <Cell>{'header 2'}</Cell>
+          <Cell>header 1</Cell>
+          <Cell>header 2</Cell>
         </Row>
         <Row>
-          <Cell>{'column 1 cell'}</Cell>
-          <Cell>{'column 2 cell'}</Cell>
+          <Cell>column 1 cell</Cell>
+          <Cell>column 2 cell</Cell>
         </Row>
@@ -27,3 +27,3 @@ </StickyTable>
 
-    expect(table.find('.sticky-table-cell')).to.have.length(4);
+    expect(table.find(Cell)).to.have.length(4);
   });
@@ -35,8 +35,8 @@
         <Row>
-          <Cell>{'header 1'}</Cell>
-          <Cell>{'header 2'}</Cell>
+          <Cell>header 1</Cell>
+          <Cell>header 2</Cell>
         </Row>
         <Row>
-          <Cell>{'column 1 cell'}</Cell>
-          <Cell>{'column 2 cell'}</Cell>
+          <Cell>column 1 cell</Cell>
+          <Cell>column 2 cell</Cell>
         </Row>
@@ -46,3 +46,3 @@ </StickyTable>
 
-    expect(table.find('.sticky-table-cell')).to.have.length(4);
+    expect(table.find(Cell)).to.have.length(4);
   });
@@ -54,12 +54,12 @@
         <Row>
-          <Cell>{'header 1'}</Cell>
-          <Cell>{'header 2'}</Cell>
-          <Cell>{'header 3'}</Cell>
-          <Cell>{'header 4'}</Cell>
+          <Cell>header 1</Cell>
+          <Cell>header 2</Cell>
+          <Cell>header 3</Cell>
+          <Cell>header 4</Cell>
         </Row>
         <Row>
-          <Cell>{'column 1 cell'}</Cell>
-          <Cell>{'column 2 cell'}</Cell>
-          <Cell>{'column 3 cell'}</Cell>
-          <Cell>{'column 4 cell'}</Cell>
+          <Cell>column 1 cell</Cell>
+          <Cell>column 2 cell</Cell>
+          <Cell>column 3 cell</Cell>
+          <Cell>column 4 cell</Cell>
         </Row>
@@ -69,3 +69,3 @@ </StickyTable>
 
-    expect(table.find('.sticky-table-cell')).to.have.length(8);
+    expect(table.find(Cell)).to.have.length(8);
   });
@@ -77,8 +77,8 @@
         <Row>
-          <Cell>{'header 1'}</Cell>
-          <Cell>{'header 2'}</Cell>
+          <Cell>header 1</Cell>
+          <Cell>header 2</Cell>
         </Row>
         <Row>
-          <Cell>{'column 1 cell'}</Cell>
-          <Cell>{'column 2 cell'}</Cell>
+          <Cell>column 1 cell</Cell>
+          <Cell>column 2 cell</Cell>
         </Row>
@@ -88,3 +88,3 @@ </StickyTable>
 
-    expect(table.find('.sticky-table-cell')).to.have.length(4);
+    expect(table.find(Cell)).to.have.length(4);
   });
@@ -96,4 +96,4 @@
         <Row>
-          <Cell>{'header 1'}</Cell>
-          {[<Cell key={1}>{'header 2'}</Cell>]}
+          <Cell>header 1</Cell>
+          {[<Cell key={1}>header 2</Cell>]}
         </Row>
@@ -103,4 +103,4 @@ </StickyTable>
 
-    expect(table.find('.sticky-table-cell')).to.have.length(2);
+    expect(table.find(Cell)).to.have.length(2);
   });
 });

src/index.js

@@ -1,79 +0,94 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
 
-import Table from './Table';
-import Row from './Row';
-import Cell from './Cell';
+const Table = styled('div').attrs({
+  className: 'sticky-table-table'
+})`
+  white-space: nowrap;
+  display: table;
+  box-sizing: border-box;
+`;
 
-var index = 0;
+Table.displayName = 'Table';
 
-/**
- * StickyTable Component
- * Responsive, dynamically sized fixed headers and columns for tables
- * ------------------------------------------------------------------
- * Intentionally not setting state because we don't want to require
- * a full re-render every time the user scrolls or changes the
- * width of a cell.
- */
-class StickyTable extends PureComponent {
-  static propTypes = {
-    stickyHeaderCount: PropTypes.number,
-    stickyColumnCount: PropTypes.number,
-    onScroll: PropTypes.func
-  };
+const Row = styled('div').attrs({
+  className: 'sticky-table-row'
+})`
+  display: table-row;
 
-  static defaultProps = {
-    stickyHeaderCount: 1,
-    stickyColumnCount: 1
-  };
+  & ${Cell}:first-child {
+    border-right: 2px solid #e5e5e5;
+  }
+`;
 
-  constructor(props) {
-    super(props);
+Row.displayName = 'Row';
 
-    this.index = index = index + 1;
+const Cell = styled('div').attrs({
+  className: 'sticky-table-cell'
+})`
+  display: table-cell;
+  box-sizing: border-box;
+
+  padding: 0.5rem 0.75rem;
+  border-bottom: 2px solid #e5e5e5;
+  background-color: #fff;
+`;
+
+Cell.displayName = 'Cell';
+
+const Wrapper = styled('div').attrs({
+  className: 'sticky-table'
+})`
+  position: relative;
+  overflow: auto;
+  height: 100%;
+  box-sizing: border-box;
+
+  & ${Row}:nth-child(${props => `-n+${props.stickyHeaderCount}`}) ${Cell} {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 2;
   }
 
-  /**
-   * Get the column and header to render
-   * @returns {undefined}
-   */
-  render() {
-    var {stickyColumnCount, stickyHeaderCount} = this.props;
+  & ${Row} ${Cell}:nth-child(-n+${props => props.stickyColumnCount}) {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    z-index: 2;
+  }
+  & ${Row}:nth-child(-n+${props =>
+  props.stickyHeaderCount}) ${Cell}:nth-child(-n+${props =>
+  props.stickyColumnCount}) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 3;
 
-    stickyColumnCount = Math.min(stickyColumnCount, 1);
-    stickyHeaderCount = Math.min(stickyHeaderCount, 1);
+    &:first-child {
+      border-right: 2px solid #e5e5e5;
+    }
+  }
+`;
 
-    return (
-      <div className={['sticky-table', `sticky-table-${this.index}`, this.props.className || ''].join(' ')}>
-        <style>
-          {`
-            .sticky-table-${this.index} .sticky-table-row:nth-child(-n+${stickyHeaderCount}) .sticky-table-cell {
-              position: -webkit-sticky;
-              position: sticky;
-              top: 0;
-              z-index: 2;
-            }
-            .sticky-table-${this.index} .sticky-table-row .sticky-table-cell:nth-child(-n+${stickyColumnCount}) {
-              position: -webkit-sticky;
-              position: sticky;
-              left: 0;
-              z-index: 2;
-            }
-            .sticky-table-${this.index} .sticky-table-row:nth-child(-n+${stickyHeaderCount}) .sticky-table-cell:nth-child(-n+${stickyColumnCount}) {
-              position: -webkit-sticky;
-              position: sticky;
-              top: 0;
-              left: 0;
-              z-index: 3;
-            }
-          `}
-        </style>
-        <Table>
-          {this.props.children}
-        </Table>
-      </div>
-    );
-  }
+Wrapper.displayName = 'Wrapper';
+
+function StickyTable({
+  stickyColumnCount = 1,
+  stickyHeaderCount = 1,
+  children,
+  ...rest
+}) {
+  return (
+    <Wrapper
+      stickyColumnCount={stickyColumnCount}
+      stickyHeaderCount={stickyHeaderCount}
+      {...rest}
+    >
+      <Table>{children}</Table>
+    </Wrapper>
+  );
 }
 
-export {StickyTable, Table, Row, Cell};
+export { StickyTable, Table, Row, Cell };

stories/ChangingContent/index.js

@@ -1,6 +0,6 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import { StickyTable, Row, Cell } from '../../src';
+import { StickyTable, Row, Cell } from "../../src";
 
-import Button from '../Button';
+import Button from "../Button";
 
@@ -18,3 +18,3 @@ export default class ChangingContent extends Component {
       for (var c = 0; c < 20; c++) {
-        cells.push(<Cell key={c}>{(r === 0 ? 'Header ' : 'Cell ') + c}</Cell>);
+        cells.push(<Cell key={c}>{(r === 0 ? "Header " : "Cell ") + c}</Cell>);
       }
@@ -27,3 +27,3 @@
       rows: rows
-    }
+    };
   }
@@ -39,3 +39,5 @@
       for (var c = 0; c < 20; c++) {
-        cells.push(<Cell key={c}>{(r === 0 ? 'New Header ' : 'Cell ') + c}</Cell>);
+        cells.push(
+          <Cell key={c}>{(r === 0 ? "New Header " : "Cell ") + c}</Cell>
+        );
       }
@@ -46,3 +48,3 @@
 
-    this.setState({rows});
+    this.setState({ rows });
   }
@@ -54,6 +56,6 @@
         <Button onClick={this.changeContent.bind(this)}>Change content</Button>
-        <div style={{width: '100%', height: '200px'}}>
-          <StickyTable stickyColumnCount={0}>
-            {this.state.rows}
-          </StickyTable>
+        <br />
+        <br />
+        <div style={{ width: "100%", height: "200px" }}>
+          <StickyTable stickyColumnCount={0}>{this.state.rows}</StickyTable>
         </div>
@@ -60,0 +62,0 @@ </div>

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

Worsened metrics

Total package byte prevSize

3625086

decreased by-0.63%

Dependency count

4

increased by33.33%

Number of package files

46

decreased by-23.33%

Lines of code

7574

decreased by-5.14%

Dependency changes

• + Addedstyled-components@^4.3.2

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.5(transitive)

• + Added@babel/core@7.26.0(transitive)

• + Added@babel/generator@7.26.5(transitive)

• + Added@babel/helper-annotate-as-pure@7.25.9(transitive)

• + Added@babel/helper-compilation-targets@7.26.5(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.26.5(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.0(transitive)

• + Added@babel/parser@7.26.5(transitive)

• + Added@babel/plugin-syntax-jsx@7.25.9(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.26.5(transitive)

• + Added@babel/types@7.26.5(transitive)

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.4(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001692(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@2.3.2(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addedelectron-to-chromium@1.5.80(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedis-what@3.14.1(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedmemoize-one@5.2.1(transitive)

• + Addedmerge-anything@2.4.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedstyled-components@4.4.1(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedupdate-browserslist-db@1.1.2(transitive)

• + Addedyallist@3.1.1(transitive)