diff --git a/.babelrc b/.babelrc
index d9be6a0..ab45781 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
{
"plugins": ["react-hot-loader/babel", "transform-object-rest-spread"],
- "presets": [ "react", "es2015"]
+ "presets": [ "react", "env"]
}
diff --git a/demo/components/app.js b/demo/components/app.js
index 3bf69ab..cadba7e 100644
--- a/demo/components/app.js
+++ b/demo/components/app.js
@@ -27,6 +27,8 @@ export default class App extends Component {
pageNum: 1,
pageSize: 5,
gender: 'All',
+ selectedPages: [],
+ isSelectAll: false,
};
this.toggleBorderd = this.toggleBorderd.bind(this);
@@ -89,6 +91,43 @@ export default class App extends Component {
data: this.state.data.slice((this.state.pageNum - 1) * this.state.pageSize, this.state.pageSize * this.state.pageNum),
caption: { content: 'Projection Grid React' },
cols: [
+ {
+ key: 'Select',
+ $td: {
+ content: ({ data, isHeader }, content) => {
+ if (isHeader) {
+ return -1} onChange={(e) => {
+ const { checked } = e.target;
+
+ this.setState({
+ isSelectAll: false,
+ selectedPages: checked ? [...this.state.selectedPages, this.state.pageNum] : _.without(this.state.selectedPages, this.state.pageNum),
+ data: this.state.data.map((record, index) => {
+ if (index >= (this.state.pageNum - 1) * this.state.pageSize && index < this.state.pageNum * this.state.pageSize) {
+ return _.defaults({}, { isSelected: checked }, record);
+ }
+
+ return record;
+ }),
+ });
+ }} type="checkbox"/>;
+ }
+
+ return {
+ this.setState({
+ isSelectAll: false,
+ data: this.state.data.map((record) => {
+ if (record.UserName === data.UserName) {
+ return _.defaults({}, { isSelected: e.target.checked }, record);
+ }
+
+ return record;
+ }),
+ });
+ }} type="checkbox"/>;
+ },
+ },
+ },
{
key: 'UserName',
$td: this.state.icon ? {
@@ -221,6 +260,25 @@ export default class App extends Component {
+
+ {this.state.data.filter(_.property('isSelected')).map((d, index) => (
+ {d.UserName}
+ ))}
+
+