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

Author: wparrott-touchnet

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,24 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is. In addition, please search issues before you open a report to make sure there's no any duplicated report
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**codesandbox**
+Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily and handle it effectively

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Is this feature requested before?**
+Please search issues to make sure to create feature which is never report yet.
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/i-have-a-question.md

@@ -0,0 +1,17 @@
+---
+name: I have a question
+about: I have a question
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Question**
+A clear and concise description of you question. In addition, please search issues before you open a question to make sure there's no any duplicated questions.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**codesandbox**
+Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily.

README.md

@@ -1,7 +1,7 @@
 # react-bootstrap-table2
 
 [![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2) 
-Rebuilt of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
+Rebuild of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
 > Note that `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to the name being already taken.
 

docs/README.md

@@ -98,7 +98,14 @@ import overlayFactory from 'react-bootstrap-table2-overlay';
 Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`:
 
 ```js
-overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+overlay={
+ overlayFactory({
+ spinner: true,
+ styles: {
+ overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'})
+ }
+ })
+}
 ```
 
 ### <a name='caption'>caption - [String | Node]</a>
@@ -334,4 +341,4 @@ handleDataChange = ({ dataSize }) => {
  onDataSizeChange={ handleDataChange }
  ....
 />
-```
+```

docs/columns.md

@@ -11,6 +11,7 @@ Available properties in a column object:
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
+* [type](#type)
 * [sort](#sort)
 * [sortFunc](#sortFunc)
 * [sortCaret](#sortCaret)
@@ -132,6 +133,10 @@ The third argument: `components` have following specified properties:
 ## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
 It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
 
+## <a name='type'>column.type - [String]</a>
+Specify the data type on column. Available value so far is `string`, `number`, `bool` and `date`. Default is `string`. 
+`column.type` can be used when you enable the cell editing and want to save your cell data with correct data type.
+
 ## <a name='sort'>column.sort - [Bool]</a>
 Enable the column sort via a `true` value given.
 

docs/row-expand.md

@@ -18,19 +18,21 @@
 * [expandColumnPosition](#expandColumnPosition)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+* [parentClassName](#parentClassName)
 
 ### <a name="renderer">expandRow.renderer - [Function]</a>
 
 Specify the content of expand row, `react-bootstrap-table2` will pass a row object as argument and expect return a react element.
 
 #### values
 * **row**
+* **rowIndex**
 
 #### examples
 
 ```js
 const expandRow = {
- renderer: row => (
+ renderer: (row, rowIndex) => (
  <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>
@@ -165,3 +167,24 @@ const expandRow = {
  expandColumnPosition: 'right'
 };
 ```
+
+### <a name='parentClassName'>expandRow.parentClassName - [String | Function]</a>
+Apply the custom class name on parent row of expanded row. For example: 
+
+```js
+const expandRow = {
+ renderer: (row) => ...,
+ parentClassName: 'foo'
+};
+```
+Below case is more flexible way to custom the class name: 
+
+```js
+const expandRow = {
+ renderer: (row) => ...,
+ parentClassName: (isExpanded, row, rowIndex) => {
+ if (rowIndex > 2) return 'foo';
+ return 'bar';
+ }
+};
+```

docs/row-selection.md

@@ -16,11 +16,13 @@
 * [clickToEdit](#clickToEdit)
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
+* [selectColumnPosition](#selectColumnPosition)
 * [hideSelectColumn](#hideSelectColumn)
 * [hideSelectAll](#hideSelectAll)
 * [selectionRenderer](#selectionRenderer)
 * [selectionHeaderRenderer](#selectionHeaderRenderer)
 * [headerColumnStyle](#headerColumnStyle)
+* [selectColumnStyle](#selectColumnStyle)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -224,6 +226,42 @@ const selectRow = {
 };
 ```
 
+### <a name='selectColumnStyle'>selectRow.selectColumnStyle - [Object | Function]</a>
+A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+If a callback function present, you can get below information to custom the selection cell:
+
+* `checked`: Whether current row is seleccted or not
+* `disabled`: Whether current row is disabled or not
+* `rowIndex`: Current row index
+* `rowKey`: Current row key
+
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnStyle: ({
+ checked,
+ disabled,
+ rowIndex,
+ rowKey
+ }) => (
+ // ....
+ return { backgroundColor: 'blue' };
+ )
+};
+```
+
 ### <a name='onSelect'>selectRow.onSelect - [Function]</a>
 This callback function will be called when a row is select/unselect and pass following three arguments:
 `row`, `isSelect`, `rowIndex` and `e`.
@@ -275,6 +313,16 @@ const selectRow = {
 };
 ```
 
+### <a name='selectColumnPosition'>selectRow.selectColumnPosition - [String]</a>
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnPosition: 'right'
+};
+```
+
 ### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 

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

@@ -89,7 +89,10 @@ const columns = [
 In the following, we go though all the predefined editors:
 
 ### Dropdown Editor
-Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor.
+Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either `editor.options` or `editor.getOptions` should be required prop.
+
+#### editor.options
+This is most simple case for assign the dropdown options data directly. 
 
 ```js
 import { Type } from 'react-bootstrap-table2-editor';
@@ -119,6 +122,46 @@ const columns = [
 }];
 ```
 
+#### editor.getOptions
+It is much flexible which accept a function and you can assign the dropdown options dynamically.
+
+There are two case for `getOptions`:
+
+* *Synchronous*: Just return the options array in `getOptions` callback function
+* *Asynchronous*: Call `setOptions` function argument when you get the options from remote. 
+
+
+```js
+// Synchronous
+
+const columns = [
+ ..., {
+ dataField: 'type',
+ text: 'Job Type',
+ editor: {
+ type: Type.SELECT,
+ getOptions: (setOptions, { row, column }) => [.....]
+ }
+}];
+
+// Asynchronous
+
+const columns = [
+ ..., {
+ dataField: 'type',
+ text: 'Job Type',
+ editor: {
+ type: Type.SELECT,
+ getOptions: (setOptions, { row, column }) => {
+ setTimeout(() => setOptions([...]), 1500);
+ }
+ }
+}];
+
+```
+
+[here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example.
+
 ### Date Editor
 Date editor is use `<input type="date">`, the configuration is very simple:
 

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

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