gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

by Alain Dumesny

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<br />
<button onclick='collapse()'>Collapse 1</button>
<br />
<br />
<div class="grid-stack"></div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

TypeScript

const initialItems = [
    {id: '1', x: 0, y: 0, w: 12, content: '1'},
    {id: '2', x: 0, y: 1, w: 12, content: '2'},
    {id: '3', x: 0, y: 2, w: 12, content: '3'},
    {id: '4', x: 0, y: 3, w: 12, content: '4'},
	];
  
const options = {
  disableOneColumnMode: true,
  float: false, 
  children: initialItems
};

const grid = GridStack.init(options);

let isCollapsed = false;

const collapse = () => {
	grid.update(grid.engine.nodes[0].el, {h: isCollapsed ? 1 : 5});
  /* grid.load(grid.engine.nodes.map((node, index) => {
    if (index === 0) return {...node, h: isCollapsed ? 1 : 5}
    return node;
  }));  */
  isCollapsed = !isCollapsed
}