> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/configuration/components/floating-cell-editor.md).

# Floating Cell Editor

<figure><img src="/files/o2cLT13UhElrAoeioK66" alt=""><figcaption><p>Mobile or Floating Cell Editor</p></figcaption></figure>

To insert a mobile or floating cell editor

{% code overflow="wrap" %}

```tsx
import { FloatingCellEditor, defaultSpreadsheetTheme } from "@rowsncolumns/spreadsheet"
import { functionDescriptions } from "@rowsncolumns/functions";

const App = () => {
  const [theme, onChangeTheme] = useState<SpreadsheetTheme>(
      defaultSpreadsheetTheme
    );
  const {
    activeSheetId,
    activeCell,
    selections,
    getUserEnteredValue,
    getEffectiveFormat,
    onChange,
    onChangeFormatting,
    onInsertRow,
    onInsertColumn 
  } = useSpreadsheetState({ ... })

  // Format of the current cell
  const currentCellFormat = useMemo(
    () =>
      getEffectiveFormat(
        activeSheetId,
        activeCell.rowIndex,
        activeCell.columnIndex
      ),
    [activeSheetId, activeCell, getEffectiveFormat]
  );

  return (
    <FloatingCellEditor
      initialValue={getUserEnteredValue(
        activeSheetId,
        activeCell.rowIndex,
        activeCell.columnIndex
      )}
      theme={theme}
      sheetId={activeSheetId}
      activeCell={activeCell}
      selections={selections}
      onChange={onChange}
      cellFormat={currentCellFormat}
      onChangeFormatting={onChangeFormatting}
      onInsertRow={onInsertRow}
      onInsertColumn={onInsertColumn}
      functionDescriptions={functionDescriptions}
    />
  )
}
```

{% endcode %}