From e5bfaca33dd9c973d1184312fa83ee5dd372c2f3 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 17 Feb 2019 23:42:06 +0800
Subject: [PATCH] 20190218 release

---
 docs/basic-column-toggle.md             | 123 ++++++++++++++++++++++++
 docs/basic-pagination.md                |  29 ++++--
 docs/migration.md                       |  53 +++++-----
 docs/row-expand-props.md                |  15 ++-
 docs/table-props.md                     |  57 +++++------
 docs/toolkits-getting-started.md        |   5 +-
 website/blog/2019-02-18-version-bump.md |  25 +++++
 website/i18n/en.json                    |   2 +
 website/sidebars.json                   |   3 +-
 9 files changed, 240 insertions(+), 72 deletions(-)
 create mode 100644 docs/basic-column-toggle.md
 create mode 100644 website/blog/2019-02-18-version-bump.md

diff --git a/docs/basic-column-toggle.md b/docs/basic-column-toggle.md
new file mode 100644
index 0000000..ae4ab80
--- /dev/null
+++ b/docs/basic-column-toggle.md
@@ -0,0 +1,123 @@
+---
+id: basic-column-toggle
+title: Column Toggle
+sidebar_label: Column Toggle
+---
+
+`react-bootstrap-table2` support a toggle list for user to toggle the column visibility.
+
+**[Live Demo For Column Toggle](../storybook/index.html?selectedKind=Column%20Toggle)**  
+
+-----
+
+## Prepare
+
+Please check [How to start with table toolkit](./toolkits-getting-started.html)
+
+
+## Enable Column Toggle
+
+```js
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+//...
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
+1. Enable column toggle via `columnToggle` prop on `ToolkitProvider`.
+
+2. `ToolkitProvider` is a wrapper of react context, you should wrap the `BootstrapTable` and `ToggleList` as the child of `ToolkitProvider`.
+
+3. Rendering `ToggleList` with `columnToggleProps`. The position of `ToggleList` is depends on you.
+
+
+## Customize ToggleList Component
+
+So far we only have limited customization on `ToggleList` component, following props is available for you:
+
+* `btnClassName`: Add custom class on toggle button.
+* `className`: Add custom class on toggle list.
+* `contextual`: config bootstrap contextual, default is `primary`.
+
+However, you can custom the whole thing by yourself like following:
+
+```js
+// This is my custom column toggle component
+
+const CustomToggleList = ({
+  columns,
+  onColumnToggle,
+  toggles
+}) => (
+  <div className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
+    {
+      columns
+        .map(column => ({
+          ...column,
+          toggle: toggles[column.dataField]
+        }))
+        .map(column => (
+          <button
+            type="button"
+            key={ column.dataField }
+            className={ `btn btn-warning ${column.toggle ? 'active' : ''}` }
+            data-toggle="button"
+            aria-pressed={ column.toggle ? 'true' : 'false' }
+            onClick={ () => onColumnToggle(column.dataField) }
+          >
+            { column.text }
+          </button>
+        ))
+    }
+  </div>
+);
+
+export const MyTable = () => (
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columnsdt }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <CustomToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+);
+```
+
+Following, we just explain how it work:   
+
+`ToolkitProvider` will pass a props which have a property called `columnToggleProps`. `columnToggleProps` have following properties: 
+
+* `columns`: Column list
+* `toggles`: An object which describe current column visibilities. `true` is on and `false` is off.
+* `onColumnToggle`: Call this method when user toggle a column.
+
diff --git a/docs/basic-pagination.md b/docs/basic-pagination.md
index a6f32d8..18d504c 100644
--- a/docs/basic-pagination.md
+++ b/docs/basic-pagination.md
@@ -80,14 +80,14 @@ If you want to customize the pagination component completely, you may get intere
 
 `react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and you will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
 
-#### Import PaginationProvider
+#### 1. Import PaginationProvider
 
 ```js
 import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
 
 ```
 
-#### Declare custom and totalSize in pagination option:
+#### 2. Declare custom and totalSize in pagination option:
 
 ```js
 const paginationOption = {
@@ -96,7 +96,7 @@ const paginationOption = {
 };
 ```
 
-#### Render PaginationProvider
+#### 3. Render PaginationProvider
 
 ```js
 <PaginationProvider
@@ -142,19 +142,25 @@ So far, your customization pagination should look like it:
 ```
 
 Now, you have two choices
-* Use built-in standalne components
+* Use Standalone Component
 * Customize everything by yourself
 
-#### Use Standalone Component
-`react-bootstrap-table2-paginator` provider two standalone components:
+#### 4.1 Use Standalone Component
+`react-bootstrap-table2-paginator` provider three standalone components:
 
-* Size Per Page Dropdwn Standalone
+* Size Per Page Dropdown Standalone
 * Pagination List Standalone
+* Pagination Total Standalone
 
 When render each standalone, you just need to pass the `paginationProps` props to standalone component:
 
 ```js
-import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator';
+import paginationFactory, {
+  PaginationProvider,
+  PaginationListStandalone,
+  PaginationTotalStandalone,
+  SizePerPageDropdownStandalone
+} from 'react-bootstrap-table2-paginator';
 
 <PaginationProvider
   pagination={ paginationFactory(options) }
@@ -168,6 +174,9 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePe
         <SizePerPageDropdownStandalone
           { ...paginationProps }
         />
+        <PaginationTotalStandalone
+          { ...paginationProps }
+        />
         <BootstrapTable
           keyField="id"
           data={ products }
@@ -185,7 +194,7 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePe
 
 That's it!!  The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
 
-#### Customization Everything
+#### 4.2 Customization Everything
 
 If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Therefore, following is all the props in `paginationProps` object:
 
@@ -218,7 +227,7 @@ onPageChange,
 onSizePerPageChange
 ```
 
-In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important propertoes for you:
+In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are much important properties for you:
 
 * `page`: Current page.
 * `sizePerPage`: Current size per page.
diff --git a/docs/migration.md b/docs/migration.md
index 30d124f..fdcfc90 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -28,6 +28,7 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
 * [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
   * Table Search
   * CSV Export
+  * Column Toggle
 * [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
   * Overlay/Loading Addons
 
@@ -63,12 +64,12 @@ The `text` property is just same as the children for the `TableHeaderColumn`, if
 
 Please see [Work with table sort](./basic-sort.html).   
 
-- [x] Basic sorting
-- [x] Custom sort function
-- [x] Default Sort
-- [x] Remote mode
-- [x] Custom the sorting header
-- [x] Sort event listener
+- [v] Basic sorting
+- [v] Custom sort function
+- [v] Default Sort
+- [v] Remote mode
+- [v] Custom the sorting header
+- [v] Sort event listener
 - [ ] Custom the sort caret
 - [ ] Sort management
 - [ ] Multi sort
@@ -87,17 +88,15 @@ No huge changes in row selection.
 Please see [Work with column filter](./basic-filter.html).   
 Please see [available filter configuration](./filter-props.html).   
 
-- [x] Text Filter
-- [x] Custom Text Filter
-- [x] Remote Filter
-- [x] Custom Filter Component
+- [v] Text Filter
+- [v] Remote Filter
+- [v] Custom Filter Component
 - [ ] Regex Filter
-- [x] Select Filter
-- [x] Custom Select Filter
-- [x] Number Filter
-- [X] Date Filter
-- [x] Array Filter
-- [X] Programmatically Filter
+- [v] Select Filter
+- [v] Number Filter
+- [v] Date Filter
+- [v] Array Filter
+- [v] Programmatically Filter
 
 Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.   
 
@@ -119,7 +118,7 @@ Please see [available pagination configurations](./pagination-props.html).
 
 Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator) firstly.   
 
-Until newest `react-bootstrap-table2-paginator@2.0.0`, we allow you to custom any part of pagination component more flexible.
+In newest `react-bootstrap-table2-paginator@2.0.0`, we allow you to custom any part of pagination component more flexible.
 
 ## Table Search
 Please see [Work with table search](./basic-search.html).   
@@ -127,9 +126,9 @@ Please see [Search configurations](./search-props.html).
 
 The usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
 
-- [x] Custom search component and position
-- [x] Custom search value
-- [x] Clear search
+- [v] Custom search component and position
+- [v] Custom search value
+- [v] Clear search
 - [ ] Multiple search
 - [ ] Strict search
 
@@ -137,13 +136,13 @@ The usage of search functionality is a little bit different from legacy search.
 Please see [Work with expandable row](./basic-row-expand.html).   
 Please see [Row expand configurations](./row-expand-props.html).   
 
-- [x] Expand Row Events
-- [x] Expand Row Indicator
-- [x] Expand Row Management
-- [x] Custom Expand Row Indicators
-- [ ] Compatiable with Row Selection
-- [ ] Expand Column position
-- [ ] Expand Column Style/Class
+- [v] Expand Row Events
+- [v] Expand Row Indicator
+- [v] Expand Row Management
+- [v] Custom Expand Row Indicators
+- [v] Compatiable with Row Selection
+- [v] Expand Column position
+- [v] Expand Column Style/Class
 
 ## Export CSV
 Please see [Work with export to CSV](./basic-export-csv.html).   
diff --git a/docs/row-expand-props.md b/docs/row-expand-props.md
index 64c4145..401b87d 100644
--- a/docs/row-expand-props.md
+++ b/docs/row-expand-props.md
@@ -115,6 +115,17 @@ const expandRow = {
 };
 ```
 
+## expandRow.expandByColumnOnly - [Bool]
+Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it. 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  showExpandColumn: true,
+  expandByColumnOnly: true
+};
+```
+
 ## expandRow.expandColumnPosition - [String]
 Default is `left`. You can give this as `right` for rendering expand column in the right side.
 
@@ -128,7 +139,7 @@ const expandRow = {
 ## expandRow.expandByColumnOnly - [Bool]
 Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it. 
 
- ```js
+```js
 const expandRow = {
   renderer: (row) => ...,
   showExpandColumn: true,
@@ -137,6 +148,7 @@ const expandRow = {
 ```
 
 ## expandRow.expandColumnRenderer - [Function]
+
 Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain these properties:
 * `expanded`: If current row is expanded or not
 * `rowKey`: Current row key
@@ -151,7 +163,6 @@ const expandRow = {
   )
 };
 ```
-```
 
 
 ## expandRow.expandHeaderColumnRenderer - [Function]
diff --git a/docs/table-props.md b/docs/table-props.md
index 39dc010..a52c77a 100644
--- a/docs/table-props.md
+++ b/docs/table-props.md
@@ -8,37 +8,32 @@ title: BootstrapTable Props
 * [columns (**required**)](#columns-required-object)
 
 ## Optional
-- [Required](#required)
-- [Optional](#optional)
-- [keyField(**required**) - [String]](#keyfieldrequired---string)
-- [data(**required**) - [Array]](#datarequired---array)
-- [columns(**required**) - [Object]](#columnsrequired---object)
-- [remote - [Bool | Object]](#remote---bool--object)
-- [bootstrap4 - [Bool]](#bootstrap4---bool)
-- [noDataIndication - [Function]](#nodataindication---function)
-- [loading - [Bool]](#loading---bool)
-- [overlay - [Function]](#overlay---function)
-- [caption - [String | Node]](#caption---string--node)
-- [striped - [Bool]](#striped---bool)
-- [bordered - [Bool]](#bordered---bool)
-- [hover - [Bool]](#hover---bool)
-- [condensed - [Bool]](#condensed---bool)
-- [id - [String]](#id---string)
-- [tabIndexCell - [Bool]](#tabindexcell---bool)
-- [classes - [String]](#classes---string)
-- [wrapperClasses - [String]](#wrapperclasses---string)
-- [headerClasses - [String]](#headerclasses---string)
-- [cellEdit - [Object]](#celledit---object)
-- [selectRow - [Object]](#selectrow---object)
-- [rowStyle - [Object | Function]](#rowstyle---object--function)
-- [rowClasses - [String | Function]](#rowclasses---string--function)
-- [rowEvents - [Object]](#rowevents---object)
-- [hiddenRows - [Array]](#hiddenrows---array)
-- [defaultSorted - [Array]](#defaultsorted---array)
-- [defaultSortDirection - [String]](#defaultsortdirection---string)
-- [pagination - [Object]](#pagination---object)
-- [filter - [Object]](#filter---object)
-- [onTableChange - [Function]](#ontablechange---function)
+* [remote](#remote-bool-object)
+* [bootstrap4](#bootstrap4-bool)
+* [noDataIndication](#nodataindication-function)
+* [loading](#loading-bool)
+* [overlay](#overlay-function)
+* [caption](#caption-string-node)
+* [striped](#striped-bool)
+* [bordered](#bordered-bool)
+* [hover](#hover-bool)
+* [condensed](#condensed-bool)
+* [id](#id-string)
+* [tabIndexCell](#tabindexcell-bool)
+* [classes](#classes-string)
+* [wrapperClasses](#wrapperClasses-string)
+* [headerClasses](#headerClasses-string)
+* [cellEdit](#celledit-object)
+* [selectRow](#selectrow-object)
+* [rowStyle](#rowstyle-object-function)
+* [rowClasses](#rowclasses-string-function)
+* [rowEvents](#rowevents-object)
+* [hiddenRows](#hiddenrows-array)
+* [defaultSorted](#defaultsorted-array)
+* [defaultSortDirection](#defaultSortDirection-string)
+* [pagination](#pagination-object)
+* [filter](#filter-object)
+* [onTableChange](#ontablechange-function)
 
 -----
 
diff --git a/docs/toolkits-getting-started.md b/docs/toolkits-getting-started.md
index a573962..6a97439 100644
--- a/docs/toolkits-getting-started.md
+++ b/docs/toolkits-getting-started.md
@@ -10,6 +10,7 @@ sidebar_label: Getting Started
 
 * Export CSV
 * Table Search
+* Column Toggle
 
 
 ## Installation
@@ -58,7 +59,8 @@ In addition, You have to move following required props from `BootstraTable` to `
 ### Additional props on ToolkitProvider
 
 * [search](./search-props.html): For enabling search.
-* [exportCSV](./export-csv-props.html): For enableing export CSV.
+* [exportCSV](./export-csv-props.html): For enabling export CSV.
+* **columnToggle**: For enabling column toggle.
 
 ## Available children props
 
@@ -67,3 +69,4 @@ In addition, You have to move following required props from `BootstraTable` to `
 * `baseProps`: It have the basic props from `ToolkitProvider` and also contain few internal data.
 * `searchProps`: props for search component.
 * `csvProps`: props for export csv component.
+* `columnToggleProps`: props for column toggle component.
diff --git a/website/blog/2019-02-18-version-bump.md b/website/blog/2019-02-18-version-bump.md
new file mode 100644
index 0000000..9785523
--- /dev/null
+++ b/website/blog/2019-02-18-version-bump.md
@@ -0,0 +1,25 @@
+---
+title: New Release (2019-02-18)
+author: Allen Fang
+authorURL: https://twitter.com/allenfang_tw
+---
+
+## Changed Packages
+
+We got following package version bump in this release:
+
+* `react-bootstrap-table-next@2.2.0`
+* `react-bootstrap-table2-toolkit@1.3.0`
+* `react-bootstrap-table2-paginator@2.0.3`
+
+## Changelog
+
+### Bug fixes
+N/A
+
+### Features
+* Support Column Toggle([#800](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/800))
+
+### Enhancements
+* Support `PaginationTotalStandalone` component([#801](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/801))
+* Add `rowIndex` for `selectRow.selectionRenderer`([a7c2a49](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/a7c2a49182681dcf77d547d0d58a0b69af667bec))
\ No newline at end of file
diff --git a/website/i18n/en.json b/website/i18n/en.json
index a81f821..e82a670 100644
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@@ -8,6 +8,8 @@
     "About": "About",
     "basic-celledit": "Cell Edit",
     "Cell Edit": "Cell Edit",
+    "basic-column-toggle": "Column Toggle",
+    "Column Toggle": "Column Toggle",
     "basic-column": "Work on Column",
     "Work on Column": "Work on Column",
     "basic-export-csv": "Export to CSV",
diff --git a/website/sidebars.json b/website/sidebars.json
index 2233b61..58657a9 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -23,7 +23,8 @@
     "Table Toolkits": [
       "toolkits-getting-started",
       "basic-search",
-      "basic-export-csv"
+      "basic-export-csv",
+      "basic-column-toggle"
     ],
     "Exposed API": [
       "exposed-api"