Widgets

DashboardGrid

A tile grid with dragging and resizing.

A tile grid with dragging and resizing — a small grid-layout. Tiles live in an integer column grid; move one and it pushes its neighbours aside, free up space and everything settles upwards.

Installation

terminal

npx @toimetdev/pathlogs-ui add dashboard-grid

Example

Тащите плитки и тяните за нижний правый угол — соседи расступаются, сетка оседает.

Drag the tiles and pull the bottom-right corner — neighbours step aside and the grid settles.

Props

Prop	Type	Default	Description
`items`*	`GridItem[]`	—	The tiles: id, x, y, w, h, static?.
`onItemsChange`*	`(items) => void`	—	The new layout after a gesture.
`children`*	`(item) => ReactNode`	—	A tile's contents, by its id.
`columns`	`number`	`12`	The number of columns.
`rowHeight`	`number`	`80`	The row height (px).
`gap`	`number`	`12`	The gap between tiles (px).
`resizable`	`boolean`	`true`	Allow resizing by the bottom-right corner.

items*GridItem[]

The tiles: id, x, y, w, h, static?.

onItemsChange*(items) => void

The new layout after a gesture.

children*(item) => ReactNode

A tile's contents, by its id.

columnsnumber

defaults to: 12

The number of columns.

rowHeightnumber

defaults to: 80

The row height (px).

gapnumber

defaults to: 12

The gap between tiles (px).

resizableboolean

defaults to: true

Allow resizing by the bottom-right corner.

Pushing and compacting

The packing, separately

tsx

import {
  moveItem,      // move, pushing and compacting
  resizeItem,    // resize
  compact,       // settle everything upwards
  findFreeSpot,  // the first free spot for a new tile
} from "@/components/ui/dashboard-grid/gridLayout";