🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

react-component-data-table

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version
1.2.0
 to
1.3.0
+99
assets/css/DataTable.css
.pagination {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
user-select: none; }
.pagination li {
list-style: none;
display: flex;
align-items: center; }
.pagination li a {
color: #5f6062;
outline: none;
text-decoration: none;
padding: 8px 12px;
border-radius: 4px;
display: block; }
.pagination li.disabled {
cursor: not-allowed;
opacity: 0.5; }
.pagination li.disabled a {
pointer-events: none;
color: gray; }
.pagination li.cur a {
color: white;
background-color: #ee6e73; }
.data-table-sort {
display: flex;
flex-direction: column;
margin-left: 5px; }
.data-table-sort img {
width: 10px;
height: 10px; }
.data-table-sort a {
display: flex;
opacity: 0.2; }
.data-table-sort a:first-child {
align-items: flex-end; }
.data-table-sort a:first-child img {
transform: rotate(180deg); }
.data-table-sort a:last-child {
align-items: flex-start; }
.data-table-sort a.active {
opacity: 1; }
.data-table {
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 > div {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center; }
.data-table thead th > div > div {
height: 100%; }
.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; }
+26
assets/css/Pagination.css
.pagination {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
user-select: none; }
.pagination li {
list-style: none;
display: flex;
align-items: center; }
.pagination li a {
color: #5f6062;
outline: none;
text-decoration: none;
padding: 8px 12px;
border-radius: 4px;
display: block; }
.pagination li.disabled {
cursor: not-allowed;
opacity: 0.5; }
.pagination li.disabled a {
pointer-events: none;
color: gray; }
.pagination li.cur a {
color: white;
background-color: #ee6e73; }
+18
assets/css/Sort.css
.data-table-sort {
display: flex;
flex-direction: column;
margin-left: 5px; }
.data-table-sort img {
width: 10px;
height: 10px; }
.data-table-sort a {
display: flex;
opacity: 0.2; }
.data-table-sort a:first-child {
align-items: flex-end; }
.data-table-sort a:first-child img {
transform: rotate(180deg); }
.data-table-sort a:last-child {
align-items: flex-start; }
.data-table-sort a.active {
opacity: 1; }
+4
assets/img/angle-left.svg
<?xml version="1.0" ?>
<svg height="100%" viewBox="0 0 1792 1792" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"/>
</svg>
+12
assets/img/triangle-down.svg
<?xml version="1.0" ?>
<svg height="100%" version="1.1" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
<title/>
<defs/>
<g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1">
<g fill="#000000" id="Group" transform="translate(-336.000000, -336.000000)">
<path d="M344,339 L352,349 L336,349 L344,339 Z M344,339" id="Triangle 185 copy"
transform="translate(344.000000, 344.000000) scale(1, -1) translate(-344.000000, -344.000000) "/>
</g>
</g>
</svg>
+7
build.sh
#!/usr/bin/env bash
./node_modules/.bin/babel --presets=es2015,stage-0,react ./src/components -d ./components
cp -r ./src/assets/img ./assets
./node_modules/node-sass/bin/node-sass ./src/assets/sass/ -o ./assets/css/
documentation readme ./src/components/ --section 'API'
+100
components/Sort.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; }
var Sort = function (_PureComponent) {
_inherits(Sort, _PureComponent);
function Sort(props) {
_classCallCheck(this, Sort);
var _this = _possibleConstructorReturn(this, (Sort.__proto__ || Object.getPrototypeOf(Sort)).call(this, props));
_this.state = {
type: props.defaultType
};
return _this;
}
_createClass(Sort, [{
key: "render",
value: function render() {
var _this2 = this;
return _react2.default.createElement(
"div",
{
style: this.props.style,
className: (0, _classnames2.default)('data-table-sort', this.props.className) },
_react2.default.createElement(
"a",
{
onClick: function onClick() {
_this2.setState({
type: _this2.state.type === 'asc' ? 'none' : 'asc'
}, function () {
_this2.props.onChange(_this2.state.type);
});
},
href: "javascript:void(0)",
className: this.state.type === 'asc' ? 'active' : '' },
_react2.default.createElement("img", { src: require('../assets/img/triangle-down.svg') })
),
_react2.default.createElement(
"a",
{
onClick: function onClick() {
_this2.setState({
type: _this2.state.type === "desc" ? 'none' : 'desc'
}, function () {
_this2.props.onChange(_this2.state.type);
});
},
className: this.state.type === 'desc' ? 'active' : '',
href: "javascript:void(0)" },
_react2.default.createElement("img", { src: require('../assets/img/triangle-down.svg') })
)
);
}
}]);
return Sort;
}(_react.PureComponent);
Sort.propTypes = {
defaultType: _propTypes2.default.oneOf(['asc', 'desc', 'none']),
className: _propTypes2.default.string,
style: _propTypes2.default.object,
onChange: _propTypes2.default.func
};
Sort.defaultProps = {
defaultType: "none",
onChange: function onChange() {
return null;
}
};
exports.default = Sort;
+107
-7
components/DataTable.js

@@ -7,2 +7,4 @@ "use strict";

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; }; }();

@@ -22,2 +24,6 @@

var _Sort = require("./Sort");
var _Sort2 = _interopRequireDefault(_Sort);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -101,2 +107,57 @@

*
* @example <caption>Sort DataTable</caption>
*
* class SortDataTable extends React.PureComponent {
* ...
* onSortChange(sort) {
* if (sort) {
* let ds = [...this.state.dataSource];
* ds.sort((a, b)=> {
* if (sort.type === 'asc') {
* if (a[sort.field] < b[sort.field]) {
* return 1;
* }
* return 0;
* }
* else if (sort.type === 'desc') {
* if (a[sort.field] > b[sort.field]) {
* return 1;
* }
* return 0;
* }
* else {
* //nothing
* }
* });
* this.setState(
* Object.assign({}, this.state, {
* dataSource: ds
* })
* )
* }
* }
* render() {
* return (
* <div
* style={{height:300}}>
* <DataTable
* dataSource={this.state.dataSource}
* renderDataEmpty={()=>''}
* onSortChange={this.onSortChange.bind(this)}
* columns={[{
* name:"Name",
* render:rowData=>rowData['name']
* },{
* name:"Age",
* render:rowData=>rowData['age'],
* sort:{
* field:'age',
* }
* }]}></DataTable>
* </div>
* );
* }
* ...
* }
*
*/

@@ -112,2 +173,5 @@ var DataTable = function (_PureComponent) {

* @property {Function} columns[].render
* @property {?Object} columns[].sort
* @property {String} columns[].sort.field
* @property {?String} columns[].sort.defaultType - value is one of the none,asc,desc
* @property {?Array} dataSource [ [] ]

@@ -118,2 +182,3 @@ * @property {?Object} style

* @property {?Boolean} fixedHead [false] - 是否固定head
* @property {?Function} onSortChange [()=>null] - 当sort变化时调用
* */

@@ -126,3 +191,4 @@ function DataTable(props) {

_this.state = {
bodyHeight: 0
bodyHeight: 0,
activeSort: null
};

@@ -136,5 +202,8 @@ return _this;

if (this.props.fixedHead) {
this.setState(Object.assign({}, this.state, {
bodyHeight: this.parentHeight - this.tableHeadHeight
}));
var diff = this.parentHeight - this.tableHeadHeight;
if (diff !== this.state.bodyHeight) {
this.setState(Object.assign({}, this.state, {
bodyHeight: diff
}));
}
}

@@ -176,2 +245,4 @@ }

value: function render() {
var _this3 = this;
return _react2.default.createElement(

@@ -193,3 +264,24 @@ "table",

{ key: index },
column.name
_react2.default.createElement(
"div",
null,
_react2.default.createElement(
"div",
null,
column.name
),
_react2.default.createElement(
"div",
null,
column.sort && _react2.default.createElement(_Sort2.default, _extends({}, column.sort, { onChange: function onChange(type) {
_this3.setState(Object.assign({}, _this3.state, {
activeSort: _extends({}, column.sort, {
type: type
})
}), function () {
_this3.props.onSortChange(_this3.state.activeSort);
});
} }))
)
)
);

@@ -262,3 +354,7 @@ })

style: _propTypes2.default.object,
render: _propTypes2.default.func.isRequired
render: _propTypes2.default.func.isRequired,
sort: _propTypes2.default.shape({
field: _propTypes2.default.string.isRequired,
defaultType: _propTypes2.default.oneOf(['asc', 'desc', 'none'])
})
})).isRequired,

@@ -269,3 +365,4 @@ dataSource: _propTypes2.default.array,

renderDataEmpty: _propTypes2.default.func,
fixedHead: _propTypes2.default.bool
fixedHead: _propTypes2.default.bool,
onSortChange: _propTypes2.default.func
};

@@ -285,4 +382,7 @@ DataTable.defaultProps = {

);
},
onSortChange: function onSortChange() {
return null;
}
};
exports.default = DataTable;
+6
-6
components/Pagination.js

@@ -60,6 +60,6 @@ "use strict";

* @property {?Object} style - 样式
* @property {String} className [ pagination ] - css class样式,样式定义在`css/Pagination.css`
* @property {?Number} displayPageCount [ 5 ] - 最多可以显示多少页面
* @property {?Function} renderNextPage [ ()=>(">") ] - `>`按钮样式
* @property {?Function} renderPrevPage [ ()=>("<") ] - `<`按钮样式
* @property {String} className [pagination] - css class样式,样式定义在`css/Pagination.css`
* @property {?Number} displayPageCount [5] - 最多可以显示多少页面
* @property {?Function} renderNextPage [()=>(<img style={{width:20,height:20,transform:'rotate(180deg)'}} src={require('../assets/img/angle-left.svg')}/>)] - `>`按钮样式
* @property {?Function} renderPrevPage [()=>(<img style={{width:20,height:20}} src={require('../assets/img/angle-left.svg')}/>)] - `<`按钮样式
* */

@@ -274,8 +274,8 @@ function Pagination(props) {

renderNextPage: function renderNextPage() {
return ">";
return _react2.default.createElement("img", { style: { width: 20, height: 20, transform: 'rotate(180deg)' }, src: require('../assets/img/angle-left.svg') });
},
renderPrevPage: function renderPrevPage() {
return "<";
return _react2.default.createElement("img", { style: { width: 20, height: 20 }, src: require('../assets/img/angle-left.svg') });
}
};
exports.default = Pagination;
+2
-2
package.json
{
"name": "react-component-data-table",
"version": "1.2.0",
"version": "1.3.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": "./build",
"build": "./build.sh",
"publish": "npm publish --access public",

@@ -12,0 +12,0 @@ "win-dev": "set NODE_ENV=development&&webpack-dev-server --host 0.0.0.0 --inline --progress --colors --port 3000 --content-base src/",

+81
-9
README.md

@@ -14,8 +14,14 @@ # react-component-data-table

<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/datatable.png"/>
<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/screenshot/data-table-radio-and-checkbox.png"/>
<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/pagination.gif"/>
<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/screenshot/data-table-empty.png"/>
<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/datatablewithpagination.gif"/>
<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/screenshot/data-table-pagination.gif"/>
<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/screenshot/data-table-pagination2.gif"/>
<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/screenshot/data-table-fixed-head.gif"/>
<img src="https://raw.githubusercontent.com/m860/react-component-data-table/master/src/screenshot/data-table-sort.gif"/>
## Install

@@ -31,4 +37,3 @@

//如果需要自定义样式,请替换为自己的样式文件即可
import 'react-component-data-table/css/DataTable.css'
import 'react-component-data-table/css/Pagination.css'
import 'react-component-data-table/asstes/css/DataTable.css'
import {DataTable,Pagination,DataTableWithPagination} from 'react-component-data-table'

@@ -39,2 +44,8 @@ ```

### 1.3.0
- 优化bodyHeight的计算,当`fixedHead=true`时
- 调整了部分样式
- 添加排序
### 1.2.0

@@ -136,2 +147,59 @@

_Sort DataTable_
```javascript
class SortDataTable extends React.PureComponent {
...
onSortChange(sort) {
if (sort) {
let ds = [...this.state.dataSource];
ds.sort((a, b)=> {
if (sort.type === 'asc') {
if (a[sort.field] < b[sort.field]) {
return 1;
}
return 0;
}
else if (sort.type === 'desc') {
if (a[sort.field] > b[sort.field]) {
return 1;
}
return 0;
}
else {
//nothing
}
});
this.setState(
Object.assign({}, this.state, {
dataSource: ds
})
)
}
}
render() {
return (
<div
style={{height:300}}>
<DataTable
dataSource={this.state.dataSource}
renderDataEmpty={()=>''}
onSortChange={this.onSortChange.bind(this)}
columns={[{
name:"Name",
render:rowData=>rowData['name']
},{
name:"Age",
render:rowData=>rowData['age'],
sort:{
field:'age',
}
}]}></DataTable>
</div>
);
}
...
}
```
### propTypes

@@ -146,2 +214,5 @@

- `columns[].render` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)**
- `columns[].sort` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?**
- `columns[].sort.field` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)**
- `columns[].sort.defaultType` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** value is one of the none,asc,desc
- `dataSource` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)?** \[ \[] ]

@@ -152,2 +223,3 @@ - `style` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?**

- `fixedHead` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** [false] - 是否固定head
- `onSortChange` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [()=>null] - 当sort变化时调用

@@ -257,5 +329,5 @@ ## DataTableWithPagination

- `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 ] - 最多可以显示多少页面
- `renderNextPage` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [ ()=>(">") ] - `>`按钮样式
- `renderPrevPage` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [ ()=>("<") ] - `<`按钮样式
- `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] - 最多可以显示多少页面
- `renderNextPage` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [()=>(<img style={{width:20,height:20,transform:'rotate(180deg)'}} src={require('../assets/img/angle-left.svg')}/>)] - `>`按钮样式
- `renderPrevPage` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)?** [()=>(<img style={{width:20,height:20}} src={require('../assets/img/angle-left.svg')}/>)] - `<`按钮样式
-46
css/DataTable.css
.data-table {
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; }
-25
css/Pagination.css
.pagination {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
user-select: none; }
.pagination li {
list-style: none;
display: flex;
align-items: center; }
.pagination li a {
color: #5f6062;
outline: none;
text-decoration: none;
padding: 8px 12px;
border-radius: 4px;
display: block; }
.pagination li.disabled {
cursor: not-allowed; }
.pagination li.disabled a {
pointer-events: none;
color: gray; }
.pagination li.cur a {
color: white;
background-color: #ee6e73; }