Skip to main content

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:

  1. Standard responsive grid as in the inital package
  2. 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


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash_drag_grid-0.9.4.dev0.tar.gz (198.1 kB view details)

Uploaded Source

Built Distribution

dash_drag_grid-0.9.4.dev0-py3-none-any.whl (204.0 kB view details)

Uploaded Python 3

File details

Details for the file dash_drag_grid-0.9.4.dev0.tar.gz.

File metadata

  • Download URL: dash_drag_grid-0.9.4.dev0.tar.gz
  • Upload date:
  • Size: 198.1 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.0.0 CPython/3.9.19

File hashes

Hashes for dash_drag_grid-0.9.4.dev0.tar.gz
Algorithm Hash digest
SHA256 904ecc5fe1b0ddab185aca8de12042c9acbc0d397d468a71269b34ec27436f85
MD5 50e161872e291203cd746c86203b53d8
BLAKE2b-256 d5e917294b2089b4b3cf80871a7476baf2d1d8f67a5bb4cbeaddf967988a530f

See more details on using hashes here.

File details

Details for the file dash_drag_grid-0.9.4.dev0-py3-none-any.whl.

File metadata

File hashes

Hashes for dash_drag_grid-0.9.4.dev0-py3-none-any.whl
Algorithm Hash digest
SHA256 8e11b40ab94c277465a3073e39f86bf0148c8d1e2e478023b3762bce492c4adf
MD5 bf1c9ed5e829fc0ac823c629c57106be
BLAKE2b-256 05ff41effa8d17e20ff0105c9a379443fa8d3e6dedfd2ff602a5fc7b09d14bbb

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page