react-component-data-table - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

components/DataTable.js

@@ -17,2 +17,6 @@ "use strict";
 
+var _classnames = require("classnames");
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -100,12 +104,35 @@
 
-	function DataTable() {
+	/**
+  * @property {Array<Object>} columns
+  * @property {String} columns[].name
+  * @property {?String} columns[].className
+  * @property {?Object} columns[].style
+  * @property {Function} columns[].render
+  * @property {?Array} dataSource [ [] ]
+  * @property {?Object} style
+  * @property {?String} className [ data-table ] - data-table是DataTable的默认className,样式定义在/css/DataTable.css.如果要使用默认样式需要引用默认的样式文件`import 'css/DataTable.css'`
+  * @property {?Function} renderDataEmpty [ (definedColumn)=>(<tr><td colSpan={definedColumn.length} style={{textAlign:"center"}}>NO DATA</td></tr>) ]
+  * @property {?Boolean} fixedHead [false] - 是否固定head
+  * */
+	function DataTable(props) {
 		_classCallCheck(this, DataTable);
 
-		return _possibleConstructorReturn(this, (DataTable.__proto__ || Object.getPrototypeOf(DataTable)).apply(this, arguments));
+		var _this = _possibleConstructorReturn(this, (DataTable.__proto__ || Object.getPrototypeOf(DataTable)).call(this, props));
+
+		_this.state = {
+			bodyHeight: 0
+		};
+		return _this;
 	}
 
 	_createClass(DataTable, [{
-		key: "_renderDataSource",
+		key: "updateBodyHeight",
+		value: function updateBodyHeight() {
+			if (this.props.fixedHead) {
+				this.setState(Object.assign({}, this.state, {
+					bodyHeight: this.parentHeight - this.tableHeadHeight
+				}));
+			}
+		}
 
-
 		/**
@@ -117,18 +144,4 @@ * @private
 
-		/**
-   * @property {Array<Object>} columns
-   * @property {String} columns[].name
-   * @property {?String} columns[].className
-   * @property {?Object} columns[].style
-   * @property {Function} columns[].render
-   *
-   * @property {?Array} dataSource [ [] ]
-   *
-   * @property {?Object} style
-   *
-   * @property {?String} className [ data-table ] - data-table是DataTable的默认className,样式定义在/css/DataTable.css.如果要使用默认样式需要引用默认的样式文件`import 'css/DataTable.css'`
-   *
-   * @property {?Function} renderDataEmpty [ (definedColumn)=>(<tr><td colSpan={definedColumn.length} style={{textAlign:"center"}}>NO DATA</td></tr>) ]
-   *
-   * */
+	}, {
+		key: "_renderDataSource",
 		value: function _renderDataSource() {
@@ -161,6 +174,9 @@ var _this2 = this;
 				"table",
-				{ className: this.props.className, style: this.props.style },
+				{
+					ref: "table",
+					className: (0, _classnames2.default)('data-table', this.props.fixedHead && "data-table-fixed-head", this.props.className),
+					style: this.props.style },
 				_react2.default.createElement(
 					"thead",
-					null,
+					{ ref: "thead" },
 					_react2.default.createElement(
@@ -180,3 +196,3 @@ "tr",
 					"tbody",
-					null,
+					{ style: this.props.fixedHead ? { height: this.state.bodyHeight } : {} },
 					this._renderDataSource()
@@ -186,2 +202,48 @@ )
 		}
+	}, {
+		key: "componentDidMount",
+		value: function componentDidMount() {
+			this.updateBodyHeight();
+		}
+	}, {
+		key: "componentDidUpdate",
+		value: function componentDidUpdate() {
+			this.updateBodyHeight();
+		}
+	}, {
+		key: "parentStyle",
+		get: function get() {
+			var table = this.refs['table'];
+			if (table) {
+				var parent = table.parentNode;
+				if (parent) {
+					return window.getComputedStyle(parent);
+				}
+			}
+			return null;
+		}
+	}, {
+		key: "parentHeight",
+		get: function get() {
+			if (this.parentStyle) {
+				var height = parseFloat(this.parentStyle.height);
+				if (!isNaN(height)) {
+					return height;
+				}
+			}
+			return 0;
+		}
+	}, {
+		key: "tableHeadHeight",
+		get: function get() {
+			var thead = this.refs['thead'];
+			if (thead) {
+				var style = window.getComputedStyle(thead);
+				var height = parseFloat(style.height);
+				if (!isNaN(height)) {
+					return height;
+				}
+			}
+			return 0;
+		}
 	}]);
@@ -202,10 +264,8 @@
 	className: _propTypes2.default.any,
-	renderDataEmpty: _propTypes2.default.func
+	renderDataEmpty: _propTypes2.default.func,
+	fixedHead: _propTypes2.default.bool
 };
 DataTable.defaultProps = {
 	dataSource: [],
-	className: 'data-table',
-	style: {
-		width: "100%"
-	},
+	fixedHead: false,
 	renderDataEmpty: function renderDataEmpty(definedColumn) {
@@ -212,0 +272,0 @@ return _react2.default.createElement(

css/DataTable.css

 .data-table {
-  border: solid 1px silver;
-  padding: 0;
-  border-collapse: collapse; }
+  border-radius: 5px;
+  background-color: white;
+  border-collapse: collapse;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  padding: 2px; }
   .data-table thead {
     background-color: silver; }
+    .data-table thead th {
+      background-image: linear-gradient(#646f7f, #4a5564);
+      color: white;
+      font-family: 'Patua One', 'cursive';
+      text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+      font-size: 16px;
+      padding: 20px; }
+    .data-table thead th:first-child {
+      border-top-left-radius: 5px; }
+    .data-table thead th:last-child {
+      border-top-right-radius: 5px; }
+  .data-table tbody tr td {
+    font-size: 13px;
+    padding: 20px;
+    color: #5f6062;
+    border-bottom: 1px solid #e0e0e0; }
+  .data-table tbody tr:nth-child(2n) {
+    background-color: #f0f3f5; }
+
+.data-table-fixed-head thead {
+  display: flex;
+  width: 100%; }
+  .data-table-fixed-head thead tr {
+    width: 100%;
+    display: flex; }
+    .data-table-fixed-head thead tr th {
+      flex: 1 0 auto; }
+
+.data-table-fixed-head tbody {
+  display: flex;
+  flex-direction: column;
+  overflow: auto; }
+  .data-table-fixed-head tbody tr {
+    width: 100%;
+    display: flex;
+    flex: 0 0 auto; }
+    .data-table-fixed-head tbody tr td {
+      flex: 1 0 auto; }

css/Pagination.css

@@ -8,11 +8,13 @@ .pagination {
   .pagination li {
-    padding: 8px 12px;
-    border-radius: 4px;
-    list-style: none; }
+    list-style: none;
+    display: flex;
+    align-items: center; }
     .pagination li a {
-      color: black;
+      color: #5f6062;
       outline: none;
-      text-decoration: none; }
+      text-decoration: none;
+      padding: 8px 12px;
+      border-radius: 4px;
+      display: block; }
   .pagination li.disabled {
-    color: gray;
     cursor: not-allowed; }
@@ -22,5 +24,4 @@ .pagination li.disabled a {
       color: gray; }
-  .pagination li.cur {
+  .pagination li.cur a {
+    color: white;
     background-color: #ee6e73; }
-    .pagination li.cur a {
-      color: white; }

package.json

 {
   "name": "react-component-data-table",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "",
@@ -54,3 +54,4 @@ "main": "index.js",
     "webpack": "^1.12.14",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "^1.14.1",
+    "webpack-livereload-plugin": "^1.0.0"
   },
@@ -57,0 +58,0 @@ "peerDependencies": {

README.md

@@ -29,16 +29,15 @@ # react-component-data-table
 ```javascript
+//如果需要自定义样式,请替换为自己的样式文件即可
+import 'react-component-data-table/css/DataTable.css'
+import 'react-component-data-table/css/Pagination.css'
 import {DataTable,Pagination,DataTableWithPagination} from 'react-component-data-table'
 ```
 
-## TODO
+## Change Log
 
--   [x] DataTable
--   [x] Pagination
--   [x] Pagination - 自定义上下页翻页样式
--   [ ] Pagination - 自定义页码样式
--   [x] Pagination - 实现refresh
--   [x] DataTableWithPagination
--   [x] DataTableWithPagination - 添加索引显示
--   [x] DataTableWithPagination - 实现refresh
+### 1.2.0
 
+-   添加了属性`fixedHead`,是否固定head,默认是不固定.如果为`true`,body的高度有容器的高度计算得出,不需要指定body的高度
+-   调整了默认样式
+
 # API
@@ -54,2 +53,6 @@
 
+**Parameters**
+
+-   `props`  
+
 **Examples**
@@ -145,2 +148,3 @@
 -   `renderDataEmpty` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [ (definedColumn)=>(<tr><td colSpan={definedColumn.length} style={{textAlign:"center"}}>NO DATA</td></tr>) ]
+-   `fixedHead` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** [false] - 是否固定head
 
@@ -147,0 +151,0 @@ ## DataTableWithPagination

No alert changes

Improved metrics

Total package byte prevSize

37905

8.57%

Lines of code

706

15.93%

Number of lines in readme file

255

1.59%

Worsened metrics

Dev dependency count

31

3.33%

No dependency changes