mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-08-16 13:40:17 +00:00
20190925 release
This commit is contained in:
+26
-3
@@ -121,8 +121,11 @@ const qualityFilter = selectFilter({
|
||||
// omit...
|
||||
```
|
||||
|
||||
> Note, the `selectOptions` can be an array also:
|
||||
```js
|
||||
> Note, the `selectOptions` can be an array or a function as well:
|
||||
|
||||
### Array as options
|
||||
|
||||
```js
|
||||
const selectOptions = [
|
||||
{ value: 0, label: 'good' },
|
||||
{ value: 1, label: 'Bad' },
|
||||
@@ -138,7 +141,27 @@ const columns = [
|
||||
})
|
||||
}];
|
||||
```
|
||||
The benifit is `react-bootstrap-table2` will render the select options by the order of array.
|
||||
|
||||
### Function as options
|
||||
|
||||
```js
|
||||
const selectOptions = [
|
||||
{ value: 0, label: 'good' },
|
||||
{ value: 1, label: 'Bad' },
|
||||
{ value: 2, label: 'unknown' }
|
||||
];
|
||||
const columns = [
|
||||
..., {
|
||||
dataField: 'quality',
|
||||
text: 'Product Quailty',
|
||||
formatter: cell => selectOptions.find(opt => opt.value === cell).label,
|
||||
filter: selectFilter({
|
||||
options: () => selectOptions
|
||||
})
|
||||
}];
|
||||
```
|
||||
|
||||
The benifit is `react-bootstrap-table2` will render the select options by the order of array.
|
||||
|
||||
|
||||
## MultiSelect Filter
|
||||
|
||||
@@ -39,11 +39,16 @@ This is an example for [manage on expands](../storybook/index.html?selectedKind=
|
||||
## Customization
|
||||
|
||||
### Style/Class
|
||||
`expandRow.renderer` allow you to render everything in the content of expanding row. You can control the style or class by yourself. However, a expand row is wrapped by a HTML `tr` element(Parent row). Currently, we support following way to custom the class/style on parent row element:
|
||||
`expandRow.renderer` allow you to render everything in the content of expanding row. You can custom the style or class by yourself. However, a expand row is wrapped by a HTML `tr` element(Parent row). Currently, we support following way to custom the class/style on parent row element:
|
||||
|
||||
* For the class of parent row: [`expandRow.parentClassName`](./row-expand-props.html#expandrowparentclassname-string-function)
|
||||
* For the style of parent row: N/A
|
||||
|
||||
In addition, the way to custom the class/style on expanding row element:
|
||||
* For the class of expanding row: [`expandRow.className`](./row-expand-props.html#expandrowclassname-string-function)
|
||||
* For the style of expanding row: N/A
|
||||
|
||||
|
||||
### Expand Column
|
||||
`react-bootstrap-table2` default doesn't render a additional indicator column, just like row selection. But if you want it, you can enable it via [`expandRow.showExpandColumn`](./row-expand-props.html#expandrowshowexpandcolumn-bool)
|
||||
|
||||
|
||||
@@ -52,6 +52,7 @@ Definition of columns props on BootstrapTable
|
||||
* [editorRenderer](#columneditorrenderer-function)
|
||||
* [filter](#columnfilter-object)
|
||||
* [filterValue](#columnfiltervalue-function)
|
||||
* [searchable](#columnsearchable-bool)
|
||||
* [csvType](#columncsvType-object)
|
||||
* [csvFormatter](#columncsvFormatter-function)
|
||||
* [csvText](#columncsvText-string)
|
||||
@@ -902,6 +903,9 @@ A final `String` value you want to be filtered.
|
||||
}
|
||||
```
|
||||
|
||||
## column.searchable - [Bool]
|
||||
Default the column is searchable. Give `false` to disable search functionality on specified column.
|
||||
|
||||
|
||||
## column.csvType - [Object]
|
||||
Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
|
||||
|
||||
@@ -20,6 +20,7 @@ title: Row Expand Props
|
||||
* [expandColumnPosition](#expandrowexpandcolumnposition-string)
|
||||
* [expandColumnRenderer](#expandrowexpandcolumnrenderer-function)
|
||||
* [expandHeaderColumnRenderer](#expandrowexpandheadercolumnrenderer-function)
|
||||
* [className](#expandrowclassname-string-function)
|
||||
* [parentClassName](#expandrowparentclassname-string-function)
|
||||
|
||||
-----
|
||||
@@ -182,10 +183,32 @@ const expandRow = {
|
||||
};
|
||||
```
|
||||
|
||||
## expandRow.className - [String | Function]
|
||||
Apply the custom class name on the expanding row. For example:
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...,
|
||||
className: 'foo'
|
||||
};
|
||||
```
|
||||
|
||||
Following case is more flexible way to custom the class name:
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...,
|
||||
className: (isExpanded, row, rowIndex) => {
|
||||
if (rowIndex > 2) return 'foo';
|
||||
return 'bar';
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## expandRow.parentClassName - [String | Function]
|
||||
Apply the custom class name on parent row of expanded row. For example:
|
||||
|
||||
```js
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...,
|
||||
parentClassName: 'foo'
|
||||
@@ -193,7 +216,7 @@ const expandRow = {
|
||||
```
|
||||
Below case is more flexible way to custom the class name:
|
||||
|
||||
```js
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...,
|
||||
parentClassName: (isExpanded, row, rowIndex) => {
|
||||
|
||||
Reference in New Issue
Block a user