# Custom Editors: Autogenerate UI from Any Function

{% hint style="info" %}
 This is a [Mito Enterprise](https://trymito.io/plans) feature. [Upgrade](https://www.trymito.io/plans) to extend your spreadsheet with additional  functionality.
{% endhint %}

The Mito spreadsheet is built to be extensible for your team's use case. Mito users or infrastructure administrators can extend Mito with custom dataframe editing capabilities, like proprietary algorithms, calculations, and domain-specific knowledge.

Stop your internal Python code from rotting on the shelf, and get it to end users in the most intuitive interface -- a spreadsheet. 

## How to Write Custom Editor 

Adding custom editing functionality to the Mito spreadsheet is very simple:

1. Define a Python function that takes a `pd.DataFrame` and returns a `pd.DataFrame`. 
2. Pass this function to the `editors` parameter when creating the Mito sheet.
3. Use the `Custom Edits` dropdown in the Mito sheet to access this functionality - with an auto-generated UI!

### Example: Calculating Moving Average 

Imagine we're a financial institution that has implemented the following Python function, and we want to expose it to our users:

```python
import pandas as pd

def calculate_moving_average(df, column_to_average, window_size, exponential=False):
    """
    Calculate moving average for a given financial time series data.
    """
    if exponential:
        df['EMA'] = df[column_to_average].ewm(span=window_size, adjust=False).mean()
    else:
        df['SMA'] = df[column_to_average].rolling(window=window_size).mean()
    return df
```

#### Step 1: Add types to the function

First, we must add types to the parameters of the function. This ensures that Mito can correctly generate a UI for each of these parameters. In this case, we type this function in the following way:

```python
import pandas as pd
from mitosheet.extensions.v1 import ColumnHeader

def calculate_moving_average(df: pd.DataFrame, column_to_average: ColumnHeader, window_size: int, exponential: bool=False):
   """
    Calculate moving average for a given financial time series data.
    """
    if exponential:
        df['EMA'] = df[column_to_average].ewm(span=window_size, adjust=False).mean()
    else:
        df['SMA'] = df[column_to_average].rolling(window=window_size).mean()
    return df
```

#### Step 2: Pass this function to the `editors` parameter

Then, pass this function to the `editors` parameter. 

{% tabs %}
{% tab title="Jupyter" %}
Pass this custom editor with:

```python
mitosheet.sheet(editors=[calculate_moving_average])
```

{% endtab %}

{% tab title="Streamlit" %}
Pass this custom editor with:

```python
spreadsheet(editors=[calculate_moving_average])
```

{% endtab %}

{% tab title="Dash" %}
Pass this custom editor with:

```python
Spreadsheet(editors=[calculate_moving_average])
```

{% endtab %}
{% endtabs %}

#### Step 3: Pass some good testing data to the Mito sheet

Pass the following data to the Mito spreadsheet, so that we can test our new custom editor:

```python
import pandas as pd

data = {'Date': ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04', '2023-01-05'],
        'Price': [100, 102, 105, 101, 98]}
df1 = pd.DataFrame(data)
```

#### Step 4: Access the functionality in Mito with the `Custom Edits` dropdown

In the toolbar, a `Custom Edits` tab option will appear, with the Calculate Moving Average function beneath it:

<figure><img src="https://2294704369-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MP_U5ZCmiamDOXEOOTC%2Fuploads%2FFBfsyrjIBL1RNAUegTh2%2FScreenshot%202023-11-28%20at%204.37.29%20PM.png?alt=media&#x26;token=088ca80c-4932-4a17-9a66-46faedb68673" alt=""><figcaption></figcaption></figure>

Selecting this option will open a taskpane that allows you to configure this function, and calculate the moving average!

<figure><img src="https://2294704369-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MP_U5ZCmiamDOXEOOTC%2Fuploads%2FLMegEZAFwd5vrsFW1FlC%2FScreen%20Shot%202023-11-29%20at%203.46.57%20PM.png?alt=media&#x26;token=e74f84ea-7ae8-4ca1-99ec-d02aff8d4597" alt=""><figcaption></figcaption></figure>

## Supported Types

To see all the valid parameter types, check out the [Supported Types](#supported-types) section of the custom importers page.