Merge branch 'master' of https://github.com/AllenFang/react-bootstrap-table

Author: AllenFang

examples/js/selection/all-select.js

@@ -0,0 +1,88 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(100);
+
+const options = {
+  sizePerPageList: [ 5, 10, 15, 20 ],
+  sizePerPage: 10,
+  sortName: 'id',
+  sortOrder: 'desc'
+};
+const selectRowProp = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  bgColor: 'rgb(238, 193, 213)'
+};
+const filterOptions = {
+  type: 'TextFilter',
+  placeholder: 'Product Name'
+};
+
+export default class SelectAll extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: [],
+      filteredProducts: products
+    };
+  }
+
+  onSelect(row, isSelected) {
+    const selectedProducts = this.state.selected;
+    if (isSelected) {
+      selectedProducts.push(row.id);
+    } else {
+      const index = selectedProducts
+        .indexOf(row.universalId);
+      selectedProducts.splice(index, 1);
+    }
+    this.setState({ selected: selectedProducts });
+  }
+
+  onSelectAll(isSelected) {
+    const items = isSelected
+        ? this.state.filteredProducts.map(product => product.id)
+        : [];
+    this.setState({ selected: items });
+  }
+
+  afterColumnFilter(filterConds, result) {
+    this.setState({ filteredProducts: result });
+  }
+
+  render() {
+    Object.assign(selectRowProp, {
+      selected: this.state.selected,
+      onSelect: this.onSelect.bind(this),
+      onSelectAll: this.onSelectAll.bind(this) });
+    Object.assign(options, {
+      afterColumnFilter: this.afterColumnFilter.bind(this) });
+
+    return (
+      <div>
+        <div>Product selected: { this.state.selected.length }</div>
+        <BootstrapTable ref='table' selectRow={ selectRowProp } data={ products } pagination={ true } options={ options }>
+          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name' filter={ filterOptions }>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+        </BootstrapTable>
+      </div>
+   );
+  }
+}

examples/js/selection/demo.js

@@ -12,6 +12,7 @@ import SelectValidationTable from './select-validation-table';
 import RowClickTable from './row-click-table';
 import OnlySelectedTable from './only-show-selected-table';
 import ExternallyManagedSelection from './externally-managed-selection';
+import SelectAll from './all-select';
 
 class Demo extends React.Component {
   render() {
@@ -126,6 +127,15 @@ class Demo extends React.Component {
             </div>
           </div>
         </div>
+        <div className='col-md-offset-1 col-md-8'>
+          <div className='panel panel-default'>
+            <div className='panel-heading'>Select all (with pagination and filter)</div>
+            <div className='panel-body'>
+              <h5>Source in all-select.js</h5>
+              <SelectAll />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }