Links

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