SheetSearch

Search within a sheet with this component

Ctrl +F to display Sheet Search component

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}
      />
    </>
  )
}