CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-dash

Python web application framework for building reactive analytical web apps without JavaScript

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

component-libraries.mddocs/

Component Libraries

Dash provides three comprehensive component libraries that enable building rich interactive web applications. These libraries include interactive components (dcc), HTML elements (html), and data tables (dash_table).

Capabilities

Dash Core Components (dcc)

Interactive components for user input, data visualization, and application control.

# Graph visualization
class Graph(Component):
    def __init__(
        self,
        id: str = None,
        figure: Dict[str, Any] = None,
        config: Dict[str, Any] = None,
        responsive: Union[bool, str] = 'auto',
        clickData: Dict[str, Any] = None,
        hoverData: Dict[str, Any] = None,
        selectedData: Dict[str, Any] = None,
        **kwargs
    ): ...

# Input controls
class Dropdown(Component):
    def __init__(
        self,
        id: str = None,
        options: List[Dict[str, Any]] = None,
        value: Union[str, int, List] = None,
        multi: bool = False,
        searchable: bool = True,
        clearable: bool = True,
        placeholder: str = None,
        **kwargs
    ): ...

class Input(Component):
    def __init__(
        self,
        id: str = None,
        value: Union[str, int] = None,
        type: str = 'text',
        debounce: Union[bool, int] = False,
        placeholder: str = None,
        **kwargs
    ): ...

class Slider(Component):
    def __init__(
        self,
        id: str = None,
        min: int = 0,
        max: int = 100,
        step: int = 1,
        value: int = None,
        marks: Dict[int, Any] = None,
        tooltip: Dict[str, Any] = None,
        **kwargs
    ): ...

# Selection components
class Checklist(Component):
    def __init__(
        self,
        id: str = None,
        options: List[Dict[str, Any]] = None,
        value: List = None,
        inline: bool = False,
        **kwargs
    ): ...

class RadioItems(Component):
    def __init__(
        self,
        id: str = None,
        options: List[Dict[str, Any]] = None,
        value: Union[str, int] = None,
        inline: bool = False,
        **kwargs
    ): ...

# Date and time
class DatePickerSingle(Component):
    def __init__(
        self,
        id: str = None,
        date: str = None,
        min_date_allowed: str = None,
        max_date_allowed: str = None,
        display_format: str = 'YYYY-MM-DD',
        **kwargs
    ): ...

# Utility components
class Store(Component):
    def __init__(
        self,
        id: str = None,
        data: Any = None,
        storage_type: str = 'memory',
        clear_data: bool = False,
        **kwargs
    ): ...

class Location(Component):
    def __init__(
        self,
        id: str = None,
        pathname: str = None,
        search: str = None,
        hash: str = None,
        href: str = None,
        **kwargs
    ): ...

class Interval(Component):
    def __init__(
        self,
        id: str = None,
        interval: int = 1000,
        n_intervals: int = 0,
        max_intervals: int = -1,
        disabled: bool = False,
        **kwargs
    ): ...

Dash HTML Components (html)

Standard HTML elements as Dash components with consistent properties and event handling.

# Layout components
class Div(Component):
    def __init__(
        self,
        children: Any = None,
        id: str = None,
        className: str = None,
        style: Dict[str, Any] = None,
        n_clicks: int = None,
        **kwargs
    ): ...

class H1(Component):
    def __init__(
        self,
        children: Any = None,
        id: str = None,
        className: str = None,
        style: Dict[str, Any] = None,
        **kwargs
    ): ...

class P(Component):
    def __init__(
        self,
        children: Any = None,
        id: str = None,
        className: str = None,
        style: Dict[str, Any] = None,
        **kwargs
    ): ...

# Interactive elements
class Button(Component):
    def __init__(
        self,
        children: Any = None,
        id: str = None,
        n_clicks: int = None,
        n_clicks_timestamp: int = None,
        disabled: bool = False,
        type: str = 'button',
        **kwargs
    ): ...

class A(Component):
    def __init__(
        self,
        children: Any = None,
        id: str = None,
        href: str = None,
        target: str = None,
        n_clicks: int = None,
        **kwargs
    ): ...

# Form elements
class Form(Component):
    def __init__(
        self,
        children: Any = None,
        id: str = None,
        action: str = None,
        method: str = None,
        **kwargs
    ): ...

class Select(Component):
    def __init__(
        self,
        children: Any = None,
        id: str = None,
        value: str = None,
        multiple: bool = False,
        **kwargs
    ): ...

# Table elements
class Table(Component):
    def __init__(
        self,
        children: Any = None,
        id: str = None,
        className: str = None,
        style: Dict[str, Any] = None,
        **kwargs
    ): ...

class Tr(Component): ...
class Th(Component): ...
class Td(Component): ...

Dash DataTable

Advanced interactive data table with editing, filtering, sorting, and styling capabilities.

class DataTable(Component):
    def __init__(
        self,
        id: str = None,
        data: List[Dict[str, Any]] = None,
        columns: List[Dict[str, Any]] = None,
        editable: bool = False,
        filter_action: str = 'none',
        sort_action: str = 'none',
        page_action: str = 'native',
        page_current: int = 0,
        page_size: int = 250,
        row_selectable: Union[str, bool] = False,
        selected_rows: List[int] = None,
        active_cell: Dict[str, Any] = None,
        style_table: Dict[str, Any] = None,
        style_cell: Dict[str, Any] = None,
        style_data: Dict[str, Any] = None,
        style_header: Dict[str, Any] = None,
        style_cell_conditional: List[Dict] = None,
        style_data_conditional: List[Dict] = None,
        **kwargs
    ): ...

# Formatting utilities
class Format:
    def __init__(self, **kwargs): ...
    def align(self, value: str) -> 'Format': ...
    def precision(self, value: int) -> 'Format': ...
    def scheme(self, value: str) -> 'Format': ...

def money(decimals: int = 2, sign: str = 'default') -> Format: ...
def percentage(decimals: int = 1, rounded: bool = False) -> Format: ...

Component Base Properties

Common properties inherited by all components from the base Component class.

class Component:
    """Base component class with common properties."""
    
    def __init__(
        self,
        id: Union[str, Dict] = None,
        children: Any = None,
        className: str = None,
        style: Dict[str, Any] = None,
        n_clicks: int = None,
        n_clicks_timestamp: int = None,
        **kwargs
    ): ...

Usage Examples

Interactive Dashboard

from dash import Dash, html, dcc, callback, Input, Output
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# Sample data
df = px.data.iris()

app.layout = html.Div([
    html.H1("Interactive Dashboard"),
    
    html.Div([
        html.Label("Select Species:"),
        dcc.Dropdown(
            id='species-dropdown',
            options=[{'label': species, 'value': species} 
                    for species in df.species.unique()],
            value=df.species.unique()[0]
        )
    ], style={'width': '48%', 'display': 'inline-block'}),
    
    html.Div([
        html.Label("Select Feature:"),
        dcc.RadioItems(
            id='feature-radio',
            options=[
                {'label': 'Sepal Length', 'value': 'sepal_length'},
                {'label': 'Petal Length', 'value': 'petal_length'}
            ],
            value='sepal_length'
        )
    ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
    
    dcc.Graph(id='scatter-plot'),
    
    html.Div(id='summary-stats')
])

@callback(
    [Output('scatter-plot', 'figure'),
     Output('summary-stats', 'children')],
    [Input('species-dropdown', 'value'),
     Input('feature-radio', 'value')]
)
def update_dashboard(selected_species, selected_feature):
    filtered_df = df[df.species == selected_species]
    
    fig = px.scatter(filtered_df, x=selected_feature, y='sepal_width',
                     title=f'{selected_feature} vs Sepal Width for {selected_species}')
    
    stats = html.Div([
        html.H3("Summary Statistics"),
        html.P(f"Mean {selected_feature}: {filtered_df[selected_feature].mean():.2f}"),
        html.P(f"Count: {len(filtered_df)}")
    ])
    
    return fig, stats

Data Table with Filtering

from dash import dash_table
import pandas as pd

df = pd.read_csv('data.csv')

app.layout = html.Div([
    html.H1("Data Explorer"),
    
    dash_table.DataTable(
        id='data-table',
        data=df.to_dict('records'),
        columns=[
            {"name": col, "id": col, "type": "numeric" if df[col].dtype in ['int64', 'float64'] else "text"}
            for col in df.columns
        ],
        editable=True,
        filter_action="native",
        sort_action="native",
        page_action="native",
        page_current=0,
        page_size=10,
        style_cell={'textAlign': 'left'},
        style_data_conditional=[
            {
                'if': {'row_index': 'odd'},
                'backgroundColor': 'rgb(248, 248, 248)'
            }
        ]
    )
])

Form with Validation

app.layout = html.Div([
    html.Form([
        html.Div([
            html.Label("Name:", htmlFor="name-input"),
            dcc.Input(id="name-input", type="text", required=True)
        ]),
        
        html.Div([
            html.Label("Email:", htmlFor="email-input"),  
            dcc.Input(id="email-input", type="email", required=True)
        ]),
        
        html.Div([
            html.Label("Age:", htmlFor="age-input"),
            dcc.Input(id="age-input", type="number", min=0, max=120)
        ]),
        
        html.Button("Submit", type="submit", id="submit-button")
    ], id="user-form"),
    
    html.Div(id="form-output")
])

@callback(
    Output('form-output', 'children'),
    [Input('submit-button', 'n_clicks')],
    [State('name-input', 'value'),
     State('email-input', 'value'),
     State('age-input', 'value')]
)
def handle_form_submission(n_clicks, name, email, age):
    if n_clicks:
        return html.Div([
            html.H3("Form Submitted"),
            html.P(f"Name: {name}"),
            html.P(f"Email: {email}"),
            html.P(f"Age: {age}")
        ])
    return "Fill out the form and click submit"

Types

# Core component types
Component = Any
ComponentType = Union[Component, str, int, float, List, Dict]
ChildrenType = Union[ComponentType, List[ComponentType]]

# Component properties
ComponentId = Union[str, Dict[str, Any]]
StyleDict = Dict[str, Any]
OptionsList = List[Dict[str, Any]]

# DataTable specific types
TableData = List[Dict[str, Any]]
ColumnConfig = Dict[str, Any]
CellCoordinates = Dict[str, Union[int, str]]
StyleConditional = List[Dict[str, Any]]

# Event types
ClickEvent = Dict[str, Any]
HoverEvent = Dict[str, Any]
SelectionEvent = Dict[str, Any]

Install with Tessl CLI

npx tessl i tessl/pypi-dash

docs

asset-management.md

background-callbacks.md

callback-system.md

component-libraries.md

core-application.md

index.md

multi-page-apps.md

special-values.md

tile.json