# SheetSearch

<figure><img src="https://67932947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHWsslZpYESUXxPccoyig%2Fuploads%2Fgit-blob-85287c1bb6323a26129d2e2ea592276fecc5b4bc%2Fimage.png?alt=media" alt=""><figcaption><p>Ctrl +F to display Sheet Search component</p></figcaption></figure>

{% code overflow="wrap" %}

```tsx
import { CanvasGrid, SheetSearch } from "@rowsncolumns/spreadsheet"
import { useSpreadsheetState, useSearch } from "@rowsncolumns/spreadsheet-state"

const App = () => {
  const activeSheetId = 1
  const { getCellData, getNonEmptyColumnCount, getNonEmptyRowCount } = useSpreadsheetState({
    ...
  })
  const {
      onSearch,
      onResetSearch,
      onFocusNextResult,
      onFocusPreviousResult,
      hasNextResult,
      hasPreviousResult,
      borderStyles,
      isSearchActive,
      onRequestSearch,
      totalResults,
      currentResult,
      searchQuery,
    } = useSearch({
      getCellData,
      sheetId: activeSheetId,
      getNonEmptyColumnCount,
      getNonEmptyRowCount,
    });
  return (
    <>
      <CanvasGrid
        borderStyles={borderStyles}
      />
      <SheetSearch
        isActive={isSearchActive}
        onSubmit={onSearch}
        onReset={onResetSearch}
        onNext={onFocusNextResult}
        onPrevious={onFocusPreviousResult}
        disableNext={!hasNextResult}
        disablePrevious={!hasPreviousResult}
        currentResult={currentResult}
        totalResults={totalResults}
        searchQuery={searchQuery}
      />
    </>
  )
}
```

{% endcode %}