# 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="https://67932947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHWsslZpYESUXxPccoyig%2Fuploads%2Fgit-blob-fc0c96a64a2f7908cc906658533028225969e46a%2Fimage.png?alt=media" 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 %}