vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-06-28 21:20:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #292 from react-bootstrap-table/documents/filters

Browse Source 
LGTM
This commit is contained in:
NickChen
2018-04-08 01:08:42 +08:00
committed by GitHub
parent ca047e145b 35f9503620
commit 27d42c71ca
6 changed files with 290 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/basic-sort.md
View File

@@ -11,7 +11,7 @@ sidebar_label: Table Sort
-----
## Enable Sort on Column
Firstly, you need to know what column you allow user to sort and give the [`sort`](./column-props.html#columnsort-bool) as `true` in the column definitation.
Firstly, you need to know what column you allow user to sort and give the [`sort`](./column-props.html#columnsort-bool) as `true` in the column definition.
```js
const columns = [{
@@ -57,7 +57,7 @@ Defined [`onSort`](./column-props.html#columnonsort-function) on target column:
## Custom the Sorting Algorithm
It's simple!! configure [`sortFunc`](./column-props.html#columnsortfunc-function) on column definitation.
It's simple!! configure [`sortFunc`](./column-props.html#columnsortfunc-function) on column definition.
```js
{

261
docs/filter-props.md
View File

@@ -2,5 +2,264 @@
id: filter-props
title: Column Filter Props
---
`react-bootstrap-table2` separate the filter core code base to [react-bootstrap-table2-filter](https://www.npmjs.com/package/react-bootstrap-table2-filter). The following are guideline about how to use and the details of props of [filterFactory](#filterfactory-props) and [filters](#filters-props). For more information, please take refer to the samples as [link](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Text%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) here.
**No Any Available Props Yet**
## **Content Table**
* [Getting Started](#getting-started)
* [How to use](#how-to-use)
* [Props of FilterFactory](#props-of-filterfactory)
* [Props of Filters](#props-of-filters)
* [textFilter](#textfilter)
* [selectFilter](#selectFilter)
* [numberFilter](#numberFilter)
* [Comparator](#comparator)
## **Getting Started**
```
$ npm install react-bootstrap-table2-filter --save
```
After installing `react-bootstrap-table2-filter`, you can configure `filter` on table as following instruction.
## **How to use**
You should apply following **2** to enable `filter` functionality for `react-bootstrap-table2`.
* `filterFactory`
* `filters` (**3** types support)
* textFilter
* selectFilter
* numberFilter
```js
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price',
filter: textFilter()
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
```
## **Props of FilterFactory**
**No Any Available Props Yet**
## **Props of Filters**
## textFilter
**Required**: NONE
**Optional**:
### textFilter.placeholder - [String]
* custom the input placeholder
### textFilter.className - [String]
* custom class name on input
### textFilter.defaultValue - [String]
* default filtering value
### textFilter.comparator - [Comparator]
* Specify what kind of comparator to compare. Default is Comparator.LIKE
### textFilter.caseSensitive - [Boolean]
* default is `false`, and `true` will only work when comparator is `LIKE`.
### textFilter.style - [Object]
* your custom inline styles on `input`
### textFilter.delay - [Number]
* Debounce time, which means how long will trigger filtering after user typing. Default is `500ms`.
### textFilter.getFilter - [Function]
* export `filter` function to allow users to access. For textFilter, `filter(value)` to filter columns dynamically.
**Example**
```js
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
const columns = [{
dataField: 'id',
text: 'Product ID',
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter({
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
className: 'my-custom-text-filter', // custom classname on input
defaultValue: 'test', // default filtering value
comparator: Comparator.EQ, // default is Comparator.LIKE
caseSensitive: true, // default is false, and true will only work when comparator is LIKE
style: { backgroundColor: 'yellow' }, // your custom inline styles on input
delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
onClick: e => console.log(e),
getFilter: (filter) => { // nameFilter was assigned once the component has been mounted.
nameFilter = filter;
}
})
}, {
dataField: 'price',
text: 'Product Price',
filter: textFilter()
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
```
## selectFilter
**Required**:
### selectFilter.options - [Object]
* (Required) the options for the list of drop down.
**Optional**:
### selectFilter.className - [String]
* custom class name on input
### selectFilter.withoutEmptyOption - [Boolean]
* When it was set to `true`, the drop down list would hide the default selection.
### selectFilter.defaultValue - [String]
* default filtering value
### selectFilter.comparator - [Comparator]
* Specify what kind of comparator to compare. Default is `Comparator.EQ`
### selectFilter.style - [Object]
* your custom inline styles on `input`
### selectFilter.getFilter - [Function]
* export `filter` function to allow users to access. For selectFilter, `filter(value)` to filter columns dynamically.
**Example**
```js
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
const selectOptions = {
0: 'good',
1: 'Bad',
2: 'unknown'
};
const columns = [
{ ... }, { ... }, {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptions[cell],
filter: selectFilter({
options: selectOptions,
className: 'test-classname',
withoutEmptyOption: true,
defaultValue: 2,
comparator: Comparator.LIKE, // default is Comparator.EQ
style: { backgroundColor: 'pink' },
getFilter: (filter) => { // qualityFilter was assigned once the component has been mounted.
qualityFilter = filter;
}
})
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
```
## numberFilter
**Required**: NONE
**Optional**:
### numberFilter.options - [Array]
* Once the `options` has been defined, it will render number `select` drop down instead of number input field.
### numberFilter.delay - [Number]
* Debounce time, which means how long will trigger filtering after user typing. Default is `500ms`.
### numberFilter.placeholder - [String]
* customized placeholder for number input.
### numberFilter.withoutEmptyComparatorOption - [Boolean]
* When it was set to `true`, the drop down list of `comparator` would hide the default selection.
### numberFilter.withoutEmptyNumberOption - [Boolean]
* When it was set to `true`, the drop down list of `number` would hide the default selection. Besides, before picking up this prop, please make sure that you've defined the `props.options` correctly.
### numberFilter.defaultValue - [Object]
* It is the default filtering value. Furthermore, it accepts **2** attributes:
* number: filter value
* comparator: what kind of comparator to compare
### numberFilter.comparator - [[Comparator]]
* Specify what kind of comparator to compare. Default is to list `all` of comparators.
### numberFilter.className - [String]
* custom class name on the `wrapper` of number input and comparator drop down.
### numberFilter.comparatorClassName - [String]
* custom class name on the `comparator` drop down.
### numberFilter.numberClassName - [String]
* custom class name on the number `input`.
### numberFilter.style - [Object]
* custom inline styles on the `wrapper` of number input and comparator drop down.
### numberFilter.comparatorStyle - [Object]
* custom inline styles on the `comparator` drop down.
### numberFilter.numberStyle - [Object]
* custom inline styles on the number `input`.
### numberFilter.getFilter - [Function]
* export `filter` function to allow users to access. For numberFilter,<br>`filter({ number, comparator })` to filter columns dynamically.
**Example**:
```js
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
const columns = [{ ... }, { ... }, {
dataField: 'price',
text: 'Product Price',
filter: numberFilter({
options: [2100, 2103, 2105], // if options defined, will render number select instead of number input
delay: 600, // how long will trigger filtering after user typing, default is 500 ms
placeholder: 'custom placeholder', // placeholder for number input
withoutEmptyComparatorOption: true, // dont render empty option for comparator
withoutEmptyNumberOption: true, // dont render empty option for number select if it is defined
comparators: [Comparator.EQ, Comparator.GT, Comparator.LT], // Custom the comparators
style: { display: 'inline-grid' }, // custom the style on number filter
className: 'custom-numberfilter-class', // custom the class on number filter
comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
comparatorClassName: 'custom-comparator-class', // custom the class on comparator select
numberStyle: { backgroundColor: 'cadetblue', margin: '0px' }, // custom the style on number input/select
numberClassName: 'custom-number-class', // custom the class on ber input/select
defaultValue: { number: 2103, comparator: Comparator.GT }, // default value
getFilter: (filter) => { // priceFilter was assigned once the component has been mounted.
priceFilter = filter;
}
})
}];
<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.
| | Comparator | Symbol | description |
|---|-----------------|--------|-------------------------|
| 1 | Comparator.LIKE | N/A | To include filter value |
| 2 | Comparator.EQ | = | |
| 3 | Comparator.NE | != | |
| 4 | Comparator.GT | > | |
| 5 | Comparator.GE | >= | |
| 6 | Comparator.LT | < | |
| 7 | Comparator.LE | <= | |

2
docs/migration.md
View File

@@ -99,7 +99,7 @@ Please see [available filter configuration](./filter-props.html).
Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.
Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](./column-props.html#columnfilter-object) property on column definitation and [`filter`](./table-props.html#filter-object) prop on `BootstrapTable`.
Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](./column-props.html#columnfilter-object) property on column definition and [`filter`](./table-props.html#filter-object) prop on `BootstrapTable`.
## Cell Edit

27
docs/table-props.md
View File

@@ -230,30 +230,33 @@ paginationFactory({
```
## filter - [Object]
`filter` allow user to filter data by column. However, filter functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
`filter` allows users to filter data by columns. For more information, please navigate to [filter-props](./filter-props.html).
```sh
**Getting Started**
```
$ npm install react-bootstrap-table2-filter --save
```
After installation of `react-bootstrap-table2-filter`, you can configure filter on table easily:
After installing `react-bootstrap-table2-filter`, you could easily enable the functionality of `filter`.
**Example**
```js
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
// omit...
const columns = [ {
dataField: 'id',
text: 'Production ID'
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Production Name',
filter: textFilter() // apply text filter
text: 'Product Name'
}, {
dataField: 'price',
text: 'Production Price'
} ];
<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
text: 'Product Price',
filter: textFilter() // apply text filter
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
```
## onTableChange - [Function]

12
website/i18n/en.json
View File

@@ -40,12 +40,12 @@
"Blog": "Blog",
"Basic Usage": "Basic Usage",
"Remote Table": "Remote Table",
"Table Definitation": "Table Definitation",
"Column Definitation": "Column Definitation",
"Cell Editing Definitation": "Cell Editing Definitation",
"Pagination Definitation": "Pagination Definitation",
"Row Select Definitation": "Row Select Definitation",
"Column Filter Definitation": "Column Filter Definitation"
"Table Definition": "Table Definition",
"Column Definition": "Column Definition",
"Cell Editing Definition": "Cell Editing Definition",
"Pagination Definition": "Pagination Definition",
"Row Select Definition": "Row Select Definition",
"Column Filter Definition": "Column Filter Definition"
},
"pages-strings": {
"Help Translate|recruit community translators for your project": "Help Translate",

12
website/sidebars.json
View File

@@ -20,22 +20,22 @@
]
},
"api": {
"Table Definitation": [
"Table Definition": [
"table-props"
],
"Column Definitation": [
"Column Definition": [
"column-props"
],
"Cell Editing Definitation": [
"Cell Editing Definition": [
"cell-edit-props"
],
"Pagination Definitation": [
"Pagination Definition": [
"pagination-props"
],
"Row Select Definitation": [
"Row Select Definition": [
"row-select-props"
],
"Column Filter Definitation": [
"Column Filter Definition": [
"filter-props"
]
}