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.

Date Input component

Customizing Suggestions Dropdown

Use SuggestionsDropdown prop to inject a custom dropdown component

<CanvasGrid
  SuggestionsDropdown={(props: SuggestionDropdownProps) => {
    return (
     <div className="absolute shadow-md bg-rnc-background rounded-md py-1 max-w-[400px] overflow-auto top-full mt-[2px] z-10 w-full flex flex-col">
      {props.items.map((item) => {
        return (
         <div
          onClick={() => {
           props.onSelect(item)
         }}>{item.title}</div>
        )
      })}
     </div>
    )
  }}
/>