mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-08-11 19:50:17 +00:00
add story and docs for #1067
This commit is contained in:
@@ -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
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user