GridStack Extension for Wappler

This GridStack extension integrates a responsive and interactive grid layout system within Wappler. It enables dynamic, draggable, and resizable grid items, making it easy to build customizable dashboards and interfaces.

> Note: This extension is not ready for production and is exposed for other Wapplers to review and suggest improvements.

Installation

$3

Follow this guide to copy the necessary files to your Wappler project's extensions folder.

$3

You can add the custom GridStack component to your Wappler project by following these steps:

1. Include the GridStack Component:

In Wappler's App Structure panel, add the GridStack component to your page:

``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

Add Chart Widget

`

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']"
>

``

License

MIT License. Please feel free to use and modify this component as needed.