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>
);
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.

Last modified 1d ago