C&C Docs
Log in

cnc-grid-stack

A dashboard grid whose tiles the user can drag and resize, wrapping GridStack. Tiles come from slotted markup or from a contents array — and the widget reports NOTHING about what the user rearranges.

Quick start

Slot elements carrying class="grid-stack-item" and GridStack's own gs-* attributes. The library is fetched from a CDN at mount, so the grid is inert markup until that resolves.

Panel A
Panel B
Panel C 
<cnc-grid-stack>
  <div class="grid-stack-item" gs-w="4" gs-h="2">
    <div class="grid-stack-item-content">Panel A</div>
  </div>
</cnc-grid-stack>

Rearrangement cannot be saved

The widget subscribes to GridStack's added, change and removed events internally — and emits nothing of its own. There is no change event on the element and no property that reflects the current layout, so a host cannot learn where the user put anything.

A dashboard whose arrangement should survive a reload therefore needs its own route in: keep a reference to the element, reach for the GridStack instance, and read the layout out yourself. Treat the drag-and-resize here as a session-only convenience unless you do.

Usage guidance

Use it where rearranging is a CONVENIENCE, not a setting. Nothing is reported and nothing persists, so a user who carefully arranges a dashboard loses it on the next load — which reads as a bug even though the widget never promised otherwise.

Set options deliberately. GridStack defaults to twelve columns and floating disabled, and its column, cellHeight and float settings are the ones that decide whether a layout feels right; they are upstream options, documented upstream.

For a static dashboard grid, ordinary CSS grid is simpler and renders server-side. This widget earns the CDN dependency and the blank first paint only when the user genuinely moves tiles around.

← Back to Widgets