Dash Dynamic Grid Layout

Dash Dynamic Grid Layout is a Dash component library that provides a flexible grid layout system for arranging and moving components within a Dash application.

Special thanks to BSd3v for contributing the improvements and bug fixes making this a much more polished project.

Features

• Drag-and-drop functionality for rearranging components
• Resizable grid items
• Customizable layout with responsive breakpoints
• Option to add or remove items dynamically
• Customizable drag handles for each item
• Persistence of component state
• Local, memory, or session storage for persistence

Installation

pip install dash-dynamic-grid-layout

Usage

Here's a basic example of how to use the DashGridLayout component:

import dash_dynamic_grid_layout as dgl
from dash import Dash, html, dcc
import plotly.express as px

app = Dash(__name__)

df = px.data.iris()

app.layout = html.Div([
    dgl.DashGridLayout(
        id='grid-layout',
        children=[
            dgl.DraggableWrapper(
                children=[
                    html.Div('Drag me!', style={'height': '100%', 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'center', 'border': '1px solid #ddd', 'borderRadius': '5px'})
                ],
                handleText='Move'
            ),
            dgl.DraggableWrapper(
                children=[
                    dcc.Graph(
                        figure=px.scatter(df, x="sepal_width", y="sepal_length", color="species"),
                        style={'height': '100%'}
                    )
                ],
                handleText='Move Graph'
            )
        ],
        rowHeight=150,
        cols={'lg': 12, 'md': 10, 'sm': 6, 'xs': 4, 'xxs': 2},
        style={'height': '600px'},
    )
])

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

Prop Reference

DashGridLayout

DashGridLayout is a flexible grid layout system for arranging and moving components within a Dash application. These are the properties available for the DashGridLayout component:

Callbacks

DraggableWrapper

DraggableWrapper is a component that wraps other components and makes them draggable. These are the properties available for the DraggableWrapper component:

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.