//
A responsive, drag-and-drop dashboard grid layout canvas with collision prevention, auto-compaction, and resizable tiles.
bun add xiod-ui1import {2 DashboardGrid,3 DashboardTile,4 DashboardTileControls,5 DashboardTileHandle,6 DashboardTileHeader,7 DashboardTileResizeHandle,8 DashboardTileTitle9} from "xiod-ui/dashboard-grid";1<DashboardGrid>2 <DashboardTileHeader />3 <DashboardTileTitle />4 <DashboardTile />5 <DashboardTileControls />6 <DashboardTileHandle />7 <DashboardTileResizeHandle />8</DashboardGrid>| Prop | Type | Default | Description |
|---|---|---|---|
layoutReq | DashboardTileData[] | - | |
cols | number| BreakpointCols| undefined | 12 | |
breakpoints | Breakpoints| undefined | {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0,
} | |
rowHeight | number| undefined | 60 | |
margin | [number, number]| undefined | [12, 12] | |
containerPadding | [number, number]| undefined | [12, 12] | |
compactType | CompactType| undefined | vertical | |
preventCollision | boolean| undefined | false | |
isDraggable | boolean| undefined | true | |
isResizable | boolean| undefined | true | |
showGridLines | boolean| undefined | false | |
onLayoutChange | ((layout: DashboardTileData[]) => void)| undefined | - | |
onTileRemove | ((id: string) => void)| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
variant | "default"| "canvas"| "ghost"| "bordered"| null| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
idReq | string | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
variant | "default"| "expressive"| "flat"| null| undefined | default | |
isDragging | boolean| null| undefined | - | |
isResizing | boolean| null| undefined | - | |
isStatic | boolean| null| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |