Comment on page
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.
Real-time data
Cell renderer
Last modified 1d ago