Publish

- react-bootstrap-table2-example@1.0.6
 - react-bootstrap-table2-paginator@1.0.3
 - react-bootstrap-table2-toolkit@1.1.1
 - react-bootstrap-table-next@1.2.1

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

@@ -13,6 +13,7 @@ Available properties in a column object:
 * [formatExtraData](#formatExtraData)
 * [sort](#sort)
 * [sortFunc](#sortFunc)
+* [sortCaret](#sortCaret)
 * [onSort](#onSort)
 * [classes](#classes)
 * [style](#style)
@@ -154,6 +155,20 @@ Enable the column sort via a `true` value given.
 }
 ```
 
+## <a name='sortCaret'>column.sortCaret - [Function]</a>
+Use`column.sortCaret` to custom the sort caret. This callback function accept two arguments: `order` and `column`
+
+```js
+{
+  // omit...
+  sort: true,
+  sortCaret: (order, column) => {
+    return //...
+  }
+}
+```
+> The possible value of `order` argument is **`asc`**, **`desc`** and **`undefined`**.
+
 ## <a name='classes'>column.classes - [String | Function]</a>
 It's available to have custom class on table column:
 

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.1",
+  "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/editing-cell.js

@@ -24,6 +24,7 @@ export default (_, onStartEdit) =>
       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 (_, onStartEdit) =>
     static defaultProps = {
       timeToCloseMessage: TIME_TO_CLOSE_MESSAGE,
       className: null,
+      autoSelectText: false,
       style: {}
     }
 
@@ -121,7 +123,7 @@ export default (_, onStartEdit) =>
 
     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);
@@ -174,13 +176,13 @@ export default (_, onStartEdit) =>
       } 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,10 @@ import PropTypes from 'prop-types';
 
 class TextEditor extends Component {
   componentDidMount() {
-    const { defaultValue, didMount } = this.props;
+    const { defaultValue, didMount, autoSelectText } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (autoSelectText) this.text.select();
     if (didMount) didMount();
   }
 
@@ -16,7 +17,7 @@ class TextEditor extends Component {
   }
 
   render() {
-    const { defaultValue, didMount, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
@@ -38,11 +39,13 @@ TextEditor.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
+  autoSelectText: PropTypes.bool,
   didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
   className: null,
   defaultValue: '',
+  autoSelectText: false,
   didMount: undefined
 };
 export default TextEditor;

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

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

packages/react-bootstrap-table2-example/examples/basic/exposed-function.js

@@ -0,0 +1,182 @@
+/* eslint no-return-assign: 0 */
+/* eslint no-console: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(63);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter()
+}];
+
+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'
+}];
+
+class ExposedFunctionTable extends React.Component {
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
+  handleGetSelectedData = () => {
+    console.log(this.node.selectionContext.state.selected);
+  }
+
+  handleGetExpandedData = () => {
+    console.log(this.node.rowExpandContext.state.expanded);
+  }
+
+  handleGetCurrentPage = () => {
+    console.log(this.node.paginationContext.currPage);
+  }
+
+  handleGetCurrentSizePerPage = () => {
+    console.log(this.node.paginationContext.currSizePerPage);
+  }
+
+  handleGetCurrentSortColumn = () => {
+    console.log(this.node.sortContext.state.sortColumn);
+  }
+
+  handleGetCurrentSortOrder = () => {
+    console.log(this.node.sortContext.state.sortOrder);
+  }
+
+  handleGetCurrentFilter = () => {
+    console.log(this.node.filterContext.currFilters);
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>.....</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>
+      ),
+      showExpandColumn: true
+    };
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
+        <BootstrapTable
+          ref={ n => this.node = n }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+          selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          expandRow={ expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class ExposedFunctionTable extends React.Component {
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
+  handleGetSelectedData = () => {
+    console.log(this.node.selectionContext.state.selected);
+  }
+
+  handleGetExpandedData = () => {
+    console.log(this.node.rowExpandContext.state.expanded);
+  }
+
+  handleGetCurrentPage = () => {
+    console.log(this.node.paginationContext.currPage);
+  }
+
+  handleGetCurrentSizePerPage = () => {
+    console.log(this.node.paginationContext.currSizePerPage);
+  }
+
+  handleGetCurrentSortColumn = () => {
+    console.log(this.node.sortContext.state.sortColumn);
+  }
+
+  handleGetCurrentSortOrder = () => {
+    console.log(this.node.sortContext.state.sortOrder);
+  }
+
+  handleGetCurrentFilter = () => {
+    console.log(this.node.filterContext.currFilters);
+  }
+
+  render() {
+    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>
+      ),
+      showExpandColumn: true
+    };
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
+        <BootstrapTable
+          ref={ n => this.node = n }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+          selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          expandRow={ expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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/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/examples/sort/custom-sort-caret.js

@@ -0,0 +1,59 @@
+/* eslint no-unused-vars: 0 */
+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',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  sortCaret: (order, column) => {
+    if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+    else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+    else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+    return null;
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  sortCaret: (order, column) => {
+    if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+    else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+    else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+    return null;
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "",
   "main": "index.js",
   "private": true,

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

@@ -13,6 +13,7 @@ import NoDataTable from 'examples/basic/no-data-table';
 import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
 import LargeTable from 'examples/basic/large-table';
+import ExposedAPITable from 'examples/basic/exposed-function';
 
 // bootstrap 4
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
@@ -83,6 +84,7 @@ import DefaultSortTable from 'examples/sort/default-sort-table';
 import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
 import SortEvents from 'examples/sort/sort-events';
 import CustomSortTable from 'examples/sort/custom-sort-table';
+import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
 import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
 import HeaderSortingStyleTable from 'examples/sort/header-sorting-style';
 
@@ -97,6 +99,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';
@@ -115,6 +118,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';
@@ -126,6 +130,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';
 
@@ -136,6 +141,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';
@@ -185,7 +191,8 @@ storiesOf('Basic Table', module)
   .add('Indication For Empty Table', () => <NoDataTable />)
   .add('Customized id and class table', () => <CustomizedIdClassesTable />)
   .add('Table with caption', () => <CaptionTable />)
-  .add('Large Table', () => <LargeTable />);
+  .add('Large Table', () => <LargeTable />)
+  .add('Exposed API', () => <ExposedAPITable />);
 
 storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
@@ -263,6 +270,7 @@ storiesOf('Sort Table', module)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
+  .add('Custom Sort Caret', () => <CustomSortCaretTable />)
   .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)
   .add('Custom Style on Sorting Header Column', () => <HeaderSortingStyleTable />);
 
@@ -276,6 +284,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 />)
@@ -297,6 +306,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 />)
@@ -309,6 +319,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 />);
 
@@ -321,6 +332,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 />)

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "it's the pagination addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

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

@@ -68,6 +68,9 @@ export default (
           currPage = newPage;
           needNewState = true;
         }
+      } else {
+        this.currPage = nextProps.pagination.options.page;
+        this.currSizePerPage = nextProps.pagination.options.sizePerPage;
       }
 
       if (needNewState) {

packages/react-bootstrap-table2-paginator/test/context.test.js

@@ -160,6 +160,27 @@ describe('PaginationContext', () => {
       });
     });
 
+    describe('when remote pagination is enable', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({ ...defaultPagination }, true));
+        instance = wrapper.instance();
+        wrapper.render();
+        nextProps = {
+          data,
+          pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } }
+        };
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should always set currPage from nextProps.pagination.options.page', () => {
+        expect(instance.currPage).toEqual(nextProps.pagination.options.page);
+      });
+
+      it('should always set currSizePerPage from nextProps.pagination.options.sizePerPage', () => {
+        expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+      });
+    });
+
     describe('when page is not align', () => {
       beforeEach(() => {
         wrapper = shallow(shallowContext({

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.
 

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
       })
     ]),
@@ -42,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);
@@ -85,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.3",
+  "version": "1.1.1",
   "description": "The toolkit for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

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/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-toolkit/src/search/context.js

@@ -39,8 +39,10 @@ export default (options = {
       const { data, columns } = this.props;
       let { searchText } = this.props;
 
-      if (isRemoteSearch() && this.performRemoteSearch) {
+      if (isRemoteSearch()) {
+        if (this.performRemoteSearch) {
           handleRemoteSearchChange(searchText);
+        }
         return data;
       }
 

packages/react-bootstrap-table2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "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/contexts/index.js

@@ -66,6 +66,7 @@ const withContext = Base =>
         selectionProps
       ) => (
         <Base
+          ref={ n => this.table = n }
           { ...this.props }
           { ...selectionProps }
           { ...sortProps }
@@ -91,6 +92,7 @@ const withContext = Base =>
       ) => (
         <this.SelectionContext.Provider
           { ...baseProps }
+          ref={ n => this.selectionContext = n }
           selectRow={ this.props.selectRow }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         >
@@ -123,6 +125,7 @@ const withContext = Base =>
       ) => (
         <this.RowExpandContext.Provider
           { ...baseProps }
+          ref={ n => this.rowExpandContext = n }
           expandRow={ this.props.expandRow }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         >

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

@@ -80,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

@@ -24,6 +24,7 @@ const HeaderCell = (props) => {
   const {
     text,
     sort,
+    sortCaret,
     filter,
     filterRenderer,
     headerTitle,
@@ -49,6 +50,7 @@ const HeaderCell = (props) => {
 
   if (headerStyle) {
     cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
+    cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
   }
 
   if (headerTitle) {
@@ -68,7 +70,7 @@ const HeaderCell = (props) => {
     cellAttrs.className = cs(cellAttrs.className, 'sortable');
 
     if (sorting) {
-      sortSymbol = <SortCaret order={ sortOrder } />;
+      sortSymbol = sortCaret ? sortCaret(sortOrder, column) : <SortCaret order={ sortOrder } />;
 
       // append customized classes or style if table was sorting based on the current column.
       cellClasses = cs(
@@ -85,7 +87,7 @@ const HeaderCell = (props) => {
           : headerSortingStyle
       };
     } else {
-      sortSymbol = <SortSymbol />;
+      sortSymbol = sortCaret ? sortCaret(undefined, column) : <SortSymbol />;
     }
   }
 
@@ -150,6 +152,7 @@ HeaderCell.propTypes = {
   onSort: PropTypes.func,
   sorting: PropTypes.bool,
   sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]),
+  sortCaret: PropTypes.func,
   isLastSorting: PropTypes.bool,
   onFilter: PropTypes.func,
   onExternalFilter: 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/contexts/selection-context.test.js

@@ -220,21 +220,6 @@ describe('DataContext', () => {
       it('should set state.selected correctly', () => {
         expect(wrapper.state('selected')).toEqual(data.map(d => d[keyField]));
       });
-    });
-
-    describe('when isUnSelect argument is true', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({
-          ...defaultSelectRow,
-          selected: data.map(d => d[keyField])
-        }));
-        wrapper.instance().handleAllRowsSelect(e, true);
-      });
-
-      it('should set state.selected correctly', () => {
-        expect(wrapper.state('selected')).toEqual([]);
-      });
-    });
 
       describe('when selectRow.onSelectAll is defined', () => {
         const onSelectAll = jest.fn();
@@ -255,4 +240,39 @@ describe('DataContext', () => {
         });
       });
     });
+
+    describe('when isUnSelect argument is true', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultSelectRow,
+          selected: data.map(d => d[keyField])
+        }));
+        wrapper.instance().handleAllRowsSelect(e, true);
+      });
+
+      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,
+            selected: data.map(d => d[keyField]),
+            onSelectAll
+          }));
+          wrapper.instance().handleAllRowsSelect(e, true);
+        });
+
+        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/header-cell.test.js

@@ -403,6 +403,24 @@ describe('HeaderCell', () => {
       it('header should render SortSymbol as default', () => {
         expect(wrapper.find(SortSymbol).length).toBe(1);
       });
+
+      describe('when sortCaret is defined ', () => {
+        beforeEach(() => {
+          column = { ...column, sortCaret: jest.fn() };
+          wrapper = shallow(
+            <HeaderCell column={ column } index={ index } onSort={ onSortCallBack } />
+          );
+        });
+
+        it('header should not render SortSymbol', () => {
+          expect(wrapper.find(SortSymbol).length).toBe(0);
+        });
+
+        it('should call column.sortCaret correctly', () => {
+          expect(column.sortCaret).toHaveBeenCalledTimes(1);
+          expect(column.sortCaret).toHaveBeenCalledWith(undefined, column);
+        });
+      });
     });
 
     describe('and sorting prop is true', () => {
@@ -420,6 +438,30 @@ describe('HeaderCell', () => {
         });
       });
 
+      describe('when sortCaret is defined ', () => {
+        beforeEach(() => {
+          column = { ...column, sortCaret: jest.fn() };
+          wrapper = shallow(
+            <HeaderCell
+              column={ column }
+              index={ index }
+              onSort={ onSortCallBack }
+              sortOrder={ Const.SORT_ASC }
+              sorting
+            />
+          );
+        });
+
+        it('header should not render SortSymbol', () => {
+          expect(wrapper.find(SortSymbol).length).toBe(0);
+        });
+
+        it('should call column.sortCaret correctly', () => {
+          expect(column.sortCaret).toHaveBeenCalledTimes(1);
+          expect(column.sortCaret).toHaveBeenCalledWith(Const.SORT_ASC, column);
+        });
+      });
+
       describe('when headerSortingClasses is defined ', () => {
         const classes = 'foo';
         const order = Const.SORT_DESC;

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;