# 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. |
| persistence | boolean | - | Whether to persist the component's state. |
| persisted_props | array | ['itemLayout'] | List of props to persist. |
| persistence_type | string | 'local' | Type of persistence. Can be 'local', 'memory', or 'session'. |
| 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/46/3d/cb1853bea30724a221305093fadfb1805063c4269f4ad05416ea3347ae51/dash_dynamic_grid_layout-0.1.1.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| persistence | boolean | - | Whether to persist the component's state. |\n| persisted_props | array | ['itemLayout'] | List of props to persist. |\n| persistence_type | string | 'local' | Type of persistence. Can be 'local', 'memory', or 'session'. |\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.1",
"project_urls": null,
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "bf8d810c092ee582e4b079181daac9b6f30cc9eb9e2a1c2628e73a1bb9460aa5",
"md5": "66a9ed9c86d2fff83dcce8c48b8d9a3f",
"sha256": "fb4a8e1480863be04bd308be5a2537eb55e147ace3642cbee5c491556e240fbd"
},
"downloads": -1,
"filename": "dash_dynamic_grid_layout-0.1.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "66a9ed9c86d2fff83dcce8c48b8d9a3f",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 460336,
"upload_time": "2024-08-27T23:42:31",
"upload_time_iso_8601": "2024-08-27T23:42:31.044272Z",
"url": "https://files.pythonhosted.org/packages/bf/8d/810c092ee582e4b079181daac9b6f30cc9eb9e2a1c2628e73a1bb9460aa5/dash_dynamic_grid_layout-0.1.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "463dcb1853bea30724a221305093fadfb1805063c4269f4ad05416ea3347ae51",
"md5": "cfa0ad382e0f4de2ef7b00323f3ae22a",
"sha256": "e1c2715224e08316593bf1ad515c1e61e101ad7f4a2f4714f1e803a0322d64dd"
},
"downloads": -1,
"filename": "dash_dynamic_grid_layout-0.1.1.tar.gz",
"has_sig": false,
"md5_digest": "cfa0ad382e0f4de2ef7b00323f3ae22a",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 456235,
"upload_time": "2024-08-27T23:42:32",
"upload_time_iso_8601": "2024-08-27T23:42:32.803905Z",
"url": "https://files.pythonhosted.org/packages/46/3d/cb1853bea30724a221305093fadfb1805063c4269f4ad05416ea3347ae51/dash_dynamic_grid_layout-0.1.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-08-27 23:42:32",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "dash-dynamic-grid-layout"
}
JSON