Links
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.