IAZ Dashboard vs GridStack.js

// Initialize
const grid = new IAZDashboard('#el', {
  columns: 12,
  rowHeight: 60
});

// Add widget
grid.addWidget({
  id: 1,
  x: 0, y: 0,
  w: 4, h: 2,
  content: 'Hello'
});

// Events
grid.on('widget:move', (w) => {});

// Edit mode
grid.setDraggable(false);
grid.setResizable(false);

// Initialize
const grid = GridStack.init({
  column: 12,
  cellHeight: 60
});

// Add widget
grid.addWidget({
  id: 1,
  x: 0, y: 0,
  w: 4, h: 2,
  content: 'Hello'
});

// Events
grid.on('change', (e, items) => {});

// Edit mode
grid.enableMove(false);
grid.enableResize(false);

grid.addWidget({
  id: 'parent',
  x: 0, y: 0, w: 8, h: 6,
  subGrid: {
    columns: 4,
    rowHeight: 40,
    widgets: [
      { id: 'child', x: 0, y: 0, w: 2, h: 2 }
    ]
  }
});

// Access sub-grid
const nested = grid.getSubGrid('parent');

grid.addWidget({
  x: 0, y: 0, w: 8, h: 6,
  subGridOpts: {
    column: 4,
    cellHeight: 40,
    children: [
      { x: 0, y: 0, w: 2, h: 2 }
    ]
  }
});

// Access via DOM traversal
const nested = el.gridstack;