react-base-table - npm Package Compare versions

Comparing version 1.6.5 to 1.7.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG
 
+## v1.7.0 (2019-08-06)
+
+- chore: remove the use of `Object.values`
+- feat: add `getColumnManager` and `getDOMNode` methods
+
 ## v1.6.5 (2019-07-11)
@@ -7,0 +12,0 @@

es/BaseTable.js

@@ -64,2 +64,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
     _this.columnManager = new ColumnManager(columns || normalizeColumns(children), props.fixed);
+    _this._setContainerRef = _this._setContainerRef.bind(_assertThisInitialized(_this));
     _this._setMainTableRef = _this._setMainTableRef.bind(_assertThisInitialized(_this));
@@ -103,3 +104,3 @@ _this._setLeftTableRef = _this._setLeftTableRef.bind(_assertThisInitialized(_this));
   /**
-   * Get the expanded state, fallback to normal state if not expandable.
+   * Get the DOM node of the table
    */
@@ -110,2 +111,18 @@
 
+  _proto.getDOMNode = function getDOMNode() {
+    return this.tableNode;
+  }
+  /**
+   * Get the column manager
+   */
+  ;
+
+  _proto.getColumnManager = function getColumnManager() {
+    return this.columnManager;
+  }
+  /**
+   * Get the expanded state, fallback to normal state if not expandable.
+   */
+  ;
+
   _proto.getExpandedState = function getExpandedState() {
@@ -190,13 +207,10 @@ return {
    * You can control the alignment of the row though by specifying an align property. Acceptable values are:
-   * 
+   *
    * - `auto` (default) - Scroll as little as possible to ensure the row is visible.
-   *  (If the row is already visible, it won't scroll at all.)
-   * - `smart` - If the row is already visible, don't scroll at all. If it is less than one viewport away,
-   *  scroll as little as possible so that it becomes visible. 
-   *  If it is more than one viewport away, scroll so that it is centered within the grid.
+   * - `smart` - Same as `auto` if it is less than one viewport away, or it's the same as`center`.
    * - `center` - Center align the row within the table.
-   * - `end` - Align the row to the bottom, right hand side of the table.
-   * - `start` - Align the row to the top, left hand of the table.
-    * @param {number} rowIndex 
-   * @param {string} align 
+   * - `end` - Align the row to the bottom side of the table.
+   * - `start` - Align the row to the top side of the table.
+    * @param {number} rowIndex
+   * @param {string} align
    */
@@ -217,2 +231,3 @@ ;
     this.rightTable && this.rightTable.scrollToRow(rowIndex, align);
+    this.scrollToLeft(0);
   }
@@ -725,2 +740,3 @@ /**
     return React.createElement("div", {
+      ref: this._setContainerRef,
       className: cls,
@@ -774,2 +790,6 @@ style: containerStyle
 
+  _proto._setContainerRef = function _setContainerRef(ref) {
+    this.tableNode = ref;
+  };
+
   _proto._setMainTableRef = function _setMainTableRef(ref) {
@@ -776,0 +796,0 @@ this.table = ref;

es/Column.js

@@ -68,3 +68,3 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
    */
-  align: PropTypes.oneOf(Object.values(Alignment)),
+  align: PropTypes.oneOf(['left', 'center', 'right']),
 
@@ -99,3 +99,3 @@ /**
    */
-  frozen: PropTypes.oneOf(Object.values(FrozenDirection)),
+  frozen: PropTypes.oneOf(['left', 'right', true, false]),
 
@@ -102,0 +102,0 @@ /**

lib/BaseTable.js

@@ -106,2 +106,3 @@ "use strict";
     _this.columnManager = new _ColumnManager["default"](columns || (0, _utils.normalizeColumns)(children), props.fixed);
+    _this._setContainerRef = _this._setContainerRef.bind((0, _assertThisInitialized2["default"])(_this));
     _this._setMainTableRef = _this._setMainTableRef.bind((0, _assertThisInitialized2["default"])(_this));
@@ -145,3 +146,3 @@ _this._setLeftTableRef = _this._setLeftTableRef.bind((0, _assertThisInitialized2["default"])(_this));
   /**
-   * Get the expanded state, fallback to normal state if not expandable.
+   * Get the DOM node of the table
    */
@@ -151,2 +152,20 @@
   (0, _createClass2["default"])(BaseTable, [{
+    key: "getDOMNode",
+    value: function getDOMNode() {
+      return this.tableNode;
+    }
+    /**
+     * Get the column manager
+     */
+
+  }, {
+    key: "getColumnManager",
+    value: function getColumnManager() {
+      return this.columnManager;
+    }
+    /**
+     * Get the expanded state, fallback to normal state if not expandable.
+     */
+
+  }, {
     key: "getExpandedState",
@@ -238,13 +257,10 @@ value: function getExpandedState() {
      * You can control the alignment of the row though by specifying an align property. Acceptable values are:
-     * 
+     *
      * - `auto` (default) - Scroll as little as possible to ensure the row is visible.
-     *  (If the row is already visible, it won't scroll at all.)
-     * - `smart` - If the row is already visible, don't scroll at all. If it is less than one viewport away,
-     *  scroll as little as possible so that it becomes visible. 
-     *  If it is more than one viewport away, scroll so that it is centered within the grid.
+     * - `smart` - Same as `auto` if it is less than one viewport away, or it's the same as`center`.
      * - `center` - Center align the row within the table.
-     * - `end` - Align the row to the bottom, right hand side of the table.
-     * - `start` - Align the row to the top, left hand of the table.
-      * @param {number} rowIndex 
-     * @param {string} align 
+     * - `end` - Align the row to the bottom side of the table.
+     * - `start` - Align the row to the top side of the table.
+      * @param {number} rowIndex
+     * @param {string} align
      */
@@ -260,2 +276,3 @@
       this.rightTable && this.rightTable.scrollToRow(rowIndex, align);
+      this.scrollToLeft(0);
     }
@@ -775,2 +792,3 @@ /**
       return _react["default"].createElement("div", {
+        ref: this._setContainerRef,
         className: cls,
@@ -828,2 +846,7 @@ style: containerStyle
   }, {
+    key: "_setContainerRef",
+    value: function _setContainerRef(ref) {
+      this.tableNode = ref;
+    }
+  }, {
     key: "_setMainTableRef",
@@ -830,0 +853,0 @@ value: function _setMainTableRef(ref) {

lib/Column.js

@@ -90,3 +90,3 @@ "use strict";
    */
-  align: _propTypes["default"].oneOf(Object.values(Alignment)),
+  align: _propTypes["default"].oneOf(['left', 'center', 'right']),
 
@@ -121,3 +121,3 @@ /**
    */
-  frozen: _propTypes["default"].oneOf(Object.values(FrozenDirection)),
+  frozen: _propTypes["default"].oneOf(['left', 'right', true, false]),
 
@@ -124,0 +124,0 @@ /**

package.json

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

README.md

 # react-base-table
 
-BaseTable is a react table component to display large data set with high performance and flexibility
+BaseTable is a react table component to display large datasets with high performance and flexibility
 
-<a href="https://npm.io/react-base-table"><img src="https://badgen.net/npm/license/react-base-table"></a>
-<a href="https://npm.io/react-base-table"><img src="https://badgen.net/npm/v/react-base-table"></a>
-<a href="https://npm.io/react-base-table"><img src="https://badgen.net/npm/dw/react-base-table"></a>
+<a href="https://npm.im/react-base-table"><img src="https://badgen.net/npm/license/react-base-table"></a>
+<a href="https://npm.im/react-base-table"><img src="https://badgen.net/npm/v/react-base-table"></a>
+<a href="https://npm.im/react-base-table"><img src="https://badgen.net/npm/dm/react-base-table"></a>
 <a href="https://bundlephobia.com/result?p=react-base-table"><img src="https://badgen.net/bundlephobia/minzip/react-base-table"></a>
@@ -42,6 +42,10 @@
 
-You can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, take the [playground](https://autodesk.github.io/react-base-table/playground) for example
+If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize example](https://autodesk.github.io/react-base-table/examples/auto-resize)
 
-_You have to polyfill `Array.prototype.findIndex` to make it works on IE_
+## Browser Support
 
+`BaseTable` is well tested on all modern browsers and IE11. _You have to polyfill `Array.prototype.findIndex` to make it works on IE_
+
+**The [examples](https://autodesk.github.io/react-base-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.**
+
 ## Advance
@@ -59,4 +63,3 @@
 
-$table-font-size: $bim-font-size-small;
-$table-border-radius: 4px;
+$table-font-size: 13px;
 $table-padding-left: 15px;
@@ -63,0 +66,0 @@ $table-padding-right: 15px;

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

Total package byte prevSize

818197

increased by0.25%

Lines of code

6160

increased by0.62%

Number of lines in readme file

119

increased by2.59%

No dependency changes