Comment on page
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>
);
Last modified 28d ago