MetricCardGrid
A CSS grid layout with @dnd-kit drag-and-drop reordering. Renders metric cards in a paginated grid with sortable slots, delegating card rendering to a renderCard render prop.
Drag & Drop Grid
Grab any card and drag to reorder. The grid uses @dnd-kit with pointer and keyboard sensors, constrained within the grid container.
Layout Presets
The grid's column count, row height, gap, and max rows are controlled via the layout prop. Toggle between presets to see how the grid adapts.
Columns: 6Row Height: 120pxGap: 15pxMax Rows: 3Pages: 1
Empty Slot Rendering
When fewer cards exist than available slots, the renderEmptySlot callback renders placeholders for remaining positions.
Usage
import { MetricCardGrid, MetricCard } from '@so.boss/gloss-ui';
import type { GridCardData, GridLayout } from '@so.boss/gloss-ui';
const layout: GridLayout = {
columns: 6,
rowHeight: 120,
gap: 15,
maxRows: 3,
currentPage: 0,
totalPages: 1,
};
<MetricCardGrid
cards={dashboardCards}
cardOrder={cardOrder}
layout={layout}
onReorder={(newOrder) => setCardOrder(newOrder)}
onPageChange={(page) => setCurrentPage(page)}
renderCard={(card) => <MetricCard {...card.props} />}
renderEmptySlot={(index) => <EmptyCardPlaceholder />}
/>