diff --git a/packages/react-bootstrap-table2-example/examples/search/default-search.js b/packages/react-bootstrap-table2-example/examples/search/default-search.js new file mode 100644 index 0000000..dc38cbc --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/search/default-search.js @@ -0,0 +1,83 @@ +/* eslint react/prop-types: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const { SearchBar } = Search; +const products = productsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; + +const { SearchBar } = Search; +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + + + { + props => ( +
+

Input something at below input field:

+ +
+ +
+ ) + } +
+`; + +export default () => ( +
+ + { + props => ( +
+

Input something at below input field:

+ +
+ +
+ ) + } +
+ { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 264580d..e97ba7a 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -137,6 +137,7 @@ import CustomPaginationTable from 'examples/pagination/custom-pagination'; // search import SearchTable from 'examples/search'; +import DefaultSearch from 'examples/search/default-search'; import DefaultCustomSearch from 'examples/search/default-custom-search'; import FullyCustomSearch from 'examples/search/fully-custom-search'; import SearchFormattedData from 'examples/search/search-formatted'; @@ -323,6 +324,7 @@ storiesOf('Pagination', module) storiesOf('Table Search', module) .addDecorator(bootstrapStyle()) .add('Basic Search Table', () => ) + .add('Default Search Table', () => ) .add('Default Custom Search', () => ) .add('Fully Custom Search', () => ) .add('Search Fromatted Value', () => ) diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md index 0886862..bfcce99 100644 --- a/packages/react-bootstrap-table2-toolkit/README.md +++ b/packages/react-bootstrap-table2-toolkit/README.md @@ -63,6 +63,22 @@ const { SearchBar } = Search; ### Search Options +#### defaultSearch - [string] +Accept a string that will be used for default searching when first time table render. + +```js + + // ... + +``` + #### searchFormatted - [bool] If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.