> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/configuration/features/search.md). # Search `useSearch` hook gives you some basic defaults for search and outputs a `borderStyles` prop so that the grid can highlight the cells. `SheetSearch` is a generic form input that shows and hides when search is active. 
import { SpreadsheetProvider, CanvasGrid, SheetSearch } from "@rowsncolumns/spreadsheet";
import { useSearch } from "@rowsncolumns/spreadsheet-state"

const MySpreadsheet = () => {
  const { getCellData, getNonEmptyColumnCount, getNonEmptyRowCount } = useSpreadsheetState()
  
  const {
    onSearch,
    onResetSearch,
    onFocusNextResult,
    onFocusPreviousResult,
    hasNextResult,
    hasPreviousResult,
    borderStyles,
    isSearchActive,
    onRequestSearch,
  } = useSearch({
    getCellData,
    sheetId: activeSheetId,
    getNonEmptyColumnCount,
    getNonEmptyRowCount,
  });
  
  return (
    <>
      <CanvasGrid
        ...
        onRequestSearch={onRequestSearch}
        borderStyles={borderStyles}
      />
      
      // Make sure you have a parent div with position: relative
      <SheetSearch
        isActive={isSearchActive}
        onSubmit={onSearch}
        onReset={onResetSearch}
        onNext={onFocusNextResult}
        onPrevious={onFocusPreviousResult}
        disableNext={!hasNextResult}
        disablePrevious={!hasPreviousResult}
      />
    </>
  );
};

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
);