Dashboard grids

Let users arrange application-owned widgets and retain their preferred layout.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

<div x-data="uiDashboard(widgets, 'workspace-grid')">
  <template x-for="widget in visibleWidgets" :key="widget.id">
    <article class="card">
      <h2 x-text="$t(widget.label)"></h2>
      <button @click="move(widget.id, -1)">Move earlier</button>
      <button @click="move(widget.id, 1)">Move later</button>
    </article>
  </template>
</div>

Settings and behavior

• The outer page supplies widgets with stable id, label, and size fields.
• Use a unique preference key per dashboard.
• Sizes are s, m, l, and xl. CSS maps them to grid spans.
• visibleWidgets, layout, editing, and dragged expose layout state.
• move, hide, dragStart, drop, save, and resetLayout control layout.
• At least one widget remains visible.
• Keyboard move controls should accompany drag-and-drop.

Integration notes

The minimal example shows ownership and ordering. Copy the complete draggable example for drag events, data-size, and dashboard-grid markup. Never store credentials or resource contents in layout preferences.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921