dees-dashboardgrid
<dees-dashboardgrid> renders a configurable dashboard layout with draggable and resizable tiles. The component is now grouped in its own folder alongside supporting utilities and styles.
Key Features
- Pointer-driven drag and resize interactions with keyboard fallbacks (arrow keys to move,
Shift + arrows to resize).
- Collision-aware placement that swaps compatible tiles or displaces blocking tiles into the next free slot.
- Context menu (right-click on a tile header) that exposes destructive actions such as tile removal via
dees-contextmenu.
- Layout persistence helpers via
getLayout(), setLayout(...), and the layout-change event.
- Responsive presets through the
layouts map and applyBreakpointLayout(...) helper to hydrate per-breakpoint arrangements.
Public API Highlights
| Property |
Description |
widgets |
Array of tile descriptors (DashboardWidget). |
columns |
Number of grid columns. |
layouts |
Optional record of named layout definitions. |
activeBreakpoint |
Name of the currently applied breakpoint layout. |
editable |
Toggles drag/resize affordances. |
| Method |
Description |
addWidget(widget, autoPosition?) |
Adds a tile, optionally auto-placing it into the next free slot. |
removeWidget(id) |
Removes a tile and emits widget-remove. |
applyBreakpointLayout(name) |
Applies a layout from the layouts map. |
getLayout() / setLayout(layout) |
Retrieve or apply persisted layouts. |
compact(direction?) |
Densifies the grid vertically (default) or horizontally. |
| Event |
Detail payload |
widget-move |
{ widget, displaced, swappedWith } |
widget-resize |
{ widget, displaced, swappedWith } |
widget-remove |
{ widget } |
layout-change |
{ layout } |
Usage Notes
- Right-click a tile header to open the contextual menu and delete the tile.
- When resizing, blocking tiles will automatically reflow into free space once the interaction completes.
- Listen to
layout-change to persist layouts to storage; rehydrate using setLayout or the layouts map.
- For responsive dashboards, populate
grid.layouts = { base: [...], mobile: [...] } and call applyBreakpointLayout based on your own breakpoint logic (see the co-located demo for an example).
Demo
The updated dees-dashboardgrid.demo.ts showcases live breakpoint switching, layout persistence, and the context menu. Run the demo gallery to explore the interactions end-to-end.
