useSpreadsheet

useSpreadsheet exposes some of the internal API via hooks

Wrap your app in SpreadsheetProvider to use useSpreadsheet hook

import { SpreadsheetProvider, CanvasGrid, useSpreadsheet } from "@rowsncolumns/spreadsheet";

const MySpreadsheet = () => {
  const {
    makeEditable,
    canEditCell,
    cancelEditor,
    focusSheet,
    getCellBounds,
    getCellDimensions,
    getContentfulGridRangeAroundCell,
    getNamedRanges,
    getNextFocusableCell,
    getRowHeight,
    getSelectionsFromFormula,
    getTableColumnNames,
    getTableNames,
    onEditorKeyDown,
    scrollToCell,
    setEditorValue,
    submitEditor,
    updateSelectionStartEndReference,
    tokenizer,
  } = useSpreadsheet();
  return (
    <CanvasGrid />
  );
};

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

API	Description
makeEditable	Manually trigger a cell to be in edit mode
canEditCell	Verify if a cell is editable, respects protected ranges
cancelEditor	Cancels edit mode
focusSheet	Trigger focus on the Spreadsheet
getCellBounds	Get relative position of a cell relative to container
getCellDimensions	Get dimension (x, y, width, height) of a cell
getContentfulGridRangeAroundCell	Get range around a specific cells that has content
getNamedRanges	Get all named ranges of a sheet
getNextFocusableCell	Get next available cell that can be focused. Skips hidden cells, rows and columns
getRowHeight	Returns row height of a rowIndex
getSelectionsFromFormula	Get all selections from text
getTableColumnNames	Helper function to retrieve table column names
getTableNames	Helper function to retrieve table names
onEditorKeyDown	Callback when user enters value in editor
scrollToCell	Scroll to a cell
setEditorValue	Imperatively set value in the editor
submitEditor	Submit value of a editor
updateSelectionStartEndReference	Internal function to update selection references
tokenizer	Tokenizer formulas to identify selections and structured references
flash	Flash a range of cells with a specified color and duration
showCellPopover	Show a popover at a specific cell location with custom content
dispatchEvent	Dispatch events to the spreadsheet grid
redrawGrid	Manually trigger a redraw of the grid

Examples

Flash cells

Flash a range of cells to draw user attention:

const { flash } = useSpreadsheet();

// Flash a range with yellow color for 1.5 seconds
flash?.(
  {
    startRowIndex: 2,
    endRowIndex: 3,
    startColumnIndex: 2,
    endColumnIndex: 3,
    sheetId: activeSheetId,
  },
  "#ffcc00",
  1500
);

Show cell popover

Display custom content in a popover at a specific cell:

const { showCellPopover } = useSpreadsheet();

showCellPopover?.(
  {
    rowIndex: 2,
    columnIndex: 3,
    sheetId: 1,
  },
  () => <div>Custom popover content</div>
);

Redraw grid

Manually trigger a grid redraw (useful after loading custom fonts):

const { redrawGrid } = useSpreadsheet();

loadWebFont(["Lobster"]).then(() => {
  redrawGrid?.();
});