mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
140 lines
4.0 KiB
Markdown
140 lines
4.0 KiB
Markdown
---
|
|
id: basic-search
|
|
title: Table Search
|
|
sidebar_label: Table Search
|
|
---
|
|
|
|
`react-bootstrap-table2` support a table search function just like legacy search in `react-bootstrap-table`. However, new way will be more easier to custom.
|
|
|
|
**[Live Demo For Table Search](../storybook/index.html?selectedKind=Table%20Search)**
|
|
**[API & Props Definition](./search-props.html)**
|
|
|
|
-----
|
|
|
|
## Prepare
|
|
|
|
Please check [How to start with table toolkit](./toolkits-getting-started.html)
|
|
|
|
|
|
## Enable Search
|
|
|
|
```js
|
|
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
|
|
|
|
const { SearchBar } = Search;
|
|
//...
|
|
|
|
<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>
|
|
```
|
|
|
|
* Enable search via [`search`](./search-props.html) prop on `ToolkitProvider`.
|
|
|
|
* `ToolkitProvider` is a wrapper of react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitProvider`.
|
|
|
|
* You should render `SearchBar` with `searchProps` as well. The `SearchBar` position is depends on you.
|
|
|
|
|
|
## Customize Search Component
|
|
|
|
`SearchBar` is a independent component, it's free to place this component in anywhere, just make sure it is inside of the `ToolkitProvider`.
|
|
You can add any `style` and `className` prop on `SearchBar` for component styling
|
|
|
|
In addition, following is some valid props on `SearchBar` component:
|
|
|
|
* `delay`: How long should trigger search after user enter the search text, default is `250` ms.
|
|
* placeholder: The placeholder on the input field, default is `Search`.
|
|
|
|
However, if you feel `SearchBar` can not fit your requirement or you want more customization, you can create your own search bar like following:
|
|
|
|
```js
|
|
// This is my custom search component
|
|
const MySearch = (props) => {
|
|
let input;
|
|
const handleClick = () => {
|
|
props.onSearch(input.value);
|
|
};
|
|
return (
|
|
<div>
|
|
<input
|
|
className="form-control"
|
|
style={ { backgroundColor: 'pink' } }
|
|
ref={ n => input = n }
|
|
type="text"
|
|
/>
|
|
<button className="btn btn-warning" onClick={ handleClick }>Click to Search!!</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const MyTable = () => (
|
|
<ToolkitProvider
|
|
keyField="id"
|
|
data={ products }
|
|
columns={ columns }
|
|
search
|
|
>
|
|
{
|
|
props => (
|
|
<div>
|
|
<BootstrapTable
|
|
{ ...props.baseProps }
|
|
/>
|
|
<MySearch { ...props.searchProps } />
|
|
<br />
|
|
</div>
|
|
)
|
|
}
|
|
</ToolkitProvider>
|
|
);
|
|
```
|
|
|
|
Following, we just explain how it work:
|
|
|
|
`ToolkitProvider` will pass a props which have a property called `searchProps`. `searchProps` have following properties:
|
|
|
|
* `onSearch`: Call this method with search text when you want to do the search.
|
|
|
|
|
|
In the customization case, you just need to pass `searchProps` to your component and call `searchProps.onSearch` when search trigger.
|
|
|
|
|
|
## Search on Formatted Data
|
|
|
|
`react-bootstrap-table2` default is search on your raw data. If you define a [`column.formatter`](./column-props.html#columnformatter-function) on a column, sometime that will cause
|
|
the search can't be performed accurately.
|
|
|
|
Therefore, we support [`searchFormatted`](./search-props.html#searchsearchformatted-bool) to let search can work on the formatted data.
|
|
|
|
## Customize the Search Value
|
|
|
|
Sometime, you hope `react-bootstrap-table2` to search another value instead of raw data, you can use [`column.filterValue`](./column-props.html#columnfiltervalue-function).
|
|
When table search on a specified column, will use the return value from `column.filterValue` for searching.
|
|
|
|
|
|
```js
|
|
..., {
|
|
dataField: 'type',
|
|
text: 'Job Type',
|
|
formatter: (cell, row) => types[cell],
|
|
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
|
|
}
|
|
```
|