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

Comparing version 1.0.1 to 1.1.0

components/DataTable.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * DataTable - 数据表
+ *
+ * @example <caption>Simple</caption>
+ *
+ * class SimpleDataTableDemo extends React.PureComponent{
+ *	render(){
+ *		const dataSource=[
+ *			{name:"name1",sex:"male"},
+ *			{name:"name2",sex:"female"}
+ *		];
+ *		const columns=[
+ *			{name:"Name",render:rowData=>rowData['name']},
+ *			{name:"Sex",render:rowData=>rowData['sex']},
+ *		];
+ *		return <DataTable columns={columns} dataSource={dataSource}></DataTable>
+ *	}
+ * }
+ *
+ * @example <caption>Empty</caption>
+ *
+ * class EmptyDataTableDemo extends React.PureComponent{
+ *	render(){
+ *		const dataSource=[];
+ *		const columns=[
+ *			{name:"Name",render:rowData=>rowData['name']},
+ *			{name:"Sex",render:rowData=>rowData['sex']},
+ *		];
+ *		return <DataTable columns={columns} dataSource={dataSource}></DataTable>
+ *	}
+ * }
+ *
+ * @example <caption>Radio DataTable</caption>
+ *
+ * class RadioDataTableDemo extends React.PureComponent{
+ *	render(){
+ *		const dataSource=[
+ *			{name:"name1",sex:"male"},
+ *			{name:"name2",sex:"female"}
+ *		];
+ *		const columns=[
+ *			{name:"",render:rowData=>{
+ *				return <input type="radio" value={rowData['name']} name="radio-data-table"/>
+ *			}},
+ *			{name:"Name",render:rowData=>rowData['name']},
+ *			{name:"Sex",render:rowData=>rowData['sex']},
+ *		];
+ *		return <DataTable columns={columns} dataSource={dataSource}></DataTable>
+ *	}
+ * }
+ *
+ * @example <caption>Checkbox DataTable</caption>
+ *
+ * class CheckboxDataTableDemo extends React.PureComponent{
+ *	render(){
+ *		const dataSource=[
+ *			{name:"name1",sex:"male"},
+ *			{name:"name2",sex:"female"}
+ *		];
+ *		const columns=[
+ *			{name:"",render:rowData=>{
+ *				return <input type="checkbox" value={rowData['name']}/>
+ *			}},
+ *			{name:"Name",render:rowData=>rowData['name']},
+ *			{name:"Sex",render:rowData=>rowData['sex']},
+ *		];
+ *		return <DataTable columns={columns} dataSource={dataSource}></DataTable>
+ *	}
+ * }
+ *
+ */
+var DataTable = function (_PureComponent) {
+	_inherits(DataTable, _PureComponent);
+
+	function DataTable() {
+		_classCallCheck(this, DataTable);
+
+		return _possibleConstructorReturn(this, (DataTable.__proto__ || Object.getPrototypeOf(DataTable)).apply(this, arguments));
+	}
+
+	_createClass(DataTable, [{
+		key: "_renderDataSource",
+
+
+		/**
+   * @private
+   *
+   * render data source
+   * */
+
+		/**
+   * @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>) ]
+   *
+   * */
+		value: function _renderDataSource() {
+			var _this2 = this;
+
+			if (this.props.dataSource.length > 0) {
+				return this.props.dataSource.map(function (rowData, rowDataIndex) {
+					return _react2.default.createElement(
+						"tr",
+						{ key: rowDataIndex },
+						_this2.props.columns.map(function (column, columnIndex) {
+							return _react2.default.createElement(
+								"td",
+								{ key: columnIndex,
+									className: column.className,
+									style: column.style },
+								column.render(rowData, rowDataIndex, column, columnIndex)
+							);
+						})
+					);
+				});
+			}
+			return this.props.renderDataEmpty(this.props.columns);
+		}
+	}, {
+		key: "render",
+		value: function render() {
+			return _react2.default.createElement(
+				"table",
+				{ className: this.props.className, style: this.props.style },
+				_react2.default.createElement(
+					"thead",
+					null,
+					_react2.default.createElement(
+						"tr",
+						null,
+						this.props.columns.map(function (column, index) {
+							return _react2.default.createElement(
+								"th",
+								{ key: index },
+								column.name
+							);
+						})
+					)
+				),
+				_react2.default.createElement(
+					"tbody",
+					null,
+					this._renderDataSource()
+				)
+			);
+		}
+	}]);
+
+	return DataTable;
+}(_react.PureComponent);
+
+DataTable.propTypes = {
+	columns: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+		name: _propTypes2.default.string.isRequired,
+		className: _propTypes2.default.any,
+		style: _propTypes2.default.object,
+		render: _propTypes2.default.func.isRequired
+	})).isRequired,
+	dataSource: _propTypes2.default.array,
+	style: _propTypes2.default.object,
+	className: _propTypes2.default.any,
+	renderDataEmpty: _propTypes2.default.func
+};
+DataTable.defaultProps = {
+	dataSource: [],
+	className: 'data-table',
+	style: {
+		width: "100%"
+	},
+	renderDataEmpty: function renderDataEmpty(definedColumn) {
+		return _react2.default.createElement(
+			"tr",
+			null,
+			_react2.default.createElement(
+				"td",
+				{ colSpan: definedColumn.length, style: { textAlign: "center" } },
+				"NO DATA"
+			)
+		);
+	}
+};
+exports.default = DataTable;

components/DataTableWithPagination.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+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; };
+
+var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _DataTable = require("./DataTable");
+
+var _DataTable2 = _interopRequireDefault(_DataTable);
+
+var _Pagination = require("./Pagination");
+
+var _Pagination2 = _interopRequireDefault(_Pagination);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * 带分页的DataTable,由DataTable和Pagination组合的复合组件
+ * */
+var DataTableWithPagination = function (_PureComponent) {
+	_inherits(DataTableWithPagination, _PureComponent);
+
+	function DataTableWithPagination() {
+		_classCallCheck(this, DataTableWithPagination);
+
+		return _possibleConstructorReturn(this, (DataTableWithPagination.__proto__ || Object.getPrototypeOf(DataTableWithPagination)).apply(this, arguments));
+	}
+
+	_createClass(DataTableWithPagination, [{
+		key: "getGlobalRowIndex",
+
+
+		/**
+   * 获取DataTable全局数据索引
+   * @param {Number} localRowIndex - 当前分页中的数据索引
+   * @return {Number} - 全局数据索引
+   * */
+
+		/**
+   * {@link DataTable.propTypes ...DataTable.propTypes}
+   * {@link Pagination.propTypes ...Pagination.propTypes}
+   * @property {?Object} style
+   * @property {?String} className
+   * @property {?Object} dataTableStyle - DataTable样式
+   * @property {?String} dataTableClassName - DataTable css class
+   * @property {?Object} paginationStyle - Pagination 样式
+   * @property {?String} paginationClassName - Pagination css class
+   * @property {?Boolean} showIndex [ true ] - 是否显示索引列
+   * */
+		value: function getGlobalRowIndex(localRowIndex) {
+			var index = this.refs['pagination'].pageIndex * this.refs['pagination'].pageSize;
+			if (this.refs['pagination'].startPageNumber === 0) {
+				return index + localRowIndex + 1;
+			}
+			return index + localRowIndex;
+		}
+	}, {
+		key: "render",
+		value: function render() {
+			var _this2 = this;
+
+			var dataTablePropKeys = Object.keys(_DataTable2.default.propTypes).concat(["dataTableStyle", "dataTableClassName"]);
+			var paginationPropKeys = Object.keys(_Pagination2.default.propTypes).concat(["paginationStyle", "paginationClassName"]);
+			var dataTableOption = {};
+			dataTablePropKeys.filter(function (f) {
+				return f !== "style" || f !== "className";
+			}).forEach(function (k) {
+				dataTableOption[k] = _this2.props[k];
+			});
+			var paginationOption = {};
+			paginationPropKeys.filter(function (f) {
+				return f !== "style" || f !== "className";
+			}).map(function (k) {
+				paginationOption[k] = _this2.props[k];
+			});
+			if (this.props.showIndex) {
+				dataTableOption.columns = [{
+					name: "#",
+					style: { width: "20px" },
+					render: function render(rowData, rowIndex) {
+						return _this2.getGlobalRowIndex(rowIndex);
+					}
+				}].concat(_toConsumableArray(dataTableOption.columns));
+			}
+			return _react2.default.createElement(
+				"div",
+				{ style: this.props.style, className: this.props.className },
+				_react2.default.createElement(_DataTable2.default, dataTableOption),
+				_react2.default.createElement(_Pagination2.default, _extends({}, paginationOption, { ref: "pagination" }))
+			);
+		}
+	}]);
+
+	return DataTableWithPagination;
+}(_react.PureComponent);
+
+DataTableWithPagination.propTypes = {
+	style: _propTypes2.default.object,
+	className: _propTypes2.default.any,
+	columns: _DataTable2.default.propTypes.columns,
+	dataSource: _DataTable2.default.propTypes.dataSource,
+	renderDataEmpty: _DataTable2.default.propTypes.renderDataEmpty,
+	dataTableStyle: _DataTable2.default.propTypes.style,
+	dataTableClassName: _DataTable2.default.propTypes.className,
+	startPageNumber: _Pagination2.default.propTypes.startPageNumber,
+	pageIndex: _Pagination2.default.propTypes.pageIndex,
+	pageSize: _Pagination2.default.propTypes.pageSize,
+	onPageChange: _Pagination2.default.propTypes.onPageChange,
+	total: _Pagination2.default.propTypes.total,
+	displayPageCount: _Pagination2.default.propTypes.displayPageCount,
+	paginationStyle: _Pagination2.default.propTypes.style,
+	paginationClassName: _Pagination2.default.propTypes.className,
+	showIndex: _propTypes2.default.bool
+};
+DataTableWithPagination.defaultProps = {
+	showIndex: true
+};
+exports.default = DataTableWithPagination;

components/Pagination.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require("classnames");
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * Pagination - 页码
+ *
+ * @example <caption>从0开始分页</caption>
+ *
+ * <Pagination
+ *    onPageChange={(pageInfo)=>{
+ *						console.log('page change',pageInfo)
+ *					}}
+ *      total={23}/>
+ *
+ * @example <caption>从1开始分页</caption>
+ * <Pagination
+ *    startPageNumber={1}
+ *    pageIndex={1}
+ *    onPageChange={(pageInfo)=>{
+ *		console.log('page change',pageInfo)
+ *	}}
+ *    total={100}/>
+ *
+ * */
+var Pagination = function (_PureComponent) {
+	_inherits(Pagination, _PureComponent);
+
+	/**
+  * @property {?Number} startPageNumber [ 0 ] - 分页开始的起始页`0`或者`1`
+  * @property {?Number} pageIndex [ 0 ] - 当前页
+  * @property {?Number} pageSize [ 10 ] - 每页记录数
+  * @property {Function} onPageChange - 分页事件监听
+  * @property {Number} total - 总记录数
+  * @property {?Object} style - 样式
+  * @property {String} className [ pagination ] - css class样式,样式定义在`css/Pagination.css`
+  * @property {?Number} displayPageCount [ 5 ] - 最多可以显示多少页面
+  * */
+	function Pagination(props) {
+		_classCallCheck(this, Pagination);
+
+		var _this = _possibleConstructorReturn(this, (Pagination.__proto__ || Object.getPrototypeOf(Pagination)).call(this, props));
+
+		_this.state = {
+			pageIndex: props.pageIndex,
+			pageSize: props.pageSize,
+			startPageNumber: props.startPageNumber
+		};
+		return _this;
+	}
+
+	/**
+  * 总页数
+  * @readonly
+  * */
+
+
+	_createClass(Pagination, [{
+		key: "render",
+		value: function render() {
+			var _this2 = this;
+
+			var pages = Array.apply(null, { length: this.totalPage }).map(Number.call, function (value) {
+				return value + _this2.state.startPageNumber;
+			});
+			var lastPageIndex = pages[pages.length - 1];
+			var disabledPrevButton = this.state.pageIndex === this.state.startPageNumber;
+			var disabledNextButton = this.state.pageIndex === lastPageIndex;
+
+			var dis = Math.floor(this.props.displayPageCount / 2);
+			var begin = this.state.pageIndex - dis;
+			var end = this.state.pageIndex + dis;
+			if (begin < this.state.startPageNumber) {
+				begin = this.state.startPageNumber;
+			}
+			if (end > lastPageIndex) {
+				end = lastPageIndex;
+			}
+			var realDis = end - begin + 1;
+			if (realDis !== this.props.displayPageCount) {
+				if (begin === this.state.startPageNumber) {
+					//append page
+					while (end !== lastPageIndex && end - begin + 1 !== this.props.displayPageCount) {
+						end++;
+					}
+				}
+				if (end === lastPageIndex) {
+					//prepend page
+					while (begin !== this.state.startPageNumber && end - begin + 1 !== this.props.displayPageCount) {
+						begin--;
+					}
+				}
+			}
+			var startIndex = pages.indexOf(begin);
+			var stopIndex = pages.indexOf(end) + 1;
+			var displayPages = stopIndex >= pages.length ? pages.slice(startIndex) : pages.slice(startIndex, stopIndex);
+			var hasLeft = begin > this.state.startPageNumber;
+			var hasRight = end < lastPageIndex;
+			return _react2.default.createElement(
+				"ul",
+				{ className: this.props.className, style: this.props.style },
+				_react2.default.createElement(
+					"li",
+					{ className: (0, _classnames2.default)(disabledPrevButton ? "disabled" : '') },
+					_react2.default.createElement(
+						"a",
+						{ onClick: function onClick() {
+								var prevIndex = _this2.state.pageIndex - 1;
+								var state = Object.assign({}, _this2.state, {
+									pageIndex: prevIndex
+								});
+								_this2.setState(state, function () {
+									_this2.props.onPageChange(Object.assign({}, _this2.state));
+								});
+							}, href: "javascript:void(0)" },
+						_react2.default.createElement("i", { className: "fa fa-angle-left" })
+					)
+				),
+				hasLeft && _react2.default.createElement(
+					"li",
+					null,
+					"..."
+				),
+				displayPages.map(function (num, i) {
+					return _react2.default.createElement(
+						"li",
+						{
+							className: (0, _classnames2.default)(_this2.state.pageIndex === num ? "cur" : ''),
+							key: num },
+						_react2.default.createElement(
+							"a",
+							{ onClick: function onClick() {
+									var state = Object.assign({}, _this2.state, {
+										pageIndex: num
+									});
+									_this2.setState(state, function () {
+										_this2.props.onPageChange(Object.assign({}, _this2.state));
+									});
+								}, href: "javascript:void(0)" },
+							_this2.startPageNumber === 0 ? num + 1 : num
+						)
+					);
+				}),
+				hasRight && _react2.default.createElement(
+					"li",
+					null,
+					"..."
+				),
+				_react2.default.createElement(
+					"li",
+					{ className: (0, _classnames2.default)(disabledNextButton ? "disabled" : "") },
+					_react2.default.createElement(
+						"a",
+						{ onClick: function onClick() {
+								var nextIndex = _this2.state.pageIndex + 1;
+								var state = Object.assign({}, _this2.state, {
+									pageIndex: nextIndex
+								});
+								_this2.setState(state, function () {
+									_this2.props.onPageChange(Object.assign({}, _this2.state));
+								});
+							}, href: "javascript:void(0)" },
+						_react2.default.createElement("i", { className: "fa fa-angle-right" })
+					)
+				)
+			);
+		}
+	}, {
+		key: "totalPage",
+		get: function get() {
+			if (this.props.total <= 0) {
+				return 0;
+			}
+			return Math.ceil(this.props.total / this.props.pageSize);
+		}
+
+		/**
+   * 当前页码
+   * */
+
+	}, {
+		key: "pageIndex",
+		get: function get() {
+			return this.state.pageIndex;
+		}
+
+		/**
+   * 每页记录数
+   * */
+
+	}, {
+		key: "pageSize",
+		get: function get() {
+			return this.state.pageSize;
+		}
+
+		/**
+   * 起始分页页码
+   * */
+
+	}, {
+		key: "startPageNumber",
+		get: function get() {
+			return this.state.startPageNumber;
+		}
+	}]);
+
+	return Pagination;
+}(_react.PureComponent);
+
+Pagination.propTypes = {
+	startPageNumber: _propTypes2.default.number,
+	pageIndex: _propTypes2.default.number,
+	pageSize: _propTypes2.default.number,
+	onPageChange: _propTypes2.default.func.isRequired,
+	total: _propTypes2.default.number.isRequired,
+	style: _propTypes2.default.object,
+	className: _propTypes2.default.any,
+	displayPageCount: _propTypes2.default.number
+};
+Pagination.defaultProps = {
+	startPageNumber: 0,
+	pageIndex: 0,
+	pageSize: 10,
+	className: "pagination",
+	displayPageCount: 5
+};
+exports.default = Pagination;

css/DataTable.css

+.data-table {
+  border-left: solid 1px silver;
+  border-top: solid 1px silver; }

index.js

@@ -1,204 +0,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-/**
- * 数据Table
- *
- * @example <caption>Simple</caption>
- *
- * class SimpleDataTableDemo extends React.PureComponent{
- *	render(){
- *		const dataSource=[
- *			{name:"name1",sex:"male"},
- *			{name:"name2",sex:"female"}
- *		];
- *		const columns=[
- *			{name:"Name",render:rowData=>rowData['name']},
- *			{name:"Sex",render:rowData=>rowData['sex']},
- *		];
- *		return <DataTable columns={columns} dataSource={dataSource}></DataTable>
- *	}
- * }
- *
- * @example <caption>Empty</caption>
- *
- * class EmptyDataTableDemo extends React.PureComponent{
- *	render(){
- *		const dataSource=[];
- *		const columns=[
- *			{name:"Name",render:rowData=>rowData['name']},
- *			{name:"Sex",render:rowData=>rowData['sex']},
- *		];
- *		return <DataTable columns={columns} dataSource={dataSource}></DataTable>
- *	}
- * }
- *
- * @example <caption>Radio DataTable</caption>
- *
- * class RadioDataTableDemo extends React.PureComponent{
- *	render(){
- *		const dataSource=[
- *			{name:"name1",sex:"male"},
- *			{name:"name2",sex:"female"}
- *		];
- *		const columns=[
- *			{name:"",render:rowData=>{
- *				return <input type="radio" value={rowData['name']} name="radio-data-table"/>
- *			}},
- *			{name:"Name",render:rowData=>rowData['name']},
- *			{name:"Sex",render:rowData=>rowData['sex']},
- *		];
- *		return <DataTable columns={columns} dataSource={dataSource}></DataTable>
- *	}
- * }
- *
- * @example <caption>Checkbox DataTable</caption>
- *
- * class CheckboxDataTableDemo extends React.PureComponent{
- *	render(){
- *		const dataSource=[
- *			{name:"name1",sex:"male"},
- *			{name:"name2",sex:"female"}
- *		];
- *		const columns=[
- *			{name:"",render:rowData=>{
- *				return <input type="checkbox" value={rowData['name']}/>
- *			}},
- *			{name:"Name",render:rowData=>rowData['name']},
- *			{name:"Sex",render:rowData=>rowData['sex']},
- *		];
- *		return <DataTable columns={columns} dataSource={dataSource}></DataTable>
- *	}
- * }
- *
- */
-var DataTable = function (_PureComponent) {
-  _inherits(DataTable, _PureComponent);
-
-  function DataTable() {
-    _classCallCheck(this, DataTable);
-
-    return _possibleConstructorReturn(this, (DataTable.__proto__ || Object.getPrototypeOf(DataTable)).apply(this, arguments));
-  }
-
-  _createClass(DataTable, [{
-    key: "_renderDataSource",
-
-
-    /**
-     * @private
-     *
-     * render data source
-     * */
-    value: function _renderDataSource() {
-      var _this2 = this;
-
-      if (this.props.dataSource.length > 0) {
-        return this.props.dataSource.map(function (rowData, rowDataIndex) {
-          return _react2.default.createElement(
-            "tr",
-            { key: rowDataIndex },
-            _this2.props.columns.map(function (column, columnIndex) {
-              return _react2.default.createElement(
-                "td",
-                { key: columnIndex,
-                  className: column.className,
-                  style: column.style },
-                column.render(rowData, rowDataIndex, column, columnIndex)
-              );
-            })
-          );
-        });
-      }
-      return this.props.renderDataEmpty(this.props.columns);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return _react2.default.createElement(
-        "table",
-        { className: this.props.className, style: this.props.style },
-        _react2.default.createElement(
-          "thead",
-          null,
-          _react2.default.createElement(
-            "tr",
-            null,
-            this.props.columns.map(function (column, index) {
-              return _react2.default.createElement(
-                "th",
-                { key: index },
-                column.name
-              );
-            })
-          )
-        ),
-        _react2.default.createElement(
-          "tbody",
-          null,
-          this._renderDataSource()
-        )
-      );
-    }
-  }]);
-
-  return DataTable;
-}(_react.PureComponent);
-
-DataTable.propTypes = {
-  /**定义数据列*/
-  columns: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    name: _propTypes2.default.string.isRequired,
-    className: _propTypes2.default.any,
-    style: _propTypes2.default.object,
-    render: _propTypes2.default.func.isRequired
-  })).isRequired,
-  /**数据源*/
-  dataSource: _propTypes2.default.array,
-  /**样式*/
-  style: _propTypes2.default.object,
-  /**css class*/
-  className: _propTypes2.default.any,
-  /**定义没有数据时的样式*/
-  renderDataEmpty: _propTypes2.default.func
-};
-DataTable.defaultProps = {
-  dataSource: [],
-  className: 'pure-table pure-table-striped',
-  style: {
-    width: "100%"
-  },
-  renderDataEmpty: function renderDataEmpty(definedColumn) {
-    return _react2.default.createElement(
-      "tr",
-      null,
-      _react2.default.createElement(
-        "td",
-        { colSpan: definedColumn.length, style: { textAlign: "center" } },
-        "NO DATA"
-      )
-    );
-  }
-};
-exports.default = DataTable;
+exports.default = {
+	DataTable: require('./components/DataTable'),
+	Pagination: require('./components/Pagination'),
+	DataTableWithPagination: require('./components/DataTableWithPagination')
+};

package.json

 {
   "name": "react-component-data-table",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
@@ -9,3 +9,3 @@ "main": "index.js",
     "dev": "export NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --inline --progress --colors --port 3000 --content-base src/",
-    "build": "./node_modules/.bin/babel --presets=es2015,stage-0,react src/components/DataTable.js --out-file index.js && ./node_modules/react-docgen-readme/bin/cli.js src/components/ --template props.md --delimiter props && documentation readme src/components/DataTable.js --section 'API'",
+    "build": "./build",
     "publish": "npm publish --access public",
@@ -48,3 +48,2 @@ "win-dev": "set NODE_ENV=development&&webpack-dev-server --host 0.0.0.0 --inline --progress --colors --port 3000 --content-base src/",
     "postcss-loader": "^0.8.2",
-    "react-docgen-readme": "0.0.1",
     "sass-loader": "^3.2.0",
@@ -58,3 +57,2 @@ "style-loader": "^0.13.1",
     "prop-types": "^15.5.10",
-    "purecss": "^1.0.0",
     "react": "^15.6.1",
@@ -61,0 +59,0 @@ "react-dom": "^15.6.1"

README.md

@@ -12,65 +12,29 @@ # react-component-data-table
 
-<!-- props -->
+## Screen Shot
 
-[DataTable.js](src/components/DataTable.js)
+<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/datatable.png"/>
 
-## Props
+<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/pagination.gif"/>
 
-### columns
+<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/datatablewithpagination.gif"/>
 
--   required: true
--   type: arrayOf shape
+## Install
 
+```shell
+$ npm i react-component-data-table --save
+```
 
--   shape
-    -   `name`
+## Import
 
-        -   required: true
-        -   type: string
+```javascript
+import {DataTable,Pagination,DataTableWithPagination} from 'react-component-data-table'
+```
 
-    -   `className`
+## TODO
 
-        -   required: false
-        -   type: any
+-   [x] DataTable
+-   [x] Pagination
+-   [x] DataTableWithPagination
+-   [x] DataTableWithPagination 添加索引显示
 
-    -   `style`
-
-        -   required: false
-        -   type: object
-
-    -   `render`
-
-        -   required: true
-        -   type: func
-
-### dataSource
-
--   required: false
--   type: array 
-
--   defaultValue: `[]` 
-
-### style
-
--   required: false
--   type: object 
-
--   defaultValue: `{     width: "100%" }` 
-
-### className
-
--   required: false
--   type: any 
-
--   defaultValue: `'pure-table pure-table-striped'` 
-
-### renderDataEmpty
-
--   required: false
--   type: func 
-
--   defaultValue: `(definedColumn)=>(<tr>     <td colSpan={definedColumn.length} style={{textAlign:"center"}}>NO DATA</td> </tr>)` 
-
-<!-- props:end -->
-
 # API
@@ -84,3 +48,3 @@
 
-数据Table
+DataTable - 数据表
 
@@ -164,20 +128,108 @@ **Examples**
 
-## columns
+### propTypes
 
-定义数据列
+**Properties**
 
-## dataSource
+-   `columns` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>** 
+    -   `columns[].name` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+    -   `columns[].className` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 
+    -   `columns[].style` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** 
+    -   `columns[].render` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** 
+-   `dataSource` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)?** \[ \[] ]
+-   `style` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** 
+-   `className` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** [ data-table ] - data-table是DataTable的默认className,样式定义在/css/DataTable.css.如果要使用默认样式需要引用默认的样式文件`import 'css/DataTable.css'`
+-   `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>) ]
 
-数据源
+## DataTableWithPagination
 
-## style
+**Extends PureComponent**
 
-样式
+带分页的DataTable,由DataTable和Pagination组合的复合组件
 
-## className
+### getGlobalRowIndex
 
-css class
+获取DataTable全局数据索引
 
-## renderDataEmpty
+**Parameters**
 
-定义没有数据时的样式
+-   `localRowIndex` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 当前分页中的数据索引
+
+Returns **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 全局数据索引
+
+### propTypes
+
+[...DataTable.propTypes](#datatableproptypes)
+[...Pagination.propTypes](#paginationproptypes)
+
+**Properties**
+
+-   `style` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** 
+-   `className` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 
+-   `dataTableStyle` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** DataTable样式
+-   `dataTableClassName` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** DataTable css class
+-   `paginationStyle` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** Pagination 样式
+-   `paginationClassName` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** Pagination css class
+-   `showIndex` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** [ true ] - 是否显示索引列
+
+## Pagination
+
+**Extends PureComponent**
+
+Pagination - 页码
+
+**Parameters**
+
+-   `props`  
+
+**Examples**
+
+_从0开始分页_
+
+```javascript
+<Pagination
+   onPageChange={(pageInfo)=>{
+					console.log('page change',pageInfo)
+				}}
+     total={23}/>
+```
+
+_从1开始分页_
+
+```javascript
+<Pagination
+   startPageNumber={1}
+   pageIndex={1}
+   onPageChange={(pageInfo)=>{
+	console.log('page change',pageInfo)
+}}
+   total={100}/>
+```
+
+### totalPage
+
+总页数
+
+### pageIndex
+
+当前页码
+
+### pageSize
+
+每页记录数
+
+### startPageNumber
+
+起始分页页码
+
+### propTypes
+
+**Properties**
+
+-   `startPageNumber` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** [ 0 ] - 分页开始的起始页`0`或者`1`
+-   `pageIndex` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** [ 0 ] - 当前页
+-   `pageSize` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** [ 10 ] - 每页记录数
+-   `onPageChange` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** 分页事件监听
+-   `total` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 总记录数
+-   `style` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** 样式
+-   `className` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** [ pagination ] - css class样式,样式定义在`css/Pagination.css`
+-   `displayPageCount` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** [ 5 ] - 最多可以显示多少页面

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32739

141.12%

Dependency count

3

-25%

Dev dependency count

27

-3.57%

Number of package files

9

80%

Lines of code

541

189.3%

Number of lines in readme file

233

28.73%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes