Brickslab.Tools

@brickslab./ui-webAnalytics

Responsive CSS grid layout for widgets with optional drag-and-drop reorder in edit mode.

3-column grid

Completion rate

74%

↑ 12%

NPS score

↓ 3%

Responses

1,284

↑ 18%

SurveyFunnel widget

DistributionChart widget

Editable (drag to reorder)

Completion rate

74%

↑ 12%

NPS score

↓ 3%

Responses

1,284

↑ 18%

SurveyFunnel widget

DistributionChart widget

Props

Prop	Type	Défaut	Requis	Description
`items`	`WidgetLayout[]`	—	✓	Array of { id, component, colSpan?, rowSpan? }.
`onLayoutChange`	`(layout: WidgetLayout[]) => void`	—	—	Called with reordered items when drag completes.
`cols`	`number`	`3`	—	Number of grid columns.
`rowHeight`	`number`	—	—	Fixed row height in pixels. Auto by default.
`gap`	`number`	`16`	—	Gap between cells in pixels.
`editable`	`boolean`	`false`	—	Shows drag handles for reordering.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  items={[]}
  onLayoutChange={[]}
  cols={3}
  rowHeight={0}
  gap={16}
  editable={false}
/>

itemsonLayoutChangecolsrowHeightgapeditable

Usage

tsx

import { DashboardGrid } from "@brickslab./ui-web";

<DashboardGrid
  items={[
    { id: "kpi", component: <KPITrendWidget title="NPS" value={42} /> },
    { id: "chart", colSpan: 2, component: <DistributionChart data={[...]} /> },
  ]}
  cols={3}
  gap={16}
  editable
  onLayoutChange={setItems}
/>