Publish

- react-bootstrap-table2-editor@1.1.0
 - react-bootstrap-table2-example@1.0.5
 - react-bootstrap-table2-toolkit@1.1.0
 - react-bootstrap-table-next@1.2.0

README.md

@@ -13,7 +13,7 @@ Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-tab
 * [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
 * [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
 
-This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernal module(SRP).
+This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernel module(SRP).
 
 ## Migration
 If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./docs/migration.md).

docs/cell-edit.md

@@ -10,6 +10,7 @@ $ npm install react-bootstrap-table2-editor --save
 * [blurToSave](#blurToSave)
 * [nonEditableRows](#nonEditableRows)
 * [timeToCloseMessage](#timeToCloseMessage)
+* [autoSelectText](#autoSelectText)
 * [beforeSaveCell](#beforeSaveCell)
 * [afterSaveCell](#afterSaveCell)
 * [errorMessage](#errorMessage)
@@ -43,6 +44,11 @@ Default is `false`, enable it will be able to save the cell automatically when b
 ### <a name='nonEditableRows'>cellEdit.nonEditableRows - [Function]</a>
 `cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`)
 
+### <a name='autoSelectText'>cellEdit.autoSelectText - [Bool]</a>
+Default is false, when enable it, `react-bootstrap-table2` will help you to select the text in the text input automatically when editing.
+
+> NOTE: This props only work for `text` and `textarea`.
+
 ### <a name='timeToCloseMessage'>cellEdit.timeToCloseMessage - [Function]</a>
 If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
 

docs/columns.md

@@ -7,6 +7,7 @@ Available properties in a column object:
 * [text (**required**)](#text)
 
 #### Optional
+* [isDummyField](#isDummyField)
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
@@ -84,6 +85,11 @@ dataField: 'address.city'
 ## <a name='text'>column.text (**required**) - [String]</a>
 `text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
 
+## <a name='isDummyField'>column.isDummyField - [Bool]</a>
+Sometime, you just want to have a column which is not perform any data but just some action components. In this situation, we suggest you to use `isDummyField`. If column is dummy, the [`column.dataField`](#dataField) can be any string value, cause of it's meaningless.
+
+There's only one different for dummy column than normal column, which is dummy column will compare the whole row value instead of cell value when call `shouldComponentUpdate`.
+
 ## <a name='hidden'>column.hidden - [Bool]</a>
 `hidden` allow you to hide column when `true` given.
 

docs/row-expand.md

@@ -13,6 +13,7 @@
 * [onExpand](#onExpand)
 * [onExpandAll](#onExpandAll)
 * [showExpandColumn](#showExpandColumn)
+* [onlyOneExpanding](#onlyOneExpanding)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
 
@@ -127,3 +128,13 @@ const expandRow = {
   showExpandColumn: true
 };
 ```
+
+### <a name='onlyOneExpanding'>expandRow.onlyOneExpanding - [Bool]</a>
+Default is `false`. Enable this will only allow one row get expand at the same time.
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  onlyOneExpanding: true
+};
+```

docs/row-selection.md

@@ -16,6 +16,7 @@
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
 * [hideSelectColumn](#hideSelectColumn)
+* [hideSelectAll](#hideSelectAll)
 * [selectionRenderer](#selectionRenderer)
 * [selectionHeaderRenderer](#selectionHeaderRenderer)
 
@@ -222,3 +223,13 @@ const selectRow = {
   bgColor: 'red'
 };
 ```
+
+### <a name='hideSelectAll'>selectRow.hideSelectAll - [Bool]</a>
+Default is `false`, if you don't want to render the select all checkbox on the header of selection column, give this prop as `true`!
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  hideSelectAll: true
+};
+```

packages/react-bootstrap-table2-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {

packages/react-bootstrap-table2-editor/src/checkbox-editor.js

@@ -13,7 +13,9 @@ class CheckBoxEditor extends Component {
   }
 
   componentDidMount() {
+    const { didMount } = this.props;
     this.checkbox.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -28,7 +30,7 @@ class CheckBoxEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('editor edit-chseckbox checkbox', className);
     return (
       <input
@@ -50,12 +52,14 @@ CheckBoxEditor.propTypes = {
   ]),
   value: PropTypes.string,
   defaultValue: PropTypes.any,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  didMount: PropTypes.func
 };
 CheckBoxEditor.defaultProps = {
   className: '',
   value: 'on:off',
   defaultValue: false,
-  onChange: undefined
+  onChange: undefined,
+  didMount: undefined
 };
 export default CheckBoxEditor;

packages/react-bootstrap-table2-editor/src/context.js

@@ -23,6 +23,7 @@ export default (
         blurToSave: PropTypes.bool,
         beforeSaveCell: PropTypes.func,
         afterSaveCell: PropTypes.func,
+        onStartEdit: PropTypes.func,
         nonEditableRows: PropTypes.func,
         timeToCloseMessage: PropTypes.number,
         errorMessage: PropTypes.any
@@ -31,7 +32,7 @@ export default (
 
     constructor(props) {
       super(props);
-      EditingCell = props.cellEdit.editingCellFactory(_);
+      EditingCell = props.cellEdit.editingCellFactory(_, props.cellEdit.options.onStartEdit);
       this.startEditing = this.startEditing.bind(this);
       this.escapeEditing = this.escapeEditing.bind(this);
       this.completeEditing = this.completeEditing.bind(this);

packages/react-bootstrap-table2-editor/src/date-editor.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class DateEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.date.valueAsDate = new Date(defaultValue);
     this.date.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class DateEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-date', className);
     return (
       <input
@@ -33,10 +34,12 @@ DateEditor.propTypes = {
     PropTypes.string,
     PropTypes.object
   ]),
-  defaultValue: PropTypes.string
+  defaultValue: PropTypes.string,
+  didMount: PropTypes.func
 };
 DateEditor.defaultProps = {
   className: '',
-  defaultValue: ''
+  defaultValue: '',
+  didMount: undefined
 };
 export default DateEditor;

packages/react-bootstrap-table2-editor/src/dropdown-editor.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class DropDownEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.select.value = defaultValue;
     this.select.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class DropDownEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, options, ...rest } = this.props;
+    const { defaultValue, didMount, className, options, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-select', className);
 
     const attr = {
@@ -51,11 +52,13 @@ DropDownEditor.propTypes = {
       label: PropTypes.string,
       value: PropTypes.any
     }))
-  ]).isRequired
+  ]).isRequired,
+  didMount: PropTypes.func
 };
 DropDownEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  style: {}
+  style: {},
+  didMount: undefined
 };
 export default DropDownEditor;

packages/react-bootstrap-table2-editor/src/editing-cell.js

@@ -14,7 +14,7 @@ import TextEditor from './text-editor';
 import EditorIndicator from './editor-indicator';
 import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
 
-export default _ =>
+export default (_, onStartEdit) =>
   class EditingCell extends Component {
     static propTypes = {
       row: PropTypes.object.isRequired,
@@ -24,6 +24,7 @@ export default _ =>
       onUpdate: PropTypes.func.isRequired,
       onEscape: PropTypes.func.isRequired,
       timeToCloseMessage: PropTypes.number,
+      autoSelectText: PropTypes.bool,
       className: PropTypes.string,
       style: PropTypes.object
     }
@@ -31,6 +32,7 @@ export default _ =>
     static defaultProps = {
       timeToCloseMessage: TIME_TO_CLOSE_MESSAGE,
       className: null,
+      autoSelectText: false,
       style: {}
     }
 
@@ -121,7 +123,7 @@ export default _ =>
 
     render() {
       let editor;
-      const { row, column, className, style, rowIndex, columnIndex } = this.props;
+      const { row, column, className, style, rowIndex, columnIndex, autoSelectText } = this.props;
       const { dataField } = column;
 
       const value = _.get(row, dataField);
@@ -151,6 +153,10 @@ export default _ =>
         onBlur: this.handleBlur
       };
 
+      if (onStartEdit) {
+        editorProps.didMount = () => onStartEdit(row, column, rowIndex, columnIndex);
+      }
+
       const isDefaultEditorDefined = _.isObject(column.editor);
 
       if (isDefaultEditorDefined) {
@@ -170,13 +176,13 @@ export default _ =>
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
         editor = <DropdownEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
-        editor = <TextAreaEditor { ...editorProps } />;
+        editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {
         editor = <CheckBoxEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.DATE) {
         editor = <DateEditor { ...editorProps } />;
       } else {
-        editor = <TextEditor { ...editorProps } />;
+        editor = <TextEditor { ...editorProps } autoSelectText={ autoSelectText } />;
       }
 
       return (

packages/react-bootstrap-table2-editor/src/text-editor.js

@@ -5,9 +5,11 @@ import PropTypes from 'prop-types';
 
 class TextEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount, autoSelectText } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (autoSelectText) this.text.select();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +17,7 @@ class TextEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
@@ -36,10 +38,14 @@ TextEditor.propTypes = {
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ])
+  ]),
+  autoSelectText: PropTypes.bool,
+  didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
   className: null,
-  defaultValue: ''
+  defaultValue: '',
+  autoSelectText: false,
+  didMount: undefined
 };
 export default TextEditor;

packages/react-bootstrap-table2-editor/src/textarea-editor.js

@@ -10,9 +10,11 @@ class TextAreaEditor extends Component {
   }
 
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount, autoSelectText } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (autoSelectText) this.text.select();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -27,7 +29,7 @@ class TextAreaEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-textarea', className);
     return (
       <textarea
@@ -50,11 +52,15 @@ TextAreaEditor.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
-  onKeyDown: PropTypes.func
+  onKeyDown: PropTypes.func,
+  autoSelectText: PropTypes.bool,
+  didMount: PropTypes.func
 };
 TextAreaEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  onKeyDown: undefined
+  autoSelectText: false,
+  onKeyDown: undefined,
+  didMount: undefined
 };
 export default TextAreaEditor;

packages/react-bootstrap-table2-example/examples/cell-edit/auto-select-text-input-table.js

@@ -0,0 +1,78 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={
+    cellEditFactory({
+      mode: 'click',
+      autoSelectText: true
+    })
+  }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Auto Select Text Input Field When Editing</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={
+        cellEditFactory({
+          mode: 'click',
+          autoSelectText: true
+        })
+      }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js

@@ -41,6 +41,7 @@ const columns = [{
   columns={ columns }
   cellEdit={ cellEditFactory({
     mode: 'click',
+    onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('start to edit!!!'); },
     beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
     afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
   }) }
@@ -55,6 +56,7 @@ export default () => (
       columns={ columns }
       cellEdit={ cellEditFactory({
         mode: 'click',
+        onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('Start to edit!!!'); },
         beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
         afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
       }) }

packages/react-bootstrap-table2-example/examples/cell-edit/checkbox-editor-table.js

@@ -52,7 +52,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Checkbox Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ todos }

packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js

@@ -118,7 +118,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Custom Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ products }

packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js

@@ -65,7 +65,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Date Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ stocks }

packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js

@@ -56,7 +56,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Textarea Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ jobs }

packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js

@@ -0,0 +1,221 @@
+/* eslint jsx-a11y/label-has-for: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+
+
+const products = [
+  { id: 12, name: 'Item 12', price: 12.5, inStock: false },
+  { id: 13, name: 'Item 13', price: 13.5, inStock: true },
+  { id: 14, name: 'Item 14', price: 14.5, inStock: true }
+];
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price'
+  },
+  {
+    dataField: 'inStock',
+    text: 'In Stock',
+    formatter: (cellContent, row) => (
+      <div className="checkbox disabled">
+        <label>
+          <input type="checkbox" checked={ row.inStock } disabled />
+        </label>
+      </div>
+    )
+  },
+  {
+    dataField: 'df1',
+    isDummyField: true,
+    text: 'Action 1',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  },
+  {
+    dataField: 'df2',
+    isDummyField: true,
+    text: 'Action 2',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price'
+  },
+  {
+    dataField: 'inStock',
+    text: 'In Stock',
+    formatter: (cellContent, row) => (
+      <div className="checkbox disabled">
+        <label>
+          <input type="checkbox" checked={ row.inStock } disabled />
+        </label>
+      </div>
+    )
+  },
+  {
+    dataField: 'df1',
+    isDummyField: true,
+    text: 'Action 1',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  },
+  {
+    dataField: 'df2',
+    isDummyField: true,
+    text: 'Action 2',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  }
+];
+
+class ProductList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { products };
+  }
+
+  toggleInStock = () => {
+    let newProducts = [...this.state.products];
+    newProducts = newProducts.map((d) => {
+      if (d.id === 13) {
+        return {
+          ...d,
+          inStock: !d.inStock
+        };
+      }
+      return d;
+    });
+    this.setState(curr => ({ ...curr, products: newProducts }));
+  };
+
+  render() {
+    return (
+      <div>
+        <h1 className="h2">Products</h1>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.products }
+          columns={ columns }
+        />
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+      </div>
+    );
+  }
+}
+`;
+
+class ProductList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { products };
+  }
+
+  toggleInStock = () => {
+    let newProducts = [...this.state.products];
+    newProducts = newProducts.map((d) => {
+      if (d.id === 13) {
+        return {
+          ...d,
+          inStock: !d.inStock
+        };
+      }
+      return d;
+    });
+    this.setState(curr => ({ ...curr, products: newProducts }));
+  };
+
+  render() {
+    return (
+      <div>
+        <h3>Action 1 and Action 2 are dummy column</h3>
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.products }
+          columns={ columns }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+
+export default ProductList;

packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js

@@ -0,0 +1,98 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const MyExportCSV = (props) => {
+  const handleClick = () => {
+    props.onExport();
+  };
+  return (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
+    </div>
+  );
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV
+>
+  {
+    props => (
+      <div>
+        <BootstrapTable { ...props.baseProps } />
+        <hr />
+        <MyExportCSV { ...props.csvProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const MyExportCSV = (props) => {
+  const handleClick = () => {
+    // passing my custom data
+    props.onExport(products.filter(r => r.id > 2));
+  };
+  return (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Only export Product ID bigger than 2</button>
+    </div>
+  );
+};
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV
+    >
+      {
+        props => (
+          <div>
+            <BootstrapTable { ...props.baseProps } />
+            <hr />
+            <MyExportCSV { ...props.csvProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/csv/export-only-selected.js

@@ -0,0 +1,140 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ExportCSVButton } = CSVExport;
+const products1 = productsGenerator(15);
+const products2 = productsGenerator(15);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products1 }
+  columns={ columns }
+  exportCSV={ { onlyExportSelection: true, exportAll: true } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          selectRow={ selectRow }
+          pagination={ paginationFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+
+<ToolkitProvider
+  keyField="id"
+  data={ products2 }
+  columns={ columns }
+  exportCSV={ { onlyExportSelection: true, exportAll: false } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          selectRow={ selectRow }
+          pagination={ paginationFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+export default () => (
+  <div>
+    <h3>Export all selected row</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products1 }
+      columns={ columns }
+      exportCSV={ { onlyExportSelection: true, exportAll: true } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              selectRow={ selectRow }
+              pagination={ paginationFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <h3>Export all selected rows in currect visible rows</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products2 }
+      columns={ columns }
+      exportCSV={ { onlyExportSelection: true, exportAll: false } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              selectRow={ selectRow }
+              pagination={ paginationFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  onlyOneExpanding: true,
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  hideSelectAll: true
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  hideSelectAll: true
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/search/default-search.js

@@ -0,0 +1,83 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ { defaultSearch: '2101' } }
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search={ { defaultSearch: '2101' } }
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "",
   "main": "index.js",
   "private": true,
@@ -15,7 +15,7 @@
   "peerDependencies": {
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
-    "react-dom": "^116.3.0"
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "@storybook/addon-console": "^1.0.0",

packages/react-bootstrap-table2-example/stories/index.js

@@ -30,6 +30,7 @@ import ColumnTitleTable from 'examples/columns/column-title-table';
 import ColumnEventTable from 'examples/columns/column-event-table';
 import ColumnHiddenTable from 'examples/columns/column-hidden-table';
 import ColumnAttrsTable from 'examples/columns/column-attrs-table';
+import DummyColumnTable from 'examples/columns/dummy-column-table';
 
 // work on header columns
 import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -96,6 +97,7 @@ import CellEditHooks from 'examples/cell-edit/cell-edit-hooks-table';
 import CellEditValidator from 'examples/cell-edit/cell-edit-validator-table';
 import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table';
 import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table';
+import AutoSelectTextInput from 'examples/cell-edit/auto-select-text-input-table';
 import EditorStyleTable from 'examples/cell-edit/editor-style-table';
 import EditorClassTable from 'examples/cell-edit/editor-class-table';
 import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table';
@@ -114,6 +116,7 @@ import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-sele
 import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
+import HideSelectAllTable from 'examples/row-selection/hide-select-all';
 import CustomSelectionTable from 'examples/row-selection/custom-selection';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
@@ -125,6 +128,7 @@ import BasicRowExpand from 'examples/row-expand';
 import RowExpandManagement from 'examples/row-expand/expand-management';
 import NonExpandableRows from 'examples/row-expand/non-expandable-rows';
 import ExpandColumn from 'examples/row-expand/expand-column';
+import ExpandOnlyOne from 'examples/row-expand/expand-only-one';
 import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
 import ExpandHooks from 'examples/row-expand/expand-hooks';
 
@@ -135,6 +139,7 @@ import CustomPaginationTable from 'examples/pagination/custom-pagination';
 
 // search
 import SearchTable from 'examples/search';
+import DefaultSearch from 'examples/search/default-search';
 import DefaultCustomSearch from 'examples/search/default-custom-search';
 import FullyCustomSearch from 'examples/search/fully-custom-search';
 import SearchFormattedData from 'examples/search/search-formatted';
@@ -145,8 +150,10 @@ import ExportCSV from 'examples/csv';
 import CSVFormatter from 'examples/csv/csv-column-formatter';
 import CustomCSVHeader from 'examples/csv/custom-csv-header';
 import HideCSVColumn from 'examples/csv/hide-column';
+import ExportOnlySelected from 'examples/csv/export-only-selected';
 import CSVColumnType from 'examples/csv/csv-column-type';
 import CustomCSVButton from 'examples/csv/custom-csv-button';
+import ExportCustomData from 'examples/csv/export-custom-data';
 import CustomCSV from 'examples/csv/custom-csv';
 
 // loading overlay
@@ -201,7 +208,8 @@ storiesOf('Work on Columns', module)
   .add('Column Event', () => <ColumnEventTable />)
   .add('Customize Column Class', () => <ColumnClassTable />)
   .add('Customize Column Style', () => <ColumnStyleTable />)
-  .add('Customize Column HTML attribute', () => <ColumnAttrsTable />);
+  .add('Customize Column HTML attribute', () => <ColumnAttrsTable />)
+  .add('Dummy Column', () => <DummyColumnTable />);
 
 storiesOf('Work on Header Columns', module)
   .addDecorator(bootstrapStyle())
@@ -272,6 +280,7 @@ storiesOf('Cell Editing', module)
   .add('Cell Level Editable', () => <CellLevelEditable />)
   .add('Rich Hook Functions', () => <CellEditHooks />)
   .add('Validation', () => <CellEditValidator />)
+  .add('Auto Select Text Input', () => <AutoSelectTextInput />)
   .add('Custom Cell Style', () => <CellEditStyleTable />)
   .add('Custom Cell Classes', () => <CellEditClassTable />)
   .add('Custom Editor Classes', () => <EditorClassTable />)
@@ -293,6 +302,7 @@ storiesOf('Row Selection', module)
   .add('Selection without Data', () => <SelectionNoDataTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)
+  .add('Hide Select All', () => <HideSelectAllTable />)
   .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
@@ -305,6 +315,7 @@ storiesOf('Row Expand', module)
   .add('Expand Management', () => <RowExpandManagement />)
   .add('Non Expandabled Rows', () => <NonExpandableRows />)
   .add('Expand Indicator', () => <ExpandColumn />)
+  .add('Expand Only One Row at The Same Time', () => <ExpandOnlyOne />)
   .add('Custom Expand Indicator', () => <CustomExpandColumn />)
   .add('Expand Hooks', () => <ExpandHooks />);
 
@@ -317,6 +328,7 @@ storiesOf('Pagination', module)
 storiesOf('Table Search', module)
   .addDecorator(bootstrapStyle())
   .add('Basic Search Table', () => <SearchTable />)
+  .add('Default Search Table', () => <DefaultSearch />)
   .add('Default Custom Search', () => <DefaultCustomSearch />)
   .add('Fully Custom Search', () => <FullyCustomSearch />)
   .add('Search Fromatted Value', () => <SearchFormattedData />)
@@ -328,8 +340,10 @@ storiesOf('Export CSV', module)
   .add('Format CSV Column', () => <CSVFormatter />)
   .add('Custom CSV Header', () => <CustomCSVHeader />)
   .add('Hide CSV Column', () => <HideCSVColumn />)
+  .add('Only Export Selected Rows', () => <ExportOnlySelected />)
   .add('CSV Column Type', () => <CSVColumnType />)
   .add('Custom CSV Button', () => <CustomCSVButton />)
+  .add('Export Custom Data', () => <ExportCustomData />)
   .add('Custom CSV', () => <CustomCSV />);
 
 storiesOf('EmptyTableOverlay', module)

packages/react-bootstrap-table2-toolkit/README.md

@@ -63,6 +63,22 @@ const { SearchBar } = Search;
 
 ### Search Options
 
+#### defaultSearch - [string]
+Accept a string that will be used for default searching when first time table render.
+
+```js
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ {
+    defaultSearch: 'search something here'
+  } }
+>
+  // ...
+</ToolkitProvider>
+```
+
 #### searchFormatted - [bool]
 If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
 
@@ -124,3 +140,6 @@ Default is `true`.
 
 #### exportAll - [bool]
 Default is `true`. `false` will only export current data which display on table.
+
+#### onlyExportSelection - [bool]
+Default is `false`. `true` will only export the data which is selected.

packages/react-bootstrap-table2-toolkit/context.js

@@ -17,6 +17,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
     search: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.shape({
+        defaultSearch: PropTypes.string,
         searchFormatted: PropTypes.bool
       })
     ]),
@@ -26,7 +27,9 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
         fileName: PropTypes.string,
         separator: PropTypes.string,
         ignoreHeader: PropTypes.bool,
-        noAutoBOM: PropTypes.bool
+        noAutoBOM: PropTypes.bool,
+        exportAll: PropTypes.bool,
+        onlyExportSelection: PropTypes.bool
       })
     ])
   }
@@ -40,7 +43,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
   constructor(props) {
     super(props);
     this.state = {
-      searchText: ''
+      searchText: typeof props.search === 'object' ? (props.search.defaultSearch || '') : ''
     };
     this._ = null;
     this.onSearch = this.onSearch.bind(this);
@@ -83,6 +86,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
     return (
       <ToolkitContext.Provider value={ {
         searchProps: {
+          searchText: this.state.searchText,
           onSearch: this.onSearch
         },
         csvProps: {

packages/react-bootstrap-table2-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-toolkit",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "The toolkit for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-toolkit/src/csv/button.js

@@ -11,7 +11,7 @@ const ExportCSVButton = (props) => {
   return (
     <button
       type="button"
-      onClick={ onExport }
+      onClick={ () => onExport() }
       { ...rest }
     >
       { children }

packages/react-bootstrap-table2-toolkit/src/csv/exporter.js

@@ -58,7 +58,7 @@ export const save = (
   }
 ) => {
   FileSaver.saveAs(
-    new Blob(['\ufeff', content], { type: 'text/plain;charset=utf-8' }),
+    new Blob([content], { type: 'text/plain;charset=utf-8' }),
     fileName,
     noAutoBOM
   );

packages/react-bootstrap-table2-toolkit/src/op/csv.js

@@ -5,13 +5,14 @@ const csvDefaultOptions = {
   separator: ',',
   ignoreHeader: false,
   noAutoBOM: true,
-  exportAll: true
+  exportAll: true,
+  onlyExportSelection: false
 };
 
 export default Base =>
   class CSVOperation extends Base {
-    handleExportCSV = () => {
-      const { columns, exportCSV } = this.props;
+    handleExportCSV = (source) => {
+      const { columns, exportCSV, keyField } = this.props;
       const meta = getMetaInfo(columns);
       const options = exportCSV === true ?
         csvDefaultOptions :
@@ -20,7 +21,19 @@ export default Base =>
           ...exportCSV
         };
 
-      const data = options.exportAll ? this.props.data : this.getData();
+      // get data for csv export
+      let data;
+      if (typeof source !== 'undefined') {
+        data = source;
+      } else {
+        data = options.exportAll ? this.props.data : this.getData();
+      }
+
+      // filter data
+      if (options.onlyExportSelection) {
+        const selections = this.getSelected();
+        data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
+      }
       const content = transform(data, meta, this._.get, options);
       save(content, options);
     }

packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js

@@ -47,6 +47,7 @@ const SearchBar = ({
       style={ style }
       onKeyUp={ () => debounceCallback() }
       className={ `form-control ${className}` }
+      defaultValue={ searchText }
       placeholder={ placeholder || SearchBar.defaultProps.placeholder }
       { ...rest }
     />

packages/react-bootstrap-table2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Next generation of react-bootstrap-table",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -146,6 +146,7 @@ BootstrapTable.propTypes = {
     mode: PropTypes.oneOf([Const.ROW_SELECT_SINGLE, Const.ROW_SELECT_MULTIPLE]).isRequired,
     clickToSelect: PropTypes.bool,
     clickToEdit: PropTypes.bool,
+    hideSelectAll: PropTypes.bool,
     onSelect: PropTypes.func,
     onSelectAll: PropTypes.func,
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
@@ -165,6 +166,7 @@ BootstrapTable.propTypes = {
     onExpandAll: PropTypes.func,
     nonExpandable: PropTypes.array,
     showExpandColumn: PropTypes.bool,
+    onlyOneExpanding: PropTypes.bool,
     expandColumnRenderer: PropTypes.func,
     expandHeaderColumnRenderer: PropTypes.func
   }),

packages/react-bootstrap-table2/src/cell.js

@@ -11,9 +11,18 @@ class Cell extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    const shouldUpdate =
-      _.get(this.props.row, this.props.column.dataField)
-        !== _.get(nextProps.row, nextProps.column.dataField) ||
+    let shouldUpdate = false;
+    if (nextProps.column.isDummyField) {
+      shouldUpdate = !_.isEqual(this.props.row, nextProps.row);
+    } else {
+      shouldUpdate =
+        _.get(this.props.row, this.props.column.dataField)
+          !== _.get(nextProps.row, nextProps.column.dataField);
+    }
+
+    if (shouldUpdate) return true;
+
+    shouldUpdate =
       this.props.column.hidden !== nextProps.column.hidden ||
       this.props.rowIndex !== nextProps.rowIndex ||
       this.props.columnIndex !== nextProps.columnIndex ||
@@ -64,7 +73,7 @@ class Cell extends Component {
       formatExtraData
     } = column;
     const attrs = { ...rest };
-    let content = _.get(row, dataField);
+    let content = column.isDummyField ? null : _.get(row, dataField);
 
     if (formatter) {
       content = column.formatter(content, row, rowIndex, formatExtraData);

packages/react-bootstrap-table2/src/contexts/index.js

@@ -269,8 +269,9 @@ const withContext = Base =>
     }
 
     render() {
-      const { keyField, columns, bootstrap4 } = this.props;
+      const { keyField, columns, bootstrap4, registerExposedAPI } = this.props;
       const baseProps = { keyField, columns };
+      if (registerExposedAPI) baseProps.registerExposedAPI = registerExposedAPI;
 
       let base = this.renderBase();
 

packages/react-bootstrap-table2/src/contexts/row-expand-context.js

@@ -25,12 +25,13 @@ export default (
     }
 
     handleRowExpand = (rowKey, expanded, rowIndex, e) => {
-      const { data, keyField, expandRow: { onExpand } } = this.props;
+      const { data, keyField, expandRow: { onExpand, onlyOneExpanding } } = this.props;
 
       let currExpanded = [...this.state.expanded];
 
       if (expanded) {
-        currExpanded.push(rowKey);
+        if (onlyOneExpanding) currExpanded = [rowKey];
+        else currExpanded.push(rowKey);
       } else {
         currExpanded = currExpanded.filter(value => value !== rowKey);
       }

packages/react-bootstrap-table2/src/contexts/selection-context.js

@@ -15,6 +15,14 @@ export default (
       keyField: PropTypes.string.isRequired
     }
 
+    constructor(props) {
+      super(props);
+      if (props.registerExposedAPI) {
+        const getSelected = () => this.getSelected();
+        props.registerExposedAPI(getSelected);
+      }
+    }
+
     state = { selected: (this.props.selectRow && this.props.selectRow.selected) || [] };
 
     componentWillReceiveProps(nextProps) {
@@ -25,6 +33,11 @@ export default (
       }
     }
 
+    // exposed API
+    getSelected() {
+      return this.state.selected;
+    }
+
     handleRowSelect = (rowKey, checked, rowIndex, e) => {
       const { data, keyField, selectRow: { mode, onSelect } } = this.props;
       const { ROW_SELECT_SINGLE } = Const;
@@ -67,7 +80,15 @@ export default (
       }
 
       if (onSelectAll) {
-        onSelectAll(!isUnSelect, dataOperator.getSelectedRows(data, keyField, currSelected), e);
+        onSelectAll(
+          !isUnSelect,
+          dataOperator.getSelectedRows(
+            data,
+            keyField,
+            isUnSelect ? this.state.selected : currSelected
+          ),
+          e
+        );
       }
 
       this.setState(() => ({ selected: currSelected }));

packages/react-bootstrap-table2/src/header-cell.js

@@ -49,6 +49,7 @@ const HeaderCell = (props) => {
 
   if (headerStyle) {
     cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
+    cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
   }
 
   if (headerTitle) {
@@ -114,6 +115,7 @@ HeaderCell.propTypes = {
   column: PropTypes.shape({
     dataField: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
+    isDummyField: PropTypes.bool,
     hidden: PropTypes.bool,
     headerFormatter: PropTypes.func,
     formatter: PropTypes.func,

packages/react-bootstrap-table2/src/row-event-delegater.js

@@ -5,7 +5,8 @@ const events = [
   'onClick',
   'onDoubleClick',
   'onMouseEnter',
-  'onMouseLeave'
+  'onMouseLeave',
+  'onContextMenu'
 ];
 
 export default ExtendBase =>

packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js

@@ -27,6 +27,7 @@ export default class SelectionHeaderCell extends Component {
     mode: PropTypes.string.isRequired,
     checkedStatus: PropTypes.string,
     onAllRowsSelect: PropTypes.func,
+    hideSelectAll: PropTypes.bool,
     selectionHeaderRenderer: PropTypes.func
   }
 
@@ -63,7 +64,10 @@ export default class SelectionHeaderCell extends Component {
       CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_MULTIPLE
     } = Const;
 
-    const { mode, checkedStatus, selectionHeaderRenderer } = this.props;
+    const { mode, checkedStatus, selectionHeaderRenderer, hideSelectAll } = this.props;
+    if (hideSelectAll) {
+      return <th data-row-selection />;
+    }
 
     const checked = checkedStatus === CHECKBOX_STATUS_CHECKED;
 

packages/react-bootstrap-table2/test/cell.test.js

@@ -177,22 +177,45 @@ describe('Cell', () => {
     let props;
     let nextProps;
 
-    describe('when content is change', () => {
-      const column = { dataField: 'name', text: 'Product Name' };
-      beforeEach(() => {
-        props = {
-          row,
-          columnIndex: 1,
-          rowIndex: 1,
-          column
-        };
-        wrapper = shallow(
-          <Cell { ...props } />);
-      });
+    describe('if column.isDummyField is false', () => {
+      describe('when content is change', () => {
+        const column = { dataField: 'name', text: 'Product Name' };
+        beforeEach(() => {
+          props = {
+            row,
+            columnIndex: 1,
+            rowIndex: 1,
+            column
+          };
+          wrapper = shallow(
+            <Cell { ...props } />);
+        });
 
-      it('should return true', () => {
-        nextProps = { ...props, row: { id: 1, name: 'CDE' } };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        it('should return true', () => {
+          nextProps = { ...props, row: { id: 1, name: 'CDE' } };
+          expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        });
+      });
+    });
+
+    describe('if column.isDummyField is true', () => {
+      describe('when content is change', () => {
+        const column = { dataField: '', text: 'Product Name', isDummyField: true };
+        beforeEach(() => {
+          props = {
+            row,
+            columnIndex: 1,
+            rowIndex: 1,
+            column
+          };
+          wrapper = shallow(
+            <Cell { ...props } />);
+        });
+
+        it('should return true', () => {
+          nextProps = { ...props, row: { id: 1, name: 'CDE', test: 'This is new Field' } };
+          expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        });
       });
     });
 

packages/react-bootstrap-table2/test/contexts/selection-context.test.js

@@ -220,6 +220,25 @@ describe('DataContext', () => {
       it('should set state.selected correctly', () => {
         expect(wrapper.state('selected')).toEqual(data.map(d => d[keyField]));
       });
+
+      describe('when selectRow.onSelectAll is defined', () => {
+        const onSelectAll = jest.fn();
+        beforeEach(() => {
+          wrapper = shallow(shallowContext({
+            ...defaultSelectRow,
+            onSelectAll
+          }));
+          wrapper.instance().handleAllRowsSelect(e, false);
+        });
+
+        it('should call selectRow.onSelectAll correctly', () => {
+          expect(onSelectAll).toHaveBeenCalledWith(
+            true,
+            dataOperator.getSelectedRows(data, keyField, wrapper.state('selected')),
+            e
+          );
+        });
+      });
     });
 
     describe('when isUnSelect argument is true', () => {
@@ -234,24 +253,25 @@ describe('DataContext', () => {
       it('should set state.selected correctly', () => {
         expect(wrapper.state('selected')).toEqual([]);
       });
-    });
 
-    describe('when selectRow.onSelectAll is defined', () => {
-      const onSelectAll = jest.fn();
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({
-          ...defaultSelectRow,
-          onSelectAll
-        }));
-        wrapper.instance().handleAllRowsSelect(e, false);
-      });
+      describe('when selectRow.onSelectAll is defined', () => {
+        const onSelectAll = jest.fn();
+        beforeEach(() => {
+          wrapper = shallow(shallowContext({
+            ...defaultSelectRow,
+            selected: data.map(d => d[keyField]),
+            onSelectAll
+          }));
+          wrapper.instance().handleAllRowsSelect(e, true);
+        });
 
-      it('should call selectRow.onSelectAll correctly', () => {
-        expect(onSelectAll).toHaveBeenCalledWith(
-          true,
-          dataOperator.getSelectedRows(data, keyField, wrapper.state('selected')),
-          e
-        );
+        it('should call selectRow.onSelectAll correctly', () => {
+          expect(onSelectAll).toHaveBeenCalledWith(
+            false,
+            dataOperator.getSelectedRows(data, keyField, data.map(d => d[keyField])),
+            e
+          );
+        });
       });
     });
   });

packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js

@@ -104,6 +104,22 @@ describe('<SelectionHeaderCell />', () => {
   });
 
   describe('render', () => {
+    describe('when props.hideSelectAll is true', () => {
+      beforeEach(() => {
+        const checkedStatus = Const.CHECKBOX_STATUS_CHECKED;
+
+        wrapper = shallow(
+          <SelectionHeaderCell mode="checkbox" checkedStatus={ checkedStatus } hideSelectAll />
+        );
+      });
+
+      it('should render empty th element', () => {
+        expect(wrapper.find('th').length).toBe(1);
+        expect(wrapper.find('th[data-row-selection]').length).toBe(1);
+        expect(wrapper.find(CheckBox).length).toBe(0);
+      });
+    });
+
     describe('when props.mode is radio', () => {
       beforeEach(() => {
         const checkedStatus = Const.CHECKBOX_STATUS_CHECKED;