DashboardGrid

Drag-and-resize grid layout for dashboard widgets.

Preview

Usage

import { DashboardGrid } from '@ramtt/ui'

<DashboardGrid layout={layout} onLayoutChange={setLayout}>
  <DashboardGrid.Item id="1" x={0} y={0} w={6} h={3}>Widget 1</DashboardGrid.Item>
  <DashboardGrid.Item id="2" x={6} y={0} w={6} h={3}>Widget 2</DashboardGrid.Item>
</DashboardGrid>

Props

Prop	Type	Default	Description
layout*	`GridLayout[]`	—	Grid layout data
onLayoutChange*	`(layout: GridLayout[]) => void`	—	Layout change handler
columns	`number`	12	Grid columns
rowHeight	`number`	80	Row height in pixels
gap	`number`	16	Gap between items