Floating Cell Editor

Floating Cell Editor component can be used to create Mobile editors that resides out of the Spreadsheet container.

Mobile or Floating Cell Editor

To insert a mobile or floating cell editor

import { FloatingCellEditor, defaultSpreadsheetTheme } from "@rowsncolumns/spreadsheet"
import { functionDescriptions } from "@rowsncolumns/functions";

const App = () => {
  const [theme, onChangeTheme] = useState<SpreadsheetTheme>(
      defaultSpreadsheetTheme
    );
  const {
    activeSheetId,
    activeCell,
    selections,
    getUserEnteredValue,
    getEffectiveFormat,
    onChange,
    onChangeFormatting,
    onInsertRow,
    onInsertColumn 
  } = useSpreadsheetState({ ... })

  // Format of the current cell
  const currentCellFormat = useMemo(
    () =>
      getEffectiveFormat(
        activeSheetId,
        activeCell.rowIndex,
        activeCell.columnIndex
      ),
    [activeSheetId, activeCell, getEffectiveFormat]
  );

  return (
    <FloatingCellEditor
      initialValue={getUserEnteredValue(
        activeSheetId,
        activeCell.rowIndex,
        activeCell.columnIndex
      )}
      theme={theme}
      sheetId={activeSheetId}
      activeCell={activeCell}
      selections={selections}
      onChange={onChange}
      cellFormat={currentCellFormat}
      onChangeFormatting={onChangeFormatting}
      onInsertRow={onInsertRow}
      onInsertColumn={onInsertColumn}
      functionDescriptions={functionDescriptions}
    />
  )
}