20180604 release

docs/basic-filter.md

@@ -32,6 +32,7 @@ You can get all types of filters via import and these filters are a factory func
 * TextFilter
 * SelectFilter
 * NumberFilter
+* DateFilter
 * **Coming soon!**
 
 ## Text Filter
@@ -158,6 +159,45 @@ const numberFilter = numberFilter({
 // omit...
 ```
 
+## Date Filter
+
+```js
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [..., {
+  dataField: 'date',
+  text: 'Product date',
+  filter: dateFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+> **Notes:** date filter accept a Javascript Date object in your raw data.
+
+Date filter is same as other filter, you can custom the date filter via `dateFilter` factory function:
+
+```js
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
+// omit...
+
+const dateFilter = dateFilter({
+  delay: 600,  // how long will trigger filtering after user typing, default is 500 ms
+  placeholder: 'custom placeholder',  // placeholder for date input
+  withoutEmptyComparatorOption: true,  // dont render empty option for comparator
+  comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  // Custom the comparators
+  style: { display: 'inline-grid' },  // custom the style on date filter
+  className: 'custom-dateFilter-class',  // custom the class on date filter
+  comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
+  comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
+  dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on date input
+  dateClassName: 'custom-date-class',  // custom the class on date input
+  defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }  // default value
+});
+
+// omit...
+```
+
 <hr />
 
 ## Programmatically Filter
@@ -204,3 +244,4 @@ class Table extends Components {
 * [Example For Programmtically Text Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Text%20Filter%20)
 * [Example For Programmtically Select Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Select%20Filter%20)  
 * [Example For Programmtically Number Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Number%20Filter%20)
+* [Example For Programmtically Date Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%Date%20Filter%20)

docs/basic-row-select.md

@@ -31,8 +31,11 @@ Like column, we support to custom the style, class on the selecting row easily v
 * [`selectRow.classes`](./row-select-props.html#selectrowclasses-string-function)
 
 ### Selection Column
-`react-bootstrap-table2` offer a [`selectRow.hideSelectColumn`](./row-select-props.html#selectrowhideselectcolumn-bool) to let you hide the selection column. But for the customization on selection column or checkbox/radio button, we will support it ine next couple release.
-**Coming Soon!**
+
+* For header cell: [`selectRow.selectionRenderer`](row-select-props.html#selectrowselectionrenderer-function)
+* For normal cell: [`selectRow.selectionHeaderRenderer`](./row-select-props.html#selectrowselectionheaderrenderer-function)
+
+In addition, `react-bootstrap-table2` offer a [`selectRow.hideSelectColumn`](./row-select-props.html#selectrowhideselectcolumn-bool) to let you hide the selection column.
 
 ## Event Listening
 

docs/column-props.md

@@ -633,6 +633,9 @@ Please check [here](./basic-celledit.html#customize-editor) for more detail.
 Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters:
 
 * Text Filter
+* Select Filter
+* Number Filter
+* Date Filter
 
 We have a quick example to show you how to use `column.filter`:
 

docs/filter-props.md

@@ -13,6 +13,7 @@ title: Column Filter Props
    * [textFilter](#textfilter)
    * [selectFilter](#selectFilter)
    * [numberFilter](#numberFilter)
+   * [dateFilter](#dateFilter)
 * [Comparator](#comparator)
 
 ## **Getting Started**
@@ -248,6 +249,75 @@ const columns = [{ ... }, { ... }, {
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 ```
 
+## dateFilter
+**Required**: NONE
+
+**Optional**:
+
+### dateFilter.delay - [Number]
+* Debounce time, which means how long will trigger filtering after user typing. Default is 0.
+
+### dateFilter.placeholder - [String]
+* customized placeholder for date input.
+
+### dateFilter.withoutEmptyComparatorOption - [Boolean]
+* When it was set to `true`, the drop down list of `comparator` would hide the default selection.
+
+### dateFilter.defaultValue - [Object]
+* It is the default filtering value. Furthermore, it accepts **2** attributes:
+   * date: a date object which need to be filtered
+   * comparator: what kind of comparator to compare
+
+### dateFilter.comparator - [[Comparator]]
+* Specify what kind of comparator to compare. Default is to list `all` of comparators.
+
+### dateFilter.className - [String]
+* custom class name on the `wrapper` of date input and comparator drop down.
+
+### dateFilter.comparatorClassName - [String]
+* custom class name on the `comparator` drop down.
+
+### dateFilter.dateClassName - [String]
+* custom class name on the date `input`.
+
+### dateFilter.style - [Object]
+* custom inline styles on the `wrapper` of date input and comparator drop down.
+
+### dateFilter.comparatorStyle - [Object]
+* custom inline styles on the `comparator` drop down.
+
+### dateFilter.dateStyle - [Object]
+* custom inline styles on the date `input`.
+
+### dateFilter.getFilter - [Function]
+* export `filter` function to allow users to access. For dateFilter,<br>`filter({ date, comparator })` to filter columns dynamically.
+
+**Example**:
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+const columns = [{ ... }, { ... }, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: dateFilter({
+    delay: 600,  // how long will trigger filtering after user typing, default is 500 ms
+    placeholder: 'custom placeholder',  // placeholder for date input
+    withoutEmptyComparatorOption: true,  // dont render empty option for comparator
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  // Custom the comparators
+    style: { display: 'inline-grid' },  // custom the style on date filter
+    className: 'custom-dateFilter-class',  // custom the class on date filter
+    comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
+    comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
+    dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on date input
+    dateClassName: 'custom-date-class',  // custom the class on date input
+    defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }  // default value
+  });
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
 ## **Comparator**
 We support the following ways to do the comparison. Each `filter` has its default comparator. For more information, please take refer to the introduction of props above.
 

docs/migration.md

@@ -78,7 +78,7 @@ Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](./
 Please see [Work with selection](./basic-row-select.html).   
 Please see [available selectRow configurations](./row-select-props.html).   
 
-No huge change for row selection, but can not custom the selection column currently. Coming soon!!!
+No huge changes in row selection.
 
 ## Column Filter
 
@@ -93,9 +93,9 @@ Please see [available filter configuration](./filter-props.html).
 - [x] Select Filter
 - [x] Custom Select Filter
 - [x] Number Filter
-- [ ] Date Filter
+- [X] Date Filter
 - [ ] Array Filter
-- [ ] Programmatically Filter
+- [X] Programmatically Filter
 
 Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.   
 

docs/pagination-props.md

@@ -41,6 +41,7 @@ const pagination = paginationFactory({
 * [onPageChange](#paginationonpagechange-function)
 * [onSizePerPageChange](#paginationonsizeperpagechange-function)
 * [showTotal](#paginationshowtotal-bool)
+* [paginationTotalRenderer](#paginationpaginationtotalrenderer-function)
 -----
 
 ## pagination.page - [Number]
@@ -114,6 +115,18 @@ You can hide the pagination when there's only one page in table. Default is `fal
 ## pagination.showTotal - [Bool]
 Default is `false`, if enable will display a text to indicate the row range of current page.
 
+## pagination.paginationTotalRenderer - [Function]
+Custom the total information, this callbacok function have three arguments: `from`, `to` and `size`. Following is an example:
+
+```js
+const customTotal = (from, to, size) => (
+  <span className="react-bootstrap-table-pagination-total">
+    Showing { from } to { to } of { size } Results
+  </span>
+);
+```
+
+
 ## pagination.onPageChange - [Function]
 Accept a callback function and will be called when page changed. This callback function get below arguments:
 

docs/row-select-props.md

@@ -28,6 +28,8 @@ const selectRow = {
 * [onSelect](#selectrowonselect-function)
 * [onSelectAll](#selectrowonselectall-function)
 * [hideSelectColumn](#selectrowhideselectcolumn-bool)
+* [selectionRenderer](#selectrowselectionrenderer-function)
+* [selectionHeaderRenderer](#selectrowselectionheaderrenderer-function)
 
 -----
 
@@ -191,4 +193,28 @@ const selectRow = {
   clickToSelect: true,
   bgColor: 'red'
 };
-```
+```
+
+## selectRow.selectionRenderer - [Function]
+Provide a callback function which allow you to custom the checkbox/radio box. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionRenderer: ({ mode, checked, disabled }) => (
+    // ....
+  )
+};
+```
+
+## selectRow.selectionHeaderRenderer - [Function]
+Provide a callback function which allow you to custom the checkbox/radio box in the selection header column. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionHeaderRenderer: ({ mode, checked, indeterminate }) => (
+    // ....
+  )
+};
+```

docs/table-props.md

@@ -51,7 +51,6 @@ For flexibility reason, you can control what functionality should be handled on
 remote={ {
   filter: true,
   pagination: true,
-  filter: true,
   sort: true,
   cellEdit: true
 } }
@@ -210,6 +209,7 @@ paginationFactory({
   totalSize, // Total data size. It's necessary when remote is enabled
   pageStartIndex: 0, // first page will be 0, default is 1
   paginationSize: 3,  // the pagination bar size, default is 5
+  showTotal: true, // display pagination information
   sizePerPageList: [ {
     text: '5', value: 5
   }, {
@@ -231,6 +231,7 @@ paginationFactory({
   hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
   onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
   onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
+  paginationTotalRenderer: (from, to, size) => { ... }  // custom the pagination total
 })
 ```
 

website/blog/2018-06-04-version-bump.md

@@ -0,0 +1,27 @@
+---
+title: New Release (2018-06-04)
+author: Allen Fang
+authorURL: https://twitter.com/allenfang_tw
+---
+
+## Changed Packages
+
+This release bump following packages:
+
+* `react-bootstrap-table-next@0.1.13`
+* `react-bootstrap-table2-paginator@0.1.4`
+* `react-bootstrap-table2-filter@0.2.0`
+* `react-bootstrap-table2-overlay@0.1.2`
+
+## Changelog
+
+### Bug fixes
+* Fix remote sort still sorting data([#354](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/354))
+* Fix `react-bootstrap-table2-overlay` does not consider caption height([b11019c](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/b11019ce2043367699a260d9646eeaebb4af88fa))
+
+### Features
+* Support date filter([#365](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/365))
+
+### Enhancements
+* Support to custome the pagination total([#359](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/359))
+* Support to custom the selection column([#364](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/364))