Skip to main content

Search Props

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

Required​

N/A

Optional​

search.searchFormatted - [Bool]​

If you want to search on the formatted data, you are supposed to enable this prop. react-bootstrap-table-ng 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>