A grid of tiles the user can rearrange and resize by dragging or with the keyboard.
Breakpoints |
{
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0,
} |
The smallest grid width, in pixels, at which each breakpoint applies. Only used when |
cols | number|BreakpointCols | 12 | The number of columns: one number for every width, or an object with a count per breakpoint ( |
compactType | "horizontal"|"vertical" | vertical | Which way tiles move to fill gaps: |
containerPadding | [number, number] | [12, 12] | The space between the tiles and the edge of the grid, in pixels, as |
isDraggable | boolean | true | Whether tiles can be moved, by pointer or keyboard. |
isResizable | boolean | true | Whether tiles can be resized, by pointer or keyboard. |
labels | Partial<DashboardGridLabels> | – | Replaces the built-in text for this instance. See |
margin | [number, number] | [12, 12] | The space between tiles, in pixels, as |
onLayoutChange | ((layout: DashboardTileData[]) => void) | – | Called with the new layout after a tile is moved or resized, and only when something changed. |
onTileDragEnd | ((id: string, layout: DashboardTileData[]) => void) | – | Called with a tile's id and the final layout when a pointer drag ends, moved or not. |
onTileDragStart | ((id: string, layout: DashboardTileData[]) => void) | – | Called with a tile's id and the layout when a pointer drag starts. |
onTileRemove | ((id: string) => void) | – | Called with a tile's id when its remove button is pressed. The remove button only shows when this is set. |
onTileResizeEnd | ((id: string, layout: DashboardTileData[]) => void) | – | Called with a tile's id and the final layout when a pointer resize ends. |
onTileResizeStart | ((id: string, layout: DashboardTileData[]) => void) | – | Called with a tile's id and the layout when a pointer resize starts. |
preventCollision | boolean | false | Whether a tile can't be dropped on top of another. When |
rowHeight | number | 60 | The height of one row, in pixels. |
showGridLines | boolean | false | Whether to draw the column and row lines behind the tiles. |
variant | "canvas"|"default"|"ghost"|"bordered" | default | The visual style of the component. |
Accepts render, plus every native <div> attribute.
Accepts render, plus every native attribute of the element it renders.
Accepts render, plus every native attribute of the element it renders.
Accepts render, plus every native attribute of the element it renders.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <span> attribute.
