dash-drag-grid 0.9.4.dev0
Draggable Toolbox grid based on react grid
License: MIT

# 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](./CONTRIBUTING.md)