Changed Packages
This release bump following packages:
const selectOptions = [
+ { label: 0, value: 'good' },
+ { label: 1, value: 'Bad' },
+ { label: 2, value: 'unknown' }
+];
+const columns = [
+ ..., {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+ filter: selectFilter({
+ options: selectOptions
+ })
+}];
+
+The benifit is react-bootstrap-table2 will render the select options by the order of array.
MultiSelect Filter
Multi-select filter is almost same as regular select filterfilter :
import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
diff --git a/docs/basic-row-select.html b/docs/basic-row-select.html
index 9748a59..fb8157d 100644
--- a/docs/basic-row-select.html
+++ b/docs/basic-row-select.html
@@ -13,7 +13,8 @@
By default behavior, user need to click on the selection column or the checkbox/radio to select/unselect a row, for a user experience perspective, we have selectoRow.clickToSelect to allow user to select/unselect row by clicking on the row.
Selection Management
Please check selectoRow.selected, it's used for default selection usually but also can be used as a external selection control.
-This is an example for selection management
+This is an example for selection management.
+In addition, this is another example for selection management
Customization
Style/Class
Like column, we support to custom the style, class on the selecting row easily via following selectRow props:
diff --git a/docs/row-select-props.html b/docs/row-select-props.html
index bfc3941..dd8350e 100644
--- a/docs/row-select-props.html
+++ b/docs/row-select-props.html
@@ -143,15 +143,39 @@
}
};
+
+If you want to reject current select action, just return false:
+
+const selectRow = {
+ mode: 'checkbox',
+ onSelect: (row, isSelect, rowIndex, e) => {
+ if (SOME_CONDITION) {
+ return false;
+ }
+ }
+};
+
selectRow.onSelectAll - [Function]
This callback function will be called when select/unselect all and it only work when you configure selectRow.mode as checkbox.
const selectRow = {
mode: 'checkbox',
- onSelectAll: (isSelect, results, e) => {
+ onSelectAll: (isSelect, rows, e) => {
}
};
+
+If you want to control the final selection result, just return a row key array:
+
+const selectRow = {
+ mode: 'checkbox',
+ onSelectAll: (isSelect, rows, e) => {
+ if (isSelect && SOME_CONDITION) {
+ return [1, 3, 4];
+ }
+ }
+};
+
selectRow.hideSelectColumn - [Bool]
Default is false, if you don't want to have a selection column, give this prop as true
const selectRow = {
diff --git a/sitemap.xml b/sitemap.xml
index c278dbe..887bf54 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -3,6 +3,7 @@
https://react-bootstrap-table.github.io/help.html weekly 0.5
https://react-bootstrap-table.github.io/index.html weekly 0.5
https://react-bootstrap-table.github.io/users.html weekly 0.5
+ https://react-bootstrap-table.github.io/blog/2018/11/04/version.bump.html weekly 0.3
https://react-bootstrap-table.github.io/blog/2018/10/29/version-bump.html weekly 0.3
https://react-bootstrap-table.github.io/blog/2018/10/14/version-bump.html weekly 0.3
https://react-bootstrap-table.github.io/blog/2018/10/07/version-bump.html weekly 0.3
diff --git a/storybook/iframe.html b/storybook/iframe.html
index 6b6b837..cad557c 100644
--- a/storybook/iframe.html
+++ b/storybook/iframe.html
@@ -23,6 +23,6 @@
-
+
\ No newline at end of file
diff --git a/storybook/index.html b/storybook/index.html
index cd51caa..0e31b2c 100644
--- a/storybook/index.html
+++ b/storybook/index.html
@@ -40,5 +40,5 @@
-
+
