20191020 release

This commit is contained in:
AllenFang 2019-01-20 18:02:26 +08:00
parent 00e8656f25
commit e283f52fc6
4 changed files with 216 additions and 1 deletions

View File

@ -137,3 +137,29 @@ When table search on a specified column, will use the return value from `column.
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
}
```
## Clear Search Button
We have a built-in clear search function which allow user to clear search status via clicking button:
```js
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, ClearSearchButton } = Search;
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
<div>
<SearchBar { ...props.searchProps } />
<ClearSearchButton { ...props.searchProps } />
....
</div>
)
}
</ToolkitProvider>
```

View File

@ -33,6 +33,14 @@ Definition of columns props on BootstrapTable
* [headerAttrs](#columnheaderattrs-object-function)
* [headerSortingClasses](#headersortingclasses-string-function)
* [headerSortingStyle](#headersortingstyle-object-function)
* [footer](#columnfooter-string-function)
* [footerFormatter](#columnfooterformatter-function)
* [footerClasses](#columnfooterclasses-string-function)
* [footerStyle](#columnfooterstyle-object-function)
* [footerTitle](#columnfootertitle-string-function)
* [footerEvents](#columnfooterevents-object)
* [footerAlign](#columnfooteralign-string-function)
* [footerAttrs](#columnfooterattrs-object-function)
* [editable](#columneditable-bool-function)
* [validator](#columnvalidator-function)
* [editCellStyle](#columneditcellstyle-object-function)
@ -503,6 +511,162 @@ const sortingHeaderStyle = {
};
```
## column.footer - [String | Function]
Give a string to render the string value on the footer column.
```js
const columns = [{
dataField: 'id',
text: 'Product ID',
footerAlign: 'center',
footer: 'Footer 1'
}, .....];
```
This prop also accept a function:
```js
{
dataField: 'price',
text: 'Product Price',
footer: column => column.reduce((acc, item) => acc + item, 0)
}
```
## column.footerFormatter - [Function]
`footerFormatter` allow you to customize the table footer column and only accept a callback function which take two arguments and a JSX/String are expected for return.
* `column`
* `columnIndex`
## column.footerClasses - [String | Function]
It's similar to [`column.classes`](#columnclasses-string-function), `footerClasses` is available to have customized class on table footer column:
```js
{
// omit...
footerClasses: 'id-custom-cell'
}
```
Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
```js
{
footerClasses: function callback(column, colIndex) { ... }
}
```
**Parameters**
* `column`: The value of current column.
* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
## column.footerStyle - [Object | Function]
Customized the inline-style on table footer column:
```js
{
// omit...
footerStyle: { backgroundColor: 'green' }
}
```
Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
```js
{
footerStyle: function callback(column, colIndex) { ... }
}
```
**Parameters**
* `column`: The value of current column.
* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
## column.footerTitle - [Bool | Function]
Configure the title on footer column, default is disable. The usage is almost same as [`column.title`](#columntitle-bool-function),
```js
{
// omit...
footerTitle: true
}
```
It's also available to custom via a callback function:
```js
{
footerTitle: function callback(column, colIndex) { ... }
}
```
**Parameters**
* `column`: The value of current column.
* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
## column.footerEvents - [Object]
`footerEvents` same as [`column.events`](#columnevents-object) but it is for footer column:
```js
{
// omit...
footerEvents: {
onClick: e => { ... }
}
}
```
## column.footerAlign - [String | Function]
It's almost same as [`column.align`](#columnalign-string-function), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on footer column.
```js
{
// omit...
footerAlign: 'center'
}
```
Also, you can custom the align by a callback function:
```js
{
// omit...
footerAlign: (column, colIndex) => {
// column is an object and perform itself
// return custom title here
}
}
```
**Parameters**
* `column`: The value of current column.
* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
## column.footerAttrs - [Object | Function]
`footerAttrs` is similar to [`column.attrs`](#columnattrs-object-function) but it works for footer column.
```js
{
// omit...
footerAttrs: {
title: 'bar',
'data-test': 'foo'
}
}
```
Additionally, customize the header attributes by a **2** arguments callback function:
```js
{
// omit...
footerAttrs: (column, colIndex) => ({
// return customized HTML attribute here
})
}
```
**Parameters**
* `column`: The value of current column.
* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
## column.editable - [Bool | Function]
`column.editable` default is true, means every column is editable if you configure [`cellEdit`](./cell-edit-props.html). But you can disable some columns editable via setting `false`.

View File

@ -129,7 +129,7 @@ The usage of search functionality is a little bit different from legacy search.
- [x] Custom search component and position
- [x] Custom search value
- [ ] Clear search
- [x] Clear search
- [ ] Multiple search
- [ ] Strict search

View File

@ -0,0 +1,25 @@
---
title: New Release (2019-01-20)
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.1.0`
* `react-bootstrap-table2-filter@1.1.2`
* `react-bootstrap-table2-toolkit@1.2.0`
## Changelog
### Bug fixes
* Fixed can not clear date filter([9988e79](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/766/commits/9988e790c1106b6d2114bc6214796caa93d61807))
### Features
* Support built-in search clear button([1c68892](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/766/commits/1c68892a7b877931e5296069809bb8646f23ee76))
* Support table footer([#703](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/703))
### Enhancements
N/A