Search

Use the provided hooks and components to quickly add search functionality

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>
);