@brightyard/wappler-gridstack

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:

• 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

• Responsive Layouts

  Define column configurations for different screen sizes. The component dynamically adjusts based on the window size.

• Draggable and Resizable Items

  Items within the grid are fully draggable and resizable, allowing users to customize layouts.

• 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.