20190909 release

This commit is contained in:
AllenFang 2019-09-08 15:24:06 +08:00
parent 3f0ca0d230
commit 31a2dcfd90
3 changed files with 96 additions and 4 deletions

View File

@ -16,6 +16,7 @@ Definition of columns props on BootstrapTable
* [formatter](#columnformatter-function)
* [formatExtraData](#columnformatextradata-any)
* [sort](#columnsort-bool)
* [sortValue](#columnsortvalue-function)
* [sortFunc](#columnsortfunc-function)
* [sortCaret](#columnsortcaret-function)
* [onSort](#columnonsort-function)
@ -128,6 +129,40 @@ It's only used for [`column.formatter`](#columnformatter-function), you can defi
## column.sort - [Bool]
Enable the column sort via a `true` value given.
## column.sortValue - [Function]
`column.sortValue` only work when `column.sort` enabled. This prop allow you to replace the value when table sorting.
For example, consider following data:
```js
const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
const data = [{id: 1, type: 2}, {id: 2, type: 1}, {id: 3, type:0}];
const columns = [{
dataField: 'id',
text: 'Job ID'
}, {
dataField: 'type',
text: 'Job Type'
sort: true,
formatter: (cell, row) => types[cell]
}]
```
In above case, when user try to sort Job Type column which will sort the original value: 0, 1, 2 but we display the type name via [`column.formatter`](#formatter), which will lead confuse because we are sorting by type value instead of type name. So `sortValue` is a way for you to decide what kind of value should be adopted when sorting on a specify column:
```js
const columns = [{
dataField: 'id',
text: 'Job ID'
}, {
dataField: 'type',
text: 'Job Type'
sort: true,
formatter: (cell, row) => types[cell],
sortValue: (cell, row) => types[cell] // we use type name to sort.
}]
```
## column.sortFunc - [Function]
`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
@ -407,7 +442,7 @@ If the events is not listed above, the callback function will only receive the `
{
// omit...
headerEvents: {
onClick: e => { ... }
onClick: (e, column, columnIndex) => { ... }
}
}
```
@ -535,7 +570,7 @@ This prop also accept a function:
{
dataField: 'price',
text: 'Product Price',
footer: column => column.reduce((acc, item) => acc + item, 0)
footer: (columnData, column, columnIndex) => columnData.reduce((acc, item) => acc + item, 0)
}
```
@ -616,7 +651,7 @@ It's also available to custom via a callback function:
{
// omit...
footerEvents: {
onClick: e => { ... }
onClick: (e, column, columnIndex) => { ... }
}
}
```

View File

@ -11,6 +11,7 @@ Table search in one of features supported by `react-bootstrap-table2-toolkit`. B
## Optional
* [searchFormatted](#searchsearchformatted-bool)
* [defaultSearch](#searchdefaultSearch-string)
* [onColumnMatch](#searchoncolumnmatch-function)
-----
@ -34,7 +35,7 @@ If you want to search on the formatted data, you are supposed to enable this pro
## search.defaultSearch - [String]
Accept a string that will be used for default searching when first time table render.
```js
```js
<ToolkitProvider
keyField="id"
data={ products }
@ -47,3 +48,29 @@ Accept a string that will be used for default searching when first time table re
</ToolkitProvider>
```
## search.onColumnMatch - [Function]
Acccpt a function which will be called when table try to match every cells when search happening. This function accept an object like below example:
```js
function onColumnMatch({
searchText,
value,
column,
row
}) {
// implement your custom match logic on every cell value
}
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search={ {
onColumnMatch
} }
>
// ...
</ToolkitProvider>
```
> Notes: You have to return `true` when your match logic is positive and vice versa.

View File

@ -0,0 +1,30 @@
---
title: New Release (2019-09-08)
author: Allen Fang
authorURL: https://twitter.com/allenfang_tw
---
## Changed Packages
We got following packages version bump in this release:
* `react-bootstrap-table-next@3.2.0`
* `react-bootstrap-table2-editor@1.4.0`
* `react-bootstrap-table2-filter@1.2.0`
* `react-bootstrap-table2-paginator@2.1.0`
* `react-bootstrap-table2-toolkit@2.1.0`
## Changelog
### Bug fixes
N/A
### Features
N/A
### Enhancements
* Avoid warning for react legacy lifecycle([`7c8bf00`](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/1087/commits/7c8bf00cdeb44490de7b4dd0ef9c0ed553e6edd7))
* Support custom search on cell level([`00b1558`](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/00b1558df0710267b4c3cb2ce788ac647796d52e))
* Support `column.sortValue` for custom the sort value of cell([ec1f96c](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/ec1f96cd1fbac3f08164f6dc922cb41272640e79))
* Enhance `column.headerEvents` and `column.footerEvents` for adding some useful data([16128e7](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/16128e77e61329d52f425ce0857731abdad3de28))