Draggable Toolbox grid based on react grid
Project description
Dash Drag Grid
Dash Drag Grid is a Dash component library.
A draggable grid based on react-grid-layout and based on the dash_draggable package https://github.com/MehdiChelh/dash-draggable by Mehdi. It extends the initial effort and includes a toolbox to move unneeded children to.
This allows a dynamic dash application with only presenting what's needed.
Installation
The package will be available on PyPI in the future, but for now, you can install it directly from the repo via:
pip install git+https://github.com/Simon-U/dash_drag_grid.git
Get started
You can test examples locally after installation with the usage.py
The package offers two ways to display the draggable grid:
- Standard responsive grid as in the inital package
- A grid with added toolbox
Standard responsive grid
To use the standard grid without toolbox, you can import from dash_drag_grid import ResponsiveGridLayout, DashboardItemResponsive
The ResponsiveGridLayout is the grid which has the draggable children.
ResponsiveGridLayout(
children=[],
)
You can use your components as children, which the grid will nest in a DashboardItemResponsive or you define the DashboardItemResponsive yourself, which provides you more control over the size and initial placement.
Toolbox grid
from dash_drag_grid import ToolBoxGrid, DashboardItemResponsive
The initial setup is the same. Except now, you can also specify whether DashboardItemResponsive should be initial in the toolbox or not.
Documentation
DashboardItemResponsive
- id: The ID used to identify this component in Dash callbacks.
- children: The child or list of children wrapped by the component
- x: The position on the x axis in number of columns (by default, the max is 12).
- y: he position on the y axis (the unit is 30px, by default)
- w: The width of the x axis (default is 6).
- h: The height on the of y axis (default is 4)
- static: If true, equal to
isDraggable: false, isResizable: false
. Default is false - isDraggable: If false, will not be draggable. Overrides
static
. - isResizable: If false, will not be resizable. Overrides
static
. - inToolbox: Is the Item in the toolbox. Default is false and set by the grid. Overwrites the grid default value
- defaultName: The name which will be displayed if the Item is in the toolbox. If non provided, then default is the ID
- toolboxContent: Array of content to display when item is toolbox. It could be an Icon with dash Iconify or text. Overwrides defaultName.
ResponsiveGridLayout:
The documentation of https://dash-draggable.readthedocs.io/en/latest/ with for the ResponsiveGridLayout is still the same. This will be integrated in the future.
ToolBoxGrid:
The parameters provided are the same as for the ResponsiveGridLayout there is one addition:
- defaultInToolbox: The value sets if children, which do not have inToolbox defined, should be in the Toolbox by default.
ToDo and future features
- Extent documentation and examples
- Separate Toolbox and grid to allow separate placement in the DOM
Contributing
See CONTRIBUTING.md
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for dash_drag_grid-0.9.4.dev0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 904ecc5fe1b0ddab185aca8de12042c9acbc0d397d468a71269b34ec27436f85 |
|
MD5 | 50e161872e291203cd746c86203b53d8 |
|
BLAKE2b-256 | d5e917294b2089b4b3cf80871a7476baf2d1d8f67a5bb4cbeaddf967988a530f |
Hashes for dash_drag_grid-0.9.4.dev0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 8e11b40ab94c277465a3073e39f86bf0148c8d1e2e478023b3762bce492c4adf |
|
MD5 | bf1c9ed5e829fc0ac823c629c57106be |
|
BLAKE2b-256 | 05ff41effa8d17e20ff0105c9a379443fa8d3e6dedfd2ff602a5fc7b09d14bbb |