Mito
Mito for Streamlit
  • Mito Documentation
  • Getting Started
    • Installing Mito
      • Fixing Common Install Errors
      • Installing Mito in a Docker Container
      • Installing Mito for Streamlit
      • Installing Mito for Dash
      • Installing Mito in a Jupyter Notebook Directly
      • Installing Mito in Vertex AI
      • Setting Up a Virtual Environment
  • Data Copilot
    • Data Copilot Core Concepts
    • Agent
    • Chat
    • Autocomplete
    • Smart Debugging
    • Configuration Options
    • Database Connectors
    • AI Data Usage FAQ
  • Apps (Beta)
    • Mito Apps
  • Mito Spreadsheet
    • Core Concepts
    • Creating a Mitosheet
      • Open Existing Virtual Environments
    • Importing Data
      • Importing CSV Files
      • Importing from Excel Files
      • Importing Dataframes
      • Importing from a remote drive
      • Import: Generated UI from any Python Function
      • Importing from other sources
    • Graphing
      • Graph Creation
      • Graph Styling
      • Graph Export
    • Pivoting/Group By
    • Filter
      • Filter By Condition
      • Filter By Value
    • Mito AI
    • Summary Statistics
    • Type Changes
    • Spreadsheet Formulas
      • Custom Spreadsheet Functions
      • Formula Reference
      • Using VLOOKUP
    • Editing Individual Cells
    • Combining Dataframes
      • Merge (horizontal)
      • Concatenate (horizontal)
      • Anti-merge (unique)
    • Sort Data
    • Split Text to Columns
    • Deleting Columns
    • Deleting Rows
    • Column Headers
      • Editing Column Headers
      • Promote Row to Header
    • Deduplicate
    • Fill NaN Values
    • Transpose
    • Reset Index
    • Unpivot a Dataframe (Melt)
    • Formatting
      • Column Formatting
      • Dataframe Colors
      • Conditional Formatting
    • Exporting Data
      • Download as CSV
      • Download as Excel
      • Generate code to create Excel and CSV reports
    • Using the Generated Code
      • Turn generated code into functions
    • Changing Imported Data
    • Code Snippets
    • Custom Editors: Autogenerate UI from Any Function
    • Find and Replace
    • Bulk column header edits
    • Code Options
    • Scheduling your Automation
    • Keyboard Shortcuts
    • Upgrading Mito
    • Enterprise Logging
  • Mito for Streamlit
    • Getting Started with Mito for Streamlit
    • Streamlit Overview
    • Create a Mito for Streamlit App
    • API Reference
      • Understanding import_folder
      • RunnableAnalysis class
      • Column Definitions
    • Streamlit App Gallery
    • Experienced Streamlit Users
    • Common Design Patterns
      • Deploying Mito for Streamlit in a Docker Image
      • Using Mito for Final Mile Data Cleaning
  • Mito for Dash
    • Getting Started
    • Dash Overview
    • Your First Dash App with Mito
    • Mito vs. Other Dash Components
    • API Reference
      • Understanding import_folder
    • Dash App Gallery
    • Common Design Patterns
      • Refresh Sheet Data Periodically
      • Change Sheet Data from a Select
      • Filter Other Elements to Data Selected in Mito
      • Graph New Data after Edits to Mito
      • Set Mito Spreadsheet Theme
  • Tutorials
    • Pass a dataframe into Mito
    • Create a line chart of time series data
    • Delete Columns with Missing Values
    • Split a column on delimiter
    • Rerun analysis on new data
    • Calculate the difference between rows
    • Calculate each cell's percent total of column
    • Import multiple tables from one Excel sheet
    • Share Mito Spreadsheets Across Users
  • Misc
    • Release Notes
      • May 28 - Just a Query Away
      • April 15 - Now Streaming (0.1.18)
      • March 21 - Smarter, Faster, Stronger Agents
      • February 25 - Agent Mode QoL Improvements
      • February 18 - Mito Agents
      • January 2nd - Inline Completions Arrive
      • December 6th - Smarter Workflow
      • November 27th - @ Mentions, Mito AI Server
      • November 4th, 2024 - Hello Mito AI
      • October 8, 2024 - JupyterLab 4
      • Aug 29th, 2024
      • June 12, 2024
      • March 19, 2024
      • March 13th, 2024
      • February 12th, 2024: Graphing Improvements
      • January 25th, 2024
      • January 5th, 2023: Keyboard Shortcuts
      • December 6, 2023: New Context Menu
      • November 28, 2023: Mito's New Toolbar
      • November 7, 2023: Multiplayer Dash
      • October 23, 2023: RunnableAnalysis class
      • October 16, 2023: Mito for Dash, Custom Editors
      • September 29, 2023: VLOOKUP and Find and Replace!
      • September 7, 2023
      • August 2, 2023: Mito for Streamlit!
      • July 10, 2023
      • May 31, 2023: Mito AI Recon
      • May 19, 2023: Mito AI Chat!
      • April 27, 2023: Generate Functions, Performance improvements, bulk column header transformations
      • April 18, 2023: Cell Editor Improvements, BYO Large Language Model, and more
      • April 10, 2023: AI Access, Excel-like Cell Editor, Performance Improvements
      • April 5, 2023: Range formulas, Pandas 2.0, Snowflake Views
      • March 29, 2023: Excel Range Import Improvements
      • March 14, 2023: Mito AI, Public Interface Versioning
      • February 28, 2023: In-place Pivot Errors
      • February 7, 2023: Excel-like Formulas, Snowflake Import
      • January 23, 2023: Excel range importing
      • January 8, 2023: Custom Code snippets
      • December 26, 2022: Code snippets and bug fixes
      • December 12, 2022: Group Dates in Pivot Tables, Reduced Dependencies
      • November 15, 2022: Filter in Pivot
      • November 9, 2022: Import and Enterprise Config
      • October 31, 2022: Replay Analysis Improvements
      • Old Release Notes
      • August 10, 2023: Export Formatting to Excel
    • Mito Enterprise Features
    • FAQ
    • Terms of Service
    • Privacy Policy
  • Mito
Powered by GitBook

© Mito

On this page
  • The Spreadsheet Component
  • Activate Mito
  • Spreadsheet Component API
  • Callback Props and Types
  • The SpreadsheetResult object
  • Examples

Was this helpful?

  1. Mito for Dash

API Reference

Creating and interacting with the Mito Spreadsheet component in Dash.

The Spreadsheet Component

To display a Mito spreadsheet in a Dash application, use the following code:

from mitosheet.mito_dash.v1 import Spreadsheet, activate_mito
from dash import Dash, html
import pandas as pd

app = Dash(__name__)
activate_mito(app)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

app.layout = html.Div([
    html.H1('Empty Mito Spreadsheet'),
    Spreadsheet(df, id={'type': 'spreadsheet', 'id': 'sheet'})
])

if __name__ == '__main__':
    app.run_server(debug=True)

Activate Mito

After creating a Dash app instance, you need to activate Mito. This activation step simply sets up communication between the Mito frontend and the backend, and ensures that Mito works like a proper spreadsheet.

from mitosheet.mito_dash.v1 import activate_mito, Spreadsheet
from dash import Dash

app = Dash(__name__)
activate_mito(app)

Spreadsheet Component API

After you have activated Mito, you can now create a Spreadsheet component. It has the following API:

from mitosheet.mito_dash.v1 import activate_mito, Spreadsheet

Spreadsheet(
    *args: Union[pd.Dataframe, str, None],
    id: str,
    import_folder: Optional[str]=None,
    df_names: Optional[List[str]]=None,
    sheet_functions: Optional[List[Callable]]=None, 
    importers: Optional[List[Callable]]=None,
    code_options: Optional[CodeOptions]=None,
    track_selection: Optional[bool]=False
) -> Tuple[Dict[str, pd.DataFrame], str]
Argument Name
Type
Explanation

*args

Pass any number of Pandas dataframes or paths to CSV files that will be displayed by in the Mito spreadsheet.

id

An necessary key that uniquely identifies this component as a spreadsheet with a unique ID. Must be a dictonary the the keys type and id, where type: spreadsheet and id is a unique string.

import_folder

df_names

if you pass Pandas dataframes through the args, then optionally include the names of these dataframes in this list. This makes Mito generated code more correct.

sheet_functions

importers

editors

code_options

track_selection

If you want to register callbacks based on selection changes in the sheet, set this to True. Has a performance impact on scrolling through your data.

Callback Props and Types

A simple interactive example

Mito works differently in that it requires you to use the @mito_callback decorator when you're subscribing to Input or State changes from a Mito spreadsheet.

A simple example:

from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito
from dash import Dash, html, Input, Output, State
import pandas as pd

app = Dash(__name__)
activate_mito(app)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

app.layout = html.Div([
    html.H1('Simple Mito Example'),
    Spreadsheet(df, id={'type': 'spreadsheet', 'id': 'sheet'}),
    html.Div(id='output')
])

@mito_callback(
    Output('output', 'children'),
    Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'),
)
def update_output(spreadsheet_result):
    return html.Div([
        html.H3('Spreadsheet Result'),
        html.Code(f'Code: {spreadsheet_result.code()}', style={'whiteSpace': 'pre-wrap'}),
        html.Div(f'Selection: {spreadsheet_result.selection()}'),
        html.Div(f'Dataframes: {spreadsheet_result.dfs()}')
    ])

if __name__ == '__main__':
    app.run_server(debug=True)

How is @mito_callback different?

  1. Only two valid props you can subscribe to for the Mito component are:

    1. spreadsheet_result: returns the SpreadsheetResult class defined below.

    2. spreadsheet_selection: returns the data that is currently selected in the Mito spreadsheet.

  2. Both of these properties do not return JSON that you need to parse. Rather, they return the actual objects you want to use - resulting in a much better developer experience than having to parse various types of JSON.

The SpreadsheetResult object

The SpreadsheetResult object gives you access to:

  • dfs: The dataframes generated by the analysis

  • code: The code generated by the analysis

  • selection: The currently selected cells in the mitosheet

from typing import List
import pandas as pd
from mitosheet.mito_dash.v1 import mito_callback, SpreadsheetResult, activate_mito

@mito_callback(
    Output('output', 'children'),
    Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'),
)
def update_output(spreadsheet_result: SpreadsheetResult):

    # The code that corresponds to the 
    code: str = spreadsheet_result.code()
    
    # The current dataframes in the mitosheet
    dfs: List[pd.DataFrame] = spreadsheet_result.dfs()
    
    # The currently selected data in the Mito sheet
    selection: Optional[Union[pd.DataFrame, pd.Series]] = spreadsheet_result.selection()

Examples

Below are examples of common uses of the Mito spreadsheet component in a Dash application.

Empty Mito Spreadsheet

from mitosheet.mito_dash.v1 import Spreadsheet, activate_mito
from dash import Dash, html
import pandas as pd

app = Dash(__name__)
activate_mito(app)

app.layout = html.Div([
    html.H1('Empty Mito Spreadsheet'),
    Spreadsheet(id={'type': 'spreadsheet', 'id': 'sheet'})
])

if __name__ == '__main__':
    app.run_server(debug=True)

Display a Dataframe for Editing

from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito
from dash import Dash, html, Input, Output, State
import pandas as pd

app = Dash(__name__)
activate_mito(app)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

app.layout = html.Div([
    html.H1('Simple Dataframe Editing Example'),
    Spreadsheet(df, id={'type': 'spreadsheet', 'id': 'sheet'}),
    html.Div(id='output')
])

@mito_callback(
    Output('output', 'children'),
    Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'),
)
def update_output(spreadsheet_result):
    return html.Div([
        html.H3('Edited Dataframes'),
        html.Div(f'Dataframes: {spreadsheet_result.dfs()}')
    ])

if __name__ == '__main__':
    app.run_server(debug=True)

Display a CSV file for Editing

from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito
from dash import Dash, html, Input, Output, State
import pandas as pd

app = Dash(__name__)
activate_mito(app)

app.layout = html.Div([
    html.H1('Simple CSV Editing Example'),
    Spreadsheet('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv', id={'type': 'spreadsheet', 'id': 'sheet'}),
    html.Div(id='output')
])

@mito_callback(
    Output('output', 'children'),
    Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'),
)
def update_output(spreadsheet_result):
    return html.Div([
        html.H3('Edited Dataframes'),
        html.Div(f'Dataframes: {spreadsheet_result.dfs()}')
    ])

if __name__ == '__main__':
    app.run_server(debug=True)

Displaying Mito generated code

from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito
from dash import Dash, html, Input, Output, State
import pandas as pd

app = Dash(__name__)
activate_mito(app)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

app.layout = html.Div([
    html.H1('Simple Dataframe Editing Example'),
    Spreadsheet(df, id={'type': 'spreadsheet', 'id': 'sheet'}),
    html.Div(id='output')
])

@mito_callback(
    Output('output', 'children'),
    Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'),
)
def update_output(spreadsheet_result):
    return html.Div([
        html.H3('Mito Generated Code'),
        html.Code(spreadsheet_result.code(), style={'whiteSpace': 'pre-wrap'}),
    ])

if __name__ == '__main__':
    app.run_server(debug=True)

PreviousMito vs. Other Dash ComponentsNextUnderstanding import_folder

Last updated 1 year ago

Was this helpful?

A file path to a folder where users can import data from. Any subfolders will be available for navigation and importing within the Mito file browser.

Pass functions that are available as spreadsheet functions in the Mito spreadsheet. (Mito Enterprise)

Pass custom data importers that get an auto-generated UI. (Mito Enterprise)

Pass Python functions that edit a dataframe to get an auto-generated Ui. (Mito Enterprise)

Pass a CodeOptions object to specify how the code should be generated. (Mito Enterprise)

Like any other Dash component, the Spreadsheet component allows you to make your Dash app interactive by registering . However, to give you a better callback experience, Mito works slighly differently than default dash callbacks.

analysis: A RunnableAnalysis object to help rerun the analysis on new data. To learn more, see the .

Union[pd.DataFrame, str, None]
{
    type: "spreadsheet",
    id: str
}
Optional[str]
Optional[List[str]]
Optional[List[Callable]]
Optional[List[Callable]]
Optional[List[Callable]]
Optional[CodeOptions]
Optional[bool]
callback functions
RunnableAnalysis documentation
See more here.
See more here.
See more here.
See more here.
See more here.