20190610 release

docs/basic-celledit.md

@@ -91,7 +91,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';
@@ -121,6 +124,42 @@ 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: () => [.....]
+  }
+}];
+
+// Asynchronous
+ const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions) => {
+      setTimeout(() => setOptions([...]), 1500);
+    }
+  }
+}];
+```
+
+
 ### Date Editor
 Date editor is use `<input type="date">`, the configuration is very simple:
 

docs/basic-row-select.md

@@ -24,8 +24,8 @@ This is an example for [selection management](../storybook/index.html?selectedKi
 
 
 In addition, this is another example for [selection management](../storybook/index.html?selectedKind=Row%20Selection&selectedStory=Advance%20Selection%20Management)
-## Customization
 
+## Customization
 
 
 ### Style/Class
@@ -37,8 +37,13 @@ Like column, we support to custom the style, class on the selecting row easily v
 
 ### Selection Column
 
-* For header cell: [`selectRow.selectionRenderer`](row-select-props.html#selectrowselectionrenderer-function)
-* For normal cell: [`selectRow.selectionHeaderRenderer`](./row-select-props.html#selectrowselectionheaderrenderer-function)
+* For Custom header cell: [`selectRow.selectionRenderer`](./row-select-props.html#selectrowselectionrenderer-function)
+* For Custom normal cell: [`selectRow.selectionHeaderRenderer`](./row-select-props.html#selectrowselectionheaderrenderer-function)
+* For Custom header cell style: [`selectRow.headerColumnStyle`](./row-select-props.html#selectrowheadercolumnstyle-object-function)
+* For Custom normal cell style: [`selectRow.selectColumnStyle`](./row-select-props.html#selectrowselectcolumnstyle-object-function)
+
+### Position
+Default we render selection column in the left side of table, you can use [`selectRow.selectColumnPosition`](./row-select-props.html#selectrowselectcolumnposition-string) to make it on the right.
 
 <br/>
 

docs/export-csv-props.md

@@ -13,6 +13,7 @@ Export CSV in one of features supported by `react-bootstrap-table2-toolkit`. By
 * [separator](#exportCSVseparator-string)
 * [ignoreHeader](#exportCSVignoreheader-bool)
 * [noAutoBOM](#exportCSVnoautobom-bool)
+* [blobType](#exportCSVblobtype-string)
 * [exportAll](#exportCSVexportall-bool)
 * [onlyExportSelection](#exportCSVonlyexportselection-bool)
 * [onlyExportFiltered](#exportCSVonlyexportfiltered-bool)
@@ -49,6 +50,9 @@ Default is `false`. Give true to avoid to attach the csv header.
 ## exportCSV.noAutoBOM - [bool]
 Default is `true`.
 
+## exportCSV.blobType - [string]
+Default is `text/plain;charset=utf-8`. Change to update the blob type of the exported file.
+
 ## exportCSV.exportAll - [bool]
 Default is `true`. `false` will only export current display data on table.
 

docs/row-select-props.md

@@ -28,11 +28,13 @@ const selectRow = {
 * [clickToEdit](#selectrowclicktoedit-bool)
 * [onSelect](#selectrowonselect-function)
 * [onSelectAll](#selectrowonselectall-function)
+* [selectColumnPosition](#selectrowselectcolumnposition-string)
 * [hideSelectColumn](#selectrowhideselectcolumn-bool)
 * [hideSelectAll](#selectrowhideselectall-bool)
 * [selectionRenderer](#selectrowselectionrenderer-function)
 * [selectionHeaderRenderer](#selectrowselectionheaderrenderer-function)
 * [headerColumnStyle](#selectrowheadercolumnstyle-object-function)
+* [selectColumnStyle](#selectrowselectcolumnstyle-object-function)
 
 -----
 
@@ -220,6 +222,16 @@ const selectRow = {
 };
 ```
 
+## selectRow.selectColumnPosition - [String]
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnPosition: 'right'
+};
+```
+
 ## selectRow.hideSelectColumn - [Bool]
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 
@@ -288,3 +300,39 @@ const selectRow = {
   )
 };
 ```
+
+## selectRow.selectColumnStyle - [Object | Function]
+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' };
+  )
+};
+```