Dashboard Grid
A drag-and-drop, resizable widget layout component for composing dashboards. Built on CSS Grid with responsive breakpoints, state persistence, and keyboard support.
Default
A static dashboard with KPI cards and content widgets. Set
Editable="false" to disable drag and resize.Edit Mode
Toggle
Editable to control whether widgets can be dragged and resized. Hover over widgets to reveal drag handles in the header and resize handles on corners and edges. Use OnRemove to show a remove button on hover.Custom Widget Content
Widgets support
Header, ChildContent, and Footer render fragments. Use BbDashboardWidgetHeader for custom headers with icons and badges.Constrained & Static
Control resize limits with
MinColumnSpan, MaxColumnSpan, MinRowSpan, and MaxRowSpan. Set Static="true" to lock a widget in place, or Draggable="false" to allow resize only.Loading State
Set
Loading on the grid for a full skeleton, or on individual widgets for per-widget loading states.Empty State
When no widgets exist, the grid shows
EmptyContent or a default empty message. Use OnAddWidget to show an "Add Widget" button.