Gridstack
npm install @brightyard/wappler-gridstack
extensions folder.
html
`
Features
1. Responsive Layouts
Define column configurations for different screen sizes. The component dynamically adjusts based on the window size.
2. Draggable and Resizable Items
Items within the grid are fully draggable and resizable, allowing users to customize layouts.
3. Dynamic Widget Management
Add or remove grid items dynamically using Wappler's dynamic events.
`html
`
Configuration Options
| Property | Description | Default Value |
|-----------------|--------------------------------------------------|---------------|
| columns | Number of columns in the grid | 12 |
| cell-height | Height of each cell in pixels or 'auto' | 100px |
| margin | Margin between grid items | 10px |
| animate | Enables smooth animations when resizing/moving | true |
| staticGrid | Makes the grid static, disabling drag and resize | false |
Example Usage
`html
id="chart1"
type="bar"
dmx-bind:data="serverConnect1.data.chartData"
dmx-bind:labels="['January', 'February', 'March']"
>
``