rc-table - npm Package Compare versions

Comparing version 3.8.0 to 3.9.0

HISTORY.md

 # History
 ----
 
+## 3.9.0 / 2016-01-19
+
+- support pinned and paging columns.
+
+## 3.8.0
+
+- Add `onRowClick`
+
+## 3.7.0
+
+- Add `childenIndent`
+
 ## 3.6.0 / 2015-11-11
@@ -5,0 +17,0 @@

lib/Table.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
 var Table = _react2['default'].createClass({
@@ -37,3 +41,5 @@ displayName: 'Table',
     indentSize: _react2['default'].PropTypes.number,
-    onRowClick: _react2['default'].PropTypes.func
+    onRowClick: _react2['default'].PropTypes.func,
+    columnsPageRange: _react2['default'].PropTypes.array,
+    columnsPageSize: _react2['default'].PropTypes.number
   },
@@ -62,3 +68,4 @@
       childrenColumnName: 'children',
-      indentSize: 15
+      indentSize: 15,
+      columnsPageSize: 5
     };
@@ -71,3 +78,4 @@ },
       expandedRowKeys: props.expandedRowKeys || props.defaultExpandedRowKeys,
-      data: this.props.data
+      data: this.props.data,
+      currentColumnsPage: 0
     };
@@ -137,3 +145,3 @@ },
     }
-    ths = ths.concat(this.props.columns);
+    ths = ths.concat(this.getCurrentColumns());
     return ths.map(function (c) {
@@ -150,11 +158,7 @@ if (c.colSpan !== 0) {
 
-  getExpandedRow: function getExpandedRow(key2, content, visible, className) {
-    var key = key2;
+  getExpandedRow: function getExpandedRow(key, content, visible, className) {
     var prefixCls = this.props.prefixCls;
-    if (key) {
-      key += '-extra-row';
-    }
     return _react2['default'].createElement(
       'tr',
-      { key: key, style: { display: visible ? '' : 'none' }, className: prefixCls + '-expanded-row ' + className },
+      { key: key + '-extra-row', style: { display: visible ? '' : 'none' }, className: prefixCls + '-expanded-row ' + className },
       this.props.expandIconAsCell ? _react2['default'].createElement('td', { key: 'rc-table-expand-icon-placeholder' }) : '',
@@ -171,3 +175,3 @@ _react2['default'].createElement(
     var props = this.props;
-    var columns = props.columns;
+    var columns = this.getCurrentColumns();
     var childrenColumnName = props.childrenColumnName;
@@ -244,2 +248,93 @@ var expandedRowRender = props.expandedRowRender;
 
+  getCurrentColumns: function getCurrentColumns() {
+    var _this = this;
+
+    var _props = this.props;
+    var columns = _props.columns;
+    var columnsPageRange = _props.columnsPageRange;
+    var columnsPageSize = _props.columnsPageSize;
+    var prefixCls = _props.prefixCls;
+    var currentColumnsPage = this.state.currentColumnsPage;
+
+    if (!columnsPageRange || columnsPageRange[0] > columnsPageRange[1]) {
+      return columns;
+    }
+    return columns.map(function (column, i) {
+      var newColumn = (0, _objectAssign2['default'])({}, column);
+      if (i >= columnsPageRange[0] && i <= columnsPageRange[1]) {
+        var pageIndexStart = columnsPageRange[0] + currentColumnsPage * columnsPageSize;
+        var pageIndexEnd = columnsPageRange[0] + (currentColumnsPage + 1) * columnsPageSize - 1;
+        if (pageIndexEnd > columnsPageRange[1]) {
+          pageIndexEnd = columnsPageRange[1];
+        }
+        if (i < pageIndexStart || i > pageIndexEnd) {
+          newColumn.className = newColumn.className || '';
+          newColumn.className += ' ' + prefixCls + '-column-hidden';
+        }
+        newColumn = _this.wrapPageColumn(newColumn, i === pageIndexStart, i === pageIndexEnd);
+      }
+      return newColumn;
+    });
+  },
+
+  getMaxColumnsPage: function getMaxColumnsPage() {
+    var _props2 = this.props;
+    var columnsPageRange = _props2.columnsPageRange;
+    var columnsPageSize = _props2.columnsPageSize;
+
+    return Math.floor((columnsPageRange[1] - columnsPageRange[0] - 1) / columnsPageSize);
+  },
+
+  goToColumnsPage: function goToColumnsPage(currentColumnsPage) {
+    var maxColumnsPage = this.getMaxColumnsPage();
+    var page = currentColumnsPage;
+    if (page < 0) {
+      page = 0;
+    }
+    if (page > maxColumnsPage) {
+      page = maxColumnsPage;
+    }
+    this.setState({
+      currentColumnsPage: page
+    });
+  },
+
+  prevColumnsPage: function prevColumnsPage() {
+    this.goToColumnsPage(this.state.currentColumnsPage - 1);
+  },
+
+  nextColumnsPage: function nextColumnsPage() {
+    this.goToColumnsPage(this.state.currentColumnsPage + 1);
+  },
+
+  wrapPageColumn: function wrapPageColumn(column, hasPrev, hasNext) {
+    var prefixCls = this.props.prefixCls;
+    var currentColumnsPage = this.state.currentColumnsPage;
+
+    var maxColumnsPage = this.getMaxColumnsPage();
+    var prevHandlerCls = prefixCls + '-prev-columns-page';
+    if (currentColumnsPage === 0) {
+      prevHandlerCls += ' ' + prefixCls + '-prev-columns-page-disabled';
+    }
+    var prevHandler = _react2['default'].createElement('span', { className: prevHandlerCls, onClick: this.prevColumnsPage });
+    var nextHandlerCls = prefixCls + '-next-columns-page';
+    if (currentColumnsPage === maxColumnsPage) {
+      nextHandlerCls += ' ' + prefixCls + '-next-columns-page-disabled';
+    }
+    var nextHandler = _react2['default'].createElement('span', { className: nextHandlerCls, onClick: this.nextColumnsPage });
+    column.title = hasPrev ? _react2['default'].createElement(
+      'span',
+      null,
+      prevHandler,
+      column.title
+    ) : column.title;
+    column.title = hasNext ? _react2['default'].createElement(
+      'span',
+      null,
+      column.title,
+      nextHandler
+    ) : column.title;
+    return column;
+  },
+
   findExpandedRow: function findExpandedRow(record) {
@@ -267,2 +362,5 @@ var keyFn = this.props.rowKey;
     }
+    if (props.columnsPageRange) {
+      className += ' ' + prefixCls + '-columns-paging';
+    }
     var headerTable = undefined;
@@ -269,0 +367,0 @@ var thead = _react2['default'].createElement(

package.json

 {
   "name": "rc-table",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "table ui component for react",
@@ -55,3 +55,6 @@ "keywords": [
     "lint"
-  ]
+  ],
+  "dependencies": {
+    "object-assign": "^4.0.1"
+  }
 }

README.md

@@ -85,3 +85,3 @@ # rc-table
 ```
-## API 
+## API
 
@@ -185,2 +185,14 @@ ### property
       <tr>
+          <td>columnsPageRange</td>
+          <td>Array</td>
+          <th></th>
+          <td>columns index range need paging, like [2,10]</td>
+      </tr>
+      <tr>
+          <td>columnsPageSize</td>
+          <td>Number</td>
+          <th>5</th>
+          <td>pageSize of columns</td>
+      </tr>
+      <tr>
           <td>columns</td>
@@ -187,0 +199,0 @@ <td>Object[]<Object></td>

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

28038

increased by20.52%

Lines of code

561

increased by27.5%

Number of lines in readme file

265

increased by4.74%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedobject-assign@^4.0.1

• + Addedobject-assign@4.1.1(transitive)