diff --git a/docs/README.md b/docs/README.md index 2178334..24804d8 100644 --- a/docs/README.md +++ b/docs/README.md @@ -22,6 +22,7 @@ * [rowEvents](#rowEvents) * [defaultSorted](#defaultSorted) * [pagination](#pagination) +* [filter](#filter) * [onTableChange](#onTableChange) ### keyField(**required**) - [String] @@ -193,6 +194,33 @@ paginator({ }) ``` +### filter - [Object] +`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly. + +```sh +$ npm install react-bootstrap-table2-filter --save +``` + +After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily: + +```js +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; + +// omit... +const columns = [ { + dataField: 'id', + text: 'Production ID' +}, { + dataField: 'name', + text: 'Production Name', + filter: textFilter() // apply text filter +}, { + dataField: 'price', + text: 'Production Price' +} ]; + +``` + ### onTableChange - [Function] This callback function will be called when [`remote`](#remote) enabled only. diff --git a/docs/columns.md b/docs/columns.md index 52aaa17..0f13a82 100644 --- a/docs/columns.md +++ b/docs/columns.md @@ -31,20 +31,22 @@ Available properties in a column object: * [validator](#validator) * [editCellStyle](#editCellStyle) * [editCellClasses](#editCellClasses) +* [filter](#filter) +* [filterValue](#filterValue) Following is a most simplest and basic usage: ```js const rows = [ { id: 1, name: '...', price: '102' } ]; const columns = [ { - dataField: id, - text: Production ID + dataField: 'id', + text: 'Production ID' }, { - dataField: name, - text: Production Name + dataField: 'name', + text: 'Production Name' }, { - dataField: price, - text: Production Price + dataField: 'price', + text: 'Production Price' } ]; ``` @@ -525,4 +527,24 @@ Or take a callback function // it is suppose to return a string } } -``` \ No newline at end of file +``` + +## column.filter - [Object] +Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters: + +* Text(`textFilter`) + +We have a quick example to show you how to use `column.filter`: + +``` +import { textFilter } from 'react-bootstrap-table2-filter'; + +// omit... +{ + dataField: 'price', + text: 'Product Price', + filter: textFilter() +} +``` + +For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial. \ No newline at end of file diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md new file mode 100644 index 0000000..8cef968 --- /dev/null +++ b/packages/react-bootstrap-table2-filter/README.md @@ -0,0 +1,40 @@ +# react-bootstrap-table2-filter + +## Filters + +* Text (`textFilter`) + +You can get all of above filters via import and these filters are a factory function to create a individual filter instance. +In addition, for some simple customization reasons, these factory function allow to pass some props. + +### Text Filter + +```js +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; + +// omit... +const columns = [ + ..., { + dataField: 'price', + text: 'Product Price', + filter: textFilter() +}]; + + +``` + +Following we list all the availabe props for `textFilter` function: + +```js +import { Comparator } from 'react-bootstrap-table2-filter'; +// omit... + +const customTextFilter = textFilter({ + placeholder: 'My Custom PlaceHolder', // custom the input placeholder + style: { ... }, // your custom styles on input + className: 'my-custom-text-filter', // custom classname on input + defaultValue: 'test', // default filtering value + delay: 1000, // how long will trigger filtering after user typing, default is 500 ms + comparator: Comparator.EQ // default is Comparator.LIKE +}); +``` \ No newline at end of file