# Cell editors

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

{% code overflow="wrap" %}

```tsx
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>
);
```

{% endcode %}

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

<figure><img src="/files/x6RYjkgprNT3qRZ0mcA5" alt=""><figcaption><p>Date Input component</p></figcaption></figure>

## Customizing Suggestions Dropdown

Use `SuggestionsDropdown` prop to inject a custom dropdown component

{% code overflow="wrap" %}

```tsx
<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>
    )
  }}
/>
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rowsncolumns.app/configuration/features/cell-editors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.