Skip to content

Commit 963b8d6

Browse files
committed
add story and docs for #1067
1 parent 47f6340 commit 963b8d6

File tree

4 files changed

+95
-1
lines changed

4 files changed

+95
-1
lines changed

docs/columns.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ Available properties in a column object:
4949
* [editorRenderer](#editorRenderer)
5050
* [filter](#filter)
5151
* [filterValue](#filterValue)
52+
* [searchable](#searchable)
5253
* [csvType](#csvType)
5354
* [csvFormatter](#csvFormatter)
5455
* [csvText](#csvText)
@@ -917,6 +918,9 @@ A final `String` value you want to be filtered.
917918
}
918919
```
919920

921+
## <a name='searchable'>column.searchable - [Boolean]</a>
922+
Default the column is searchable. Give `false` to disable search functionality on specified column.
923+
920924
## <a name='csvType'>column.csvType - [Object]</a>
921925
Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
922926

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const { SearchBar } = Search;
10+
const products = productsGenerator();
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID'
15+
}, {
16+
dataField: 'name',
17+
text: 'Product Name',
18+
searchable: false
19+
}, {
20+
dataField: 'price',
21+
text: 'Product Price',
22+
searchable: false
23+
}];
24+
25+
const sourceCode = `\
26+
import BootstrapTable from 'react-bootstrap-table-next';
27+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
28+
29+
const { SearchBar } = Search;
30+
const columns = [{
31+
dataField: 'id',
32+
text: 'Product ID'
33+
}, {
34+
dataField: 'name',
35+
text: 'Product Name',
36+
searchable: false
37+
}, {
38+
dataField: 'price',
39+
text: 'Product Price',
40+
searchable: false
41+
}];
42+
43+
<ToolkitProvider
44+
keyField="id"
45+
data={ products }
46+
columns={ columns }
47+
search
48+
>
49+
{
50+
props => (
51+
<div>
52+
<h3>Input something at below input field:</h3>
53+
<SearchBar { ...props.searchProps } />
54+
<hr />
55+
<BootstrapTable
56+
{ ...props.baseProps }
57+
/>
58+
</div>
59+
)
60+
}
61+
</ToolkitProvider>
62+
`;
63+
64+
export default () => (
65+
<div>
66+
<ToolkitProvider
67+
keyField="id"
68+
data={ products }
69+
columns={ columns }
70+
search
71+
>
72+
{
73+
props => (
74+
<div>
75+
<h3>Column name and price is unsearchable</h3>
76+
<SearchBar { ...props.searchProps } />
77+
<hr />
78+
<BootstrapTable
79+
{ ...props.baseProps }
80+
/>
81+
</div>
82+
)
83+
}
84+
</ToolkitProvider>
85+
<Code>{ sourceCode }</Code>
86+
</div>
87+
);

packages/react-bootstrap-table2-example/stories/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@ import DefaultCustomSearch from 'examples/search/default-custom-search';
193193
import FullyCustomSearch from 'examples/search/fully-custom-search';
194194
import SearchFormattedData from 'examples/search/search-formatted';
195195
import CustomSearchValue from 'examples/search/custom-search-value';
196+
import SearchableColumn from 'examples/search/searchable-column';
196197

197198
// CSV
198199
import ExportCSV from 'examples/csv';
@@ -445,6 +446,7 @@ storiesOf('Table Search', module)
445446
.add('Clear Search Button', () => <ClearSearchButton />)
446447
.add('Default Search Table', () => <DefaultSearch />)
447448
.add('Default Custom Search', () => <DefaultCustomSearch />)
449+
.add('Searchable Column', () => <SearchableColumn />)
448450
.add('Fully Custom Search', () => <FullyCustomSearch />)
449451
.add('Search Formatted Value', () => <SearchFormattedData />)
450452
.add('Custom Search Value', () => <CustomSearchValue />);

packages/react-bootstrap-table2/src/header-cell.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,8 @@ HeaderCell.propTypes = {
161161
validator: PropTypes.func,
162162
filter: PropTypes.object,
163163
filterRenderer: PropTypes.func,
164-
filterValue: PropTypes.func
164+
filterValue: PropTypes.func,
165+
searchable: PropTypes.bool
165166
}).isRequired,
166167
index: PropTypes.number.isRequired,
167168
onSort: PropTypes.func,

0 commit comments

Comments
 (0)