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

1. Install the Package

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

2. Add the Component to Wappler

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:

   <dmx-gridstack id="dashboardGrid" columns="12" cell-height="100" margin="10"></dmx-gridstack>

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.

   <button dmx-on:click="dashboardGrid.addWidgetWithChart({ w: 4, h: 2, content: '<canvas></canvas>', chartConfig: chartConfigVar })">
     Add Chart Widget
   </button>

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

<dmx-gridstack id="dashboardGrid" columns="12" cell-height="100" margin="10">
  <div class="grid-stack-item" id="widget1" gs-w="4" gs-h="2" gs-x="0" gs-y="0">
    <div class="grid-stack-item-content">
      <dmx-chartjs
        id="chart1"
        type="bar"
        dmx-bind:data="serverConnect1.data.chartData"
        dmx-bind:labels="['January', 'February', 'March']"
      ></dmx-chartjs>
    </div>
  </div>
</dmx-gridstack>

License

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