diff --git a/docs/basic-filter.md b/docs/basic-filter.md index 7dc6e21..2984de2 100644 --- a/docs/basic-filter.md +++ b/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() +}]; + + +``` + +> **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... +``` +
## 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) \ No newline at end of file diff --git a/docs/basic-row-select.md b/docs/basic-row-select.md index b81c27a..86d1713 100644 --- a/docs/basic-row-select.md +++ b/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 diff --git a/docs/column-props.md b/docs/column-props.md index eb0bf80..1c5c4e8 100644 --- a/docs/column-props.md +++ b/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`: diff --git a/docs/filter-props.md b/docs/filter-props.md index 14a5d11..ff64479 100644 --- a/docs/filter-props.md +++ b/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 = [{ ... }, { ... }, { ``` +## 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,
`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 + }); +}]; + + +``` + ## **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. diff --git a/docs/migration.md b/docs/migration.md index e069bec..c94a2a0 100644 --- a/docs/migration.md +++ b/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. diff --git a/docs/pagination-props.md b/docs/pagination-props.md index 4f22d81..e53f94d 100644 --- a/docs/pagination-props.md +++ b/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) => ( + + Showing { from } to { to } of { size } Results + +); +``` + + ## pagination.onPageChange - [Function] Accept a callback function and will be called when page changed. This callback function get below arguments: diff --git a/docs/row-select-props.md b/docs/row-select-props.md index 0e69234..7908bbc 100644 --- a/docs/row-select-props.md +++ b/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' }; -``` \ No newline at end of file +``` + +## 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 }) => ( + // .... + ) +}; +``` diff --git a/docs/table-props.md b/docs/table-props.md index 28d5109..cbf8135 100644 --- a/docs/table-props.md +++ b/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 }) ``` diff --git a/website/blog/2018-06-04-version-bump.md b/website/blog/2018-06-04-version-bump.md new file mode 100644 index 0000000..6b5101c --- /dev/null +++ b/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))