diff --git a/docs/basic-celledit.md b/docs/basic-celledit.md index e679016..644f2dc 100644 --- a/docs/basic-celledit.md +++ b/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 ``, the configuration is very simple: diff --git a/docs/basic-row-select.md b/docs/basic-row-select.md index 6d303cf..f34c209 100644 --- a/docs/basic-row-select.md +++ b/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.
diff --git a/docs/export-csv-props.md b/docs/export-csv-props.md index c6b8af8..2d19fc0 100644 --- a/docs/export-csv-props.md +++ b/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. diff --git a/docs/row-select-props.md b/docs/row-select-props.md index b63dc8d..4e73c60 100644 --- a/docs/row-select-props.md +++ b/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' }; + ) +}; +```