Skip to content

v2.3.0 - Dashboards the user arranges — by hand, or without a mouse at all

Choose a tag to compare

@Banzamel Banzamel released this 24 Aug 14:42
· 21 commits to main since this release

Minor release, one new Pro component. Configurable dashboards are a genre: the user lays out their tiles, changes their widths, adds and drops them, and the arrangement is saved to their account. Until now there was nothing in the package to build that with — and a MineralUI app cannot reach for react-grid-layout or dnd-kit without breaking the one rule the framework is built on. MDashboardGrid closes that gap.

What's new

  • New: MDashboardGrid, a flowing widget grid. The layout is a plain list of {id, span} positions rather than a map of coordinates, and that is the whole design decision. A tile hidden by permissions simply disappears and the rest flows into its place; with x/y coordinates it would leave a hole. Rows come out of wrapping — nothing is ever packed backwards into a gap, because order is what the user arranged. MCanvasGrid is still there when you genuinely want free placement; this is its complement.
  • Two modes, and the static one is the default. With editable={false} the grid is an ordinary responsive layout — identical to MGrid / MGridItem at the same widths — and tile content stays fully interactive. Turn edit mode on and each tile grows a drag handle and a menu, and its content goes inert, so a click arranges the dashboard instead of navigating away from it.
  • The drag is drawn in dashed line: a dashed outline on the tile you are carrying, and a dashed frame the width of that tile marking where it will land, so you can see how much room it takes before you let go. A canDrop veto — the same contract MTreeView already uses — draws that frame in the error tone and fires nothing. It runs on pointer events, so it works under a finger as well as a mouse, and touch-action is scoped to the handle so the page still scrolls everywhere else.
  • Nothing here needs a mouse. The handle is focusable, the arrow keys move a tile earlier or later, Space lifts and drops it, and the tile menu carries the same operations — move earlier / later, narrower / wider — greyed out at the minSpan and maxSpan bounds. Every change is announced to a screen reader as a position and as a width. prefers-reduced-motion turns the reflow animation off.
  • Width can also be dragged. Grab the right edge of a tile and it snaps by whole columns; the menu actions remain available for anyone who would rather not drag.
  • The component is controlled and stores nothing. onReorder hands you the complete new id order — not "from index 3 to index 5" — so you can persist it verbatim. onResize and onRemove address one position. While a save is in flight, overrides holds the change on screen: the same optimistic overlay MTimelineBoard exposes as eventOverrides, so there is one pattern to learn rather than two.
  • What it deliberately is not: it does not ship an "add widget" palette (the catalogue, its names, icons and permissions belong to your app), it does not load data or know what a widget is, it does not save the layout, it does not position freely by x/y, and it does not set tile heights — height comes from content, exactly as in MGrid.