# 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 <img src="assets/bsdev.jpeg" alt="BSDev" style="border-radius: 100%; width: 30px; height: 30px;"> [BSd3v](https://github.com/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
```bash
pip install dash-dynamic-grid-layout
```
### Usage
Here's a basic example of how to use the DashGridLayout component:
```python
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:
| Property | Type | Default | Description |
|-------------------|---------|-----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| id | string | - | The ID used to identify this component in Dash callbacks. |
| className | string | 'layout' | CSS class name for the grid layout. |
| rowHeight | number | 100 | The height of a single row in pixels. |
| cols | object | {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2} | An object containing breakpoints and column numbers. |
| style | object | - | Inline styles for the grid layout. |
| itemCount | number | - | The number of items in the grid. |
| itemToRemove | any | '' | The item in the grid that should be removed when triggered. |
| compactType | string | 'vertical' | Compaction type. Can be 'vertical', 'horizontal', or null. |
| showRemoveButton | boolean | true | Whether to show remove buttons for grid items. |
| showResizeHandles | boolean | true | Whether to show resize handles for grid items. |
| items | array | [] | List of items to be rendered in the grid. |
| itemLayout | array | [] | Layout configuration for each item. Each item should be an object with shape {i: string, x: number, y: number, w: number, h: number}. |
| currentLayout | array | [] | The current layout of the grid items. Each item should be an object with shape {i: string, x: number, y: number, w: number, h: number}. |
| breakpoints | object | {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0} | Breakpoints for responsive layout. |
| breakpointData | object | - | Data about the current breakpoint and columns. Shape: {newBreakpoint: string, newCols: number}. |
## Callbacks
| Property | Description |
|----------|-----------------------------------------|
| setProps | Callback function to update Dash props. |
### DraggableWrapper
DraggableWrapper is a component that wraps other components and makes them draggable. These are the properties available for the DraggableWrapper component:
| Property | Type | Default | Description |
|------------------|--------|-----------------|----------------------------------------------|
| children | node | - | The content to be wrapped and made draggable |
| handleBackground | string | "rgb(85,85,85)" | Background color of the drag handle |
| handleColor | string | "white" | Text color of the drag handle |
| handleText | string | "Drag here" | Text to display in the drag handle |
### Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
### License
This project is licensed under the MIT License.
Raw data
{
"_id": null,
"home_page": null,
"name": "dash-dynamic-grid-layout",
"maintainer": null,
"docs_url": null,
"requires_python": null,
"maintainer_email": null,
"keywords": null,
"author": "pipinstallpython <pipinstallpython@gmail.com>",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/b0/66/ce27cc595682696f5f80cea7d8c5688e9ed8ea608c147ab50fec5e069d09/dash_dynamic_grid_layout-0.1.2.tar.gz",
"platform": null,
"description": "# Dash Dynamic Grid Layout\n\nDash Dynamic Grid Layout is a Dash component library that provides a flexible grid layout system for arranging and moving components within a Dash application.\n\n\n\nSpecial thanks to <img src=\"assets/bsdev.jpeg\" alt=\"BSDev\" style=\"border-radius: 100%; width: 30px; height: 30px;\"> [BSd3v](https://github.com/BSd3v) for contributing the improvements and bug fixes making this a much more polished project.\n## Features\n\n- Drag-and-drop functionality for rearranging components\n- Resizable grid items\n- Customizable layout with responsive breakpoints\n- Option to add or remove items dynamically\n- Customizable drag handles for each item\n- Persistence of component state\n- Local, memory, or session storage for persistence\n\n\n### Installation\n\n```bash\npip install dash-dynamic-grid-layout\n```\n\n### Usage\nHere's a basic example of how to use the DashGridLayout component:\n\n```python\nimport dash_dynamic_grid_layout as dgl\nfrom dash import Dash, html, dcc\nimport plotly.express as px\n\napp = Dash(__name__)\n\ndf = px.data.iris()\n\napp.layout = html.Div([\n dgl.DashGridLayout(\n id='grid-layout',\n children=[\n dgl.DraggableWrapper(\n children=[\n html.Div('Drag me!', style={'height': '100%', 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'center', 'border': '1px solid #ddd', 'borderRadius': '5px'})\n ],\n handleText='Move'\n ),\n dgl.DraggableWrapper(\n children=[\n dcc.Graph(\n figure=px.scatter(df, x=\"sepal_width\", y=\"sepal_length\", color=\"species\"),\n style={'height': '100%'}\n )\n ],\n handleText='Move Graph'\n )\n ],\n rowHeight=150,\n cols={'lg': 12, 'md': 10, 'sm': 6, 'xs': 4, 'xxs': 2},\n style={'height': '600px'},\n )\n])\n\nif __name__ == '__main__':\n app.run_server(debug=True)\n```\n\n## Prop Reference\n\n### DashGridLayout\n\nDashGridLayout is a flexible grid layout system for arranging and moving components within a Dash application. These are the properties available for the DashGridLayout component:\n\n| Property | Type | Default | Description |\n|-------------------|---------|-----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|\n| id | string | - | The ID used to identify this component in Dash callbacks. |\n| className | string | 'layout' | CSS class name for the grid layout. |\n| rowHeight | number | 100 | The height of a single row in pixels. |\n| cols | object | {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2} | An object containing breakpoints and column numbers. |\n| style | object | - | Inline styles for the grid layout. |\n| itemCount | number | - | The number of items in the grid. |\n| itemToRemove | any | '' | The item in the grid that should be removed when triggered. |\n| compactType | string | 'vertical' | Compaction type. Can be 'vertical', 'horizontal', or null. |\n| showRemoveButton | boolean | true | Whether to show remove buttons for grid items. |\n| showResizeHandles | boolean | true | Whether to show resize handles for grid items. |\n| items | array | [] | List of items to be rendered in the grid. |\n| itemLayout | array | [] | Layout configuration for each item. Each item should be an object with shape {i: string, x: number, y: number, w: number, h: number}. |\n| currentLayout | array | [] | The current layout of the grid items. Each item should be an object with shape {i: string, x: number, y: number, w: number, h: number}. |\n| breakpoints | object | {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0} | Breakpoints for responsive layout. |\n| breakpointData | object | - | Data about the current breakpoint and columns. Shape: {newBreakpoint: string, newCols: number}. |\n\n## Callbacks\n\n| Property | Description |\n|----------|-----------------------------------------|\n| setProps | Callback function to update Dash props. |\n\n### DraggableWrapper\n\nDraggableWrapper is a component that wraps other components and makes them draggable. These are the properties available for the DraggableWrapper component:\n\n| Property | Type | Default | Description |\n|------------------|--------|-----------------|----------------------------------------------|\n| children | node | - | The content to be wrapped and made draggable |\n| handleBackground | string | \"rgb(85,85,85)\" | Background color of the drag handle |\n| handleColor | string | \"white\" | Text color of the drag handle |\n| handleText | string | \"Drag here\" | Text to display in the drag handle |\n\n### Contributing\nContributions are welcome! Please feel free to submit a Pull Request.\n\n### License\nThis project is licensed under the MIT License.\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Grid layout system for moving components around.",
"version": "0.1.2",
"project_urls": null,
"split_keywords": [],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "0e1f9ac91cb1816b477cd1a50d483ad61149472319f7662331daac568a851de2",
"md5": "68b3e090993866eadebc4ba6b88a7840",
"sha256": "e39070339ebc0143c53cb676f05e90bbc5840819ba5cafb4e19c5ce9a1e7cf84"
},
"downloads": -1,
"filename": "dash_dynamic_grid_layout-0.1.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "68b3e090993866eadebc4ba6b88a7840",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 465483,
"upload_time": "2025-03-03T04:24:36",
"upload_time_iso_8601": "2025-03-03T04:24:36.741209Z",
"url": "https://files.pythonhosted.org/packages/0e/1f/9ac91cb1816b477cd1a50d483ad61149472319f7662331daac568a851de2/dash_dynamic_grid_layout-0.1.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "b066ce27cc595682696f5f80cea7d8c5688e9ed8ea608c147ab50fec5e069d09",
"md5": "11add19b999b5ad1c5856baf3d70ff1b",
"sha256": "210b5714c21dd79779d5c6ac791998cc5f688554e3fbcd38f20ed55fe90209d6"
},
"downloads": -1,
"filename": "dash_dynamic_grid_layout-0.1.2.tar.gz",
"has_sig": false,
"md5_digest": "11add19b999b5ad1c5856baf3d70ff1b",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 461315,
"upload_time": "2025-03-03T04:24:39",
"upload_time_iso_8601": "2025-03-03T04:24:39.283900Z",
"url": "https://files.pythonhosted.org/packages/b0/66/ce27cc595682696f5f80cea7d8c5688e9ed8ea608c147ab50fec5e069d09/dash_dynamic_grid_layout-0.1.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-03-03 04:24:39",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "dash-dynamic-grid-layout"
}
JSON