• Docs
  • API
  • Help
  • Blog
  • GitHub

›Search Definition

Table Definition

  • BootstrapTable Props

Column Definition

  • Columns Props

Cell Editing Definition

  • Cell Editing Props

Pagination Definition

  • Pagination Props

Row Select Definition

  • Row Selection Props

Row Expand Definition

  • Row Expand Props

Column Filter Definition

  • Column Filter Props

Search Definition

  • Search Props

Export to CSV Definition

  • Export CSV Props

Search Props

Table search in one of features supported by react-bootstrap-table2-toolkit. By passing search prop to ToolkitProvider for enabling this functionality.

Required

N/A

Optional

  • searchFormatted
  • defaultSearch
  • onColumnMatch
  • afterSearch

search.searchFormatted - [Bool]

If you want to search on the formatted data, you are supposed to enable this prop. react-bootstrap-table2 will check if you define the column.formatter when doing search.

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search={ {
    searchFormatted: true
  } }
>
  // ...
</ToolkitProvider>

search.defaultSearch - [String]

Accept a string that will be used for default searching when first time table render.

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search={ {
    defaultSearch: 'search something here'
  } }
>
  // ...
</ToolkitProvider>

search.onColumnMatch - [Function]

Acccpt a function which will be called when table try to match every cells when search happening. This function accept an object like below example:

function onColumnMatch({
  searchText,
  value,
  column,
  row
}) {
  // implement your custom match logic on every cell value
}
 <ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search={ {
    onColumnMatch
  } }
>
  // ...
</ToolkitProvider>

Notes: You have to return true when your match logic is positive and vice versa.

search.afterSearch - [Function]

After search done, this callback function will be called with newest result.

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search={ {
    afterSearch: (newResult) => console.log(newResult)
  } }
>
  // ...
</ToolkitProvider>
← Column Filter PropsExport CSV Props →
Docs
Getting StartedAPI References
Community
Stack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 react-bootstrap-table2.