add story and docs for #1067

This commit is contained in:
AllenFang
2019-08-24 14:04:49 +08:00
parent 47f6340a99
commit 963b8d669b
4 changed files with 95 additions and 1 deletions
+4
View File
@@ -49,6 +49,7 @@ Available properties in a column object:
* [editorRenderer](#editorRenderer)
* [filter](#filter)
* [filterValue](#filterValue)
* [searchable](#searchable)
* [csvType](#csvType)
* [csvFormatter](#csvFormatter)
* [csvText](#csvText)
@@ -917,6 +918,9 @@ A final `String` value you want to be filtered.
}
```
## <a name='searchable'>column.searchable - [Boolean]</a>
Default the column is searchable. Give `false` to disable search functionality on specified column.
## <a name='csvType'>column.csvType - [Object]</a>
Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
@@ -0,0 +1,87 @@
/* 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',
searchable: false
}, {
dataField: 'price',
text: 'Product Price',
searchable: false
}];
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',
searchable: false
}, {
dataField: 'price',
text: 'Product Price',
searchable: false
}];
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
/>
</div>
)
}
</ToolkitProvider>
`;
export default () => (
<div>
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
<div>
<h3>Column name and price is unsearchable</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
/>
</div>
)
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);
@@ -193,6 +193,7 @@ import DefaultCustomSearch from 'examples/search/default-custom-search';
import FullyCustomSearch from 'examples/search/fully-custom-search';
import SearchFormattedData from 'examples/search/search-formatted';
import CustomSearchValue from 'examples/search/custom-search-value';
import SearchableColumn from 'examples/search/searchable-column';
// CSV
import ExportCSV from 'examples/csv';
@@ -445,6 +446,7 @@ storiesOf('Table Search', module)
.add('Clear Search Button', () => <ClearSearchButton />)
.add('Default Search Table', () => <DefaultSearch />)
.add('Default Custom Search', () => <DefaultCustomSearch />)
.add('Searchable Column', () => <SearchableColumn />)
.add('Fully Custom Search', () => <FullyCustomSearch />)
.add('Search Formatted Value', () => <SearchFormattedData />)
.add('Custom Search Value', () => <CustomSearchValue />);
+2 -1
View File
@@ -161,7 +161,8 @@ HeaderCell.propTypes = {
validator: PropTypes.func,
filter: PropTypes.object,
filterRenderer: PropTypes.func,
filterValue: PropTypes.func
filterValue: PropTypes.func,
searchable: PropTypes.bool
}).isRequired,
index: PropTypes.number.isRequired,
onSort: PropTypes.func,