rsuite-table - npm Package Compare versions

Comparing version 3.1.6 to 3.1.7

CHANGELOG.md

@@ -0,1 +1,7 @@
+# 3.1.7
+
+- Feature: Support `rowClassName` on Table
+- Feature: Support `defaultSortType` on `<Table>` and let `sortType` be controlled
+- Chore: Update element-resize-event
+
 # 3.1.6
@@ -2,0 +8,0 @@

lib/HeaderCell.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _isUndefined2 = require('lodash/isUndefined');
+
+var _isUndefined3 = _interopRequireDefault(_isUndefined2);
+
 var _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; };
@@ -36,6 +40,6 @@
 
+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)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
 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)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -104,3 +108,3 @@
       if (sortable) {
-        var _sortType = _this.state.sortType === 'asc' ? 'desc' : 'asc';
+        var _sortType = _this.getSortType() === 'asc' ? 'desc' : 'asc';
         _this.setState({
@@ -118,3 +122,3 @@ sortType: _sortType
     _this.state = {
-      sortType: props.sortType,
+      sortType: props.defaultSortType || 'asc',
       width: props.width,
@@ -128,2 +132,9 @@ flexGrow: props.flexGrow,
   _createClass(HeaderCell, [{
+    key: 'getSortType',
+    value: function getSortType() {
+      var sortType = this.props.sortType;
+
+      return (0, _isUndefined3.default)(sortType) ? this.state.sortType : sortType;
+    }
+  }, {
     key: 'renderResizeSpanner',
@@ -164,4 +175,4 @@ value: function renderResizeSpanner() {
           dataKey = _props2.dataKey;
-      var sortType = this.state.sortType;
 
+      var sortType = this.getSortType();
 
@@ -220,6 +231,5 @@ if (sortable) {
 HeaderCell.defaultProps = {
-  classPrefix: (0, _utils.defaultClassPrefix)('table-cell-header'),
-  sortType: 'asc'
+  classPrefix: (0, _utils.defaultClassPrefix)('table-cell-header')
 };
-HeaderCell.handledProps = ['children', 'className', 'classPrefix', 'dataKey', 'fixed', 'flexGrow', 'headerHeight', 'index', 'left', 'onColumnResizeEnd', 'onColumnResizeMove', 'onColumnResizeStart', 'onResize', 'onSortColumn', 'resizable', 'sortColumn', 'sortType', 'sortable', 'width'];
+HeaderCell.handledProps = ['children', 'className', 'classPrefix', 'dataKey', 'defaultSortType', 'fixed', 'flexGrow', 'headerHeight', 'index', 'left', 'onColumnResizeEnd', 'onColumnResizeMove', 'onColumnResizeStart', 'onResize', 'onSortColumn', 'resizable', 'sortColumn', 'sortType', 'sortable', 'width'];
 HeaderCell.propTypes = {
@@ -238,3 +248,4 @@ width: _propTypes2.default.number,
   sortColumn: _propTypes2.default.string,
-  sortType: _propTypes2.default.oneOf(['desc', 'asc']).isRequired,
+  sortType: _propTypes2.default.oneOf(['desc', 'asc']),
+  defaultSortType: _propTypes2.default.oneOf(['desc', 'asc']),
   sortable: _propTypes2.default.bool,
@@ -241,0 +252,0 @@ resizable: _propTypes2.default.bool,

lib/Table.js

@@ -184,2 +184,9 @@ 'use strict';
   }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.table) {
+        (0, _elementResizeEvent.unbind)(this.table);
+      }
+    }
+  }, {
     key: 'getExpandedRowKeys',
@@ -254,2 +261,3 @@ value: function getExpandedRowKeys() {
           sortType = _props3.sortType,
+          defaultSortType = _props3.defaultSortType,
           onSortColumn = _props3.onSortColumn,
@@ -273,3 +281,3 @@ rowHeight = _props3.rowHeight,
               minWidth = _column$props.minWidth,
-              _onResize = _column$props.onResize;
+              onResize = _column$props.onResize;
 
@@ -309,2 +317,3 @@
               sortType: sortType,
+              defaultSortType: defaultSortType,
               onSortColumn: onSortColumn,
@@ -316,3 +325,3 @@ flexGrow: flexGrow
               (0, _merge3.default)(headerCellProps, {
-                onResize: _onResize,
+                onResize: onResize,
                 onColumnResizeEnd: _this2.handleColumnResizeEnd,
@@ -556,5 +565,13 @@ onColumnResizeStart: _this2.handleColumnResizeStart,
     value: function renderRow(props, cells, shouldRenderExpandedRow, rowData) {
+      var rowClassName = this.props.rowClassName;
       var shouldFixedColumn = this.state.shouldFixedColumn;
+
+
+      if ((0, _isFunction3.default)(rowClassName)) {
+        props.className = rowClassName(rowData);
+      } else {
+        props.className = rowClassName;
+      }
+
       // IF there are fixed columns, add a fixed group
-
       if (shouldFixedColumn) {
@@ -894,3 +911,2 @@ var fixedCells = cells.filter(function (cell) {
   rowExpandedHeight: 100,
-  sortType: 'asc',
   hover: true,
@@ -904,3 +920,3 @@ showHeader: true,
 };
-Table.handledProps = ['autoHeight', 'bodyRef', 'bordered', 'cellBordered', 'children', 'className', 'classPrefix', 'data', 'defaultExpandAllRows', 'defaultExpandedRowKeys', 'disabledScroll', 'expandedRowKeys', 'headerHeight', 'height', 'hover', 'isTree', 'loadAnimation', 'loading', 'locale', 'minHeight', 'onExpandChange', 'onRowClick', 'onScroll', 'onSortColumn', 'onTouchMove', 'onTouchStart', 'renderRowExpanded', 'renderTreeToggle', 'rowExpandedHeight', 'rowHeight', 'rowKey', 'setRowHeight', 'showHeader', 'sortColumn', 'sortType', 'style', 'width', 'wordWrap'];
+Table.handledProps = ['autoHeight', 'bodyRef', 'bordered', 'cellBordered', 'children', 'className', 'classPrefix', 'data', 'defaultExpandAllRows', 'defaultExpandedRowKeys', 'defaultSortType', 'disabledScroll', 'expandedRowKeys', 'headerHeight', 'height', 'hover', 'isTree', 'loadAnimation', 'loading', 'locale', 'minHeight', 'onExpandChange', 'onRowClick', 'onScroll', 'onSortColumn', 'onTouchMove', 'onTouchStart', 'renderRowExpanded', 'renderTreeToggle', 'rowClassName', 'rowExpandedHeight', 'rowHeight', 'rowKey', 'setRowHeight', 'showHeader', 'sortColumn', 'sortType', 'style', 'width', 'wordWrap'];
 Table.propTypes = {
@@ -926,3 +942,4 @@ width: _propTypes2.default.number,
   sortColumn: _propTypes2.default.string,
-  sortType: _propTypes2.default.oneOf(['desc', 'asc']).isRequired,
+  sortType: _propTypes2.default.oneOf(['desc', 'asc']),
+  defaultSortType: _propTypes2.default.oneOf(['desc', 'asc']),
   disabledScroll: _propTypes2.default.bool,
@@ -951,3 +968,4 @@ hover: _propTypes2.default.bool.isRequired,
   loadAnimation: _propTypes2.default.bool,
-  showHeader: _propTypes2.default.bool
+  showHeader: _propTypes2.default.bool,
+  rowClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func])
 };
@@ -954,0 +972,0 @@

package.json

 {
   "name": "rsuite-table",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "A React table component",
@@ -31,3 +31,3 @@ "main": "lib/index.js",
     "dom-lib": "^1.0.0",
-    "element-resize-event": "^2.0.9",
+    "element-resize-event": "^3.0.2",
     "lodash": "^4.17.5",
@@ -34,0 +34,0 @@ "react-lifecycles-compat": "^3.0.4"

README.md

@@ -15,3 +15,2 @@ # rsuite-table
 
-[![npm][npm-beta-badge]][npm-beta]
 
@@ -76,6 +75,78 @@ [![Travis][build-badge]][build] [![Coverage Status][coverage-badge]][coverage]
 
+
+## API
+
+### `<Table>`
+
+| Name             | Type                                      | Default | Description                                                  |
+| ---------------- | ----------------------------------------- | ------- | ------------------------------------------------------------ |
+| bordered         | boolean                                   |         | 显示边框线                                                   |
+| data             | Array                                     |         | 表格数据                                                     |
+| disabledScroll   | boolean                                   |         | 禁用滚动                                                     |
+| expand           | boolean                                   |         | 展开所有节点，`isTree`为 `tree` 时，该属性有效               |
+| headerHeight     | number                                    | 36      | 表头高度                                                     |
+| height           | number                                    | 200     | 高度                                                         |
+| isTree           | boolean                                   |         | 是否展示为树表格                                             |
+| loading          | boolean                                   |         | 显示 loading 状态                                            |
+| locale           | object                                    |         | 本地化语言配置                                               |
+| onExpandChange   | function(isOpen:boolean,rowData:object)   |         | 树形表格，在展开节点的回调函数                               |
+| onRowClick       | function(rowData:object)                  |         | 行点击后的回调函数， 返回 `rowDate`                          |
+| onScroll         | function(scrollX:object, scrollY:object)  |         | 滚动条滚动时候的回调函数                                     |
+| onSortColumn     | function(dataKey:string, sortType:string) |         | 点击排序列的回调函数，返回 `sortColumn`, `sortType` 这两个值 |
+| renderTreeToggle | (icon:node,rowData:object)=> node         |         | 树形表格，在展开节点的回调函数                               |
+| rowClassName     | string ,(rowData:object)=>string          |         | 宽度                                                         |
+| rowHeight        | number                                    | 36      | 行高                                                         |
+| setRowHeight     | (rowData:object)=> number                 |         | 重新渲染行高                                                 |
+| sortColumn       | string                                    |         | 排序列名称                                                   |
+| sortType         | string                                    |         | 排序类型 ['desc', 'asc']                                     |
+| width            | number                                    |         | 宽度                                                         |
+
+
+<br>
+> locale 的默认值是:
+```js
+{
+  emptyMessage: 'No data found',
+  loading: (
+    <div>
+      <i className="icon icon-cog icon-lg icon-spin" />
+      <span>Loading...</span>
+    </div>
+  )
+}
+```
+
+<br>
+###  `<Column>`
+
+| Name      | Type                                           | Default | Description                                                                           |
+| --------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------- |
+| align     | string                                         |         | 对齐方式 ['left', 'center', 'right']                                                  |
+| colSpan   | number                                         |         | 合并列单元格，当被合并列的 `dataKey` 对应的值为 `null` 或者 `undefined`时，才会合并。 |
+| fixed     | bool                                           |         | 固定列                                                                                |
+| flexGrow  | number                                         |         | 设置列宽自动调节的比例，当设置了 `flexGrow` 就不能设置 `resizable` 与 `width` 属性    |
+| minWidth  | number                                         | 200     | 当使用了 `flexGrow` 以后，可以通过 `minWidth` 设置一个最小宽度                        |
+| onResize  | (columnWidth: number, dataKey: string) => void |         | 列宽改变后的回调函数                                                                  |
+| resizable | bool                                           |         | 可自定义调整列宽                                                                      |
+| sortable  | bool                                           |         | 可排序                                                                                |
+| width     | number                                         |         | 列宽                                                                                  |
+
+
+<br>
+> `sortable` 是用来定义该列是否可排序，但是根据什么 `key` 排序需要 在 `Cell` 设置一个 `dataKey`
+> 这里的排序是服务端排序，所以需要在 `<Table>` 的 `onSortColumn` 回调函数中处理逻辑，回调函数会返回 `sortColumn`, `sortType` 这两个值。
+
+<br>
+###  `<Cell>`
+
+| Name     | Type   | Default | Description                             |
+| -------- | ------ | ------- | --------------------------------------- |
+| dataKey  | string |         | 数据绑定的 `key` ，同时也是排序的 `key` |
+| rowData  | object |         | 行数据                                  |
+| rowIndex | number |         | 行号                                    |
+
+
+
 [npm-badge]: https://img.shields.io/npm/v/rsuite-table.svg?style=flat-square
 [npm]: https://www.npmjs.com/package/rsuite-table
-[npm-beta-badge]: https://img.shields.io/npm/v/rsuite-table/beta.svg?style=flat-square
-[npm-beta]: https://www.npmjs.com/package/rsuite-table
 [build-badge]: https://img.shields.io/travis/rsuite/rsuite-table.svg?style=flat-square
@@ -82,0 +153,0 @@ [build]: https://travis-ci.org/rsuite/rsuite-table

src/HeaderCell.js

@@ -5,2 +5,3 @@ // @flow
 import classNames from 'classnames';
+import _ from 'lodash';
 import { polyfill } from 'react-lifecycles-compat';
@@ -24,3 +25,4 @@
   sortColumn?: string,
-  sortType: 'desc' | 'asc',
+  sortType?: 'desc' | 'asc',
+  defaultSortType?: 'desc' | 'asc',
   sortable?: boolean,
@@ -52,4 +54,3 @@ resizable?: boolean,
   static defaultProps = {
-    classPrefix: defaultClassPrefix('table-cell-header'),
-    sortType: 'asc'
+    classPrefix: defaultClassPrefix('table-cell-header')
   };
@@ -72,3 +73,3 @@
     this.state = {
-      sortType: props.sortType,
+      sortType: props.defaultSortType || 'asc',
       width: props.width,
@@ -80,2 +81,7 @@ flexGrow: props.flexGrow,
 
+  getSortType() {
+    const { sortType } = this.props;
+    return _.isUndefined(sortType) ? this.state.sortType : sortType;
+  }
+
   handleColumnResizeStart = (event: any) => {
@@ -98,3 +104,3 @@ const { left, fixed, onColumnResizeStart } = this.props;
     if (sortable) {
-      const sortType = this.state.sortType === 'asc' ? 'desc' : 'asc';
+      const sortType = this.getSortType() === 'asc' ? 'desc' : 'asc';
       this.setState({
@@ -133,3 +139,3 @@ sortType
     const { sortable, sortColumn, dataKey } = this.props;
-    const { sortType } = this.state;
+    const sortType = this.getSortType();
 
@@ -136,0 +142,0 @@ if (sortable) {

src/Table.js

@@ -6,3 +6,3 @@ // @flow
 import _ from 'lodash';
-import onResize from 'element-resize-event';
+import bindElementResize, { unbind as unbindElementResize } from 'element-resize-event';
 
@@ -60,3 +60,4 @@ import { addStyle, getWidth, getHeight, translateDOMPositionXY, WheelHandler } from 'dom-lib';
   sortColumn?: string,
-  sortType: SortType,
+  sortType?: SortType,
+  defaultSortType?: SortType,
 
@@ -81,3 +82,4 @@ disabledScroll?: boolean,
   loadAnimation?: boolean,
-  showHeader?: boolean
+  showHeader?: boolean,
+  rowClassName?: string | ((rowData: Object) => string)
 };
@@ -119,3 +121,2 @@
     rowExpandedHeight: 100,
-    sortType: 'asc',
     hover: true,
@@ -180,3 +181,3 @@ showHeader: true,
     this.calculateRowMaxHeight();
-    onResize(this.table, _.debounce(this.calculateTableWidth, 400));
+    bindElementResize(this.table, _.debounce(this.calculateTableWidth, 400));
   }
@@ -195,2 +196,8 @@
 
+  componentWillUnmount() {
+    if (this.table) {
+      unbindElementResize(this.table);
+    }
+  }
+
   getExpandedRowKeys() {
@@ -242,3 +249,10 @@ const { expandedRowKeys } = this.props;
     const { width: tableWidth } = this.state;
-    const { sortColumn, sortType, onSortColumn, rowHeight, showHeader } = this.props;
+    const {
+      sortColumn,
+      sortType,
+      defaultSortType,
+      onSortColumn,
+      rowHeight,
+      showHeader
+    } = this.props;
     const headerHeight = this.getTableHeaderHeight();
@@ -291,2 +305,3 @@ const { totalFlexGrow, totalWidth } = getTotalByColumns(columns);
             sortType,
+            defaultSortType,
             onSortColumn,
@@ -719,3 +734,11 @@ flexGrow
   renderRow(props: Object, cells: Array<any>, shouldRenderExpandedRow?: boolean, rowData?: Object) {
+    const { rowClassName } = this.props;
     const { shouldFixedColumn } = this.state;
+
+    if (_.isFunction(rowClassName)) {
+      props.className = rowClassName(rowData);
+    } else {
+      props.className = rowClassName;
+    }
+
     // IF there are fixed columns, add a fixed group
@@ -722,0 +745,0 @@ if (shouldFixedColumn) {

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

180683

increased by4.47%

Lines of code

3857

increased by1.29%

Number of lines in readme file

154

increased by85.54%

Dependency changes

• + Addedelement-resize-event@3.0.6(transitive)

• - Removedelement-resize-event@2.0.9(transitive)

• Updatedelement-resize-event@^3.0.2