Cell editors

Switch between custom or default cell editor

CanvasGrid accepts CellEditor props so developers can inject their own custom editor when required.

import React from "react";
import { CanvasGrid, SpreadsheetProvider, CellEditorProps, CellEditor as DefaultCellEditor } from "@rowsncolumns/spreadsheet";

const MySpreadsheet = () => {
  return (
    <CanvasGrid
      sheetId={1}
      rowCount={100}
      columnCount={100}
      CellEditor={(props: CellEditorProps) => {
        if (props.cell.rowIndex === 2) {
          return (
            <select
              style={{
                position: "absolute",
                left: 0,
                top: 0,
                width: props.position.width,
                transform: `translate(${props.position.x}px, ${props.position.y}px)`,
              }}
              onChange={(e) => {
                props.onSubmit?.(e.target.value, props.activeCell);
              }}
            >
              <option>Foo</option>
              <option>bar</option>
            </select>
          );
        }
        // Fallback to default cell editor
        return <DefaultCellEditor {...props} />
      }}
    />
  );
};

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

Date/Calendar input

Any cell with numberFormat.type set to DATE will show a date picker while editing.

The date picker is only visible if user is editing the cell using a pointer device like mouse, pen, touch/stylus etc.