[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10039":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":39,"discoverSource":40},10039,"gridstack.js","gridstack\u002Fgridstack.js","gridstack","Build interactive dashboards in minutes.","https:\u002F\u002Fgridstackjs.com",null,"TypeScript",8959,1408,169,56,0,2,11,55,10,40.45,"MIT License",false,"master",true,[27,28,29,30,31,32,33,34,35],"angular","dashboard","grid","gridster","javascript","react","typescript","vue","widget","2026-06-12 02:02:16","# gridstack.js\n\n[![NPM version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fgridstack.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgridstack)\n[![Coverage Status](https:\u002F\u002Fcoveralls.io\u002Frepos\u002Fgithub\u002Fgridstack\u002Fgridstack.js\u002Fbadge.svg?branch=develop)](https:\u002F\u002Fcoveralls.io\u002Fgithub\u002Fgridstack\u002Fgridstack.js?branch=develop)\n[![downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fgridstack.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgridstack)\n\nMobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with [Angular](https:\u002F\u002Fangular.io\u002F) (included), [React](https:\u002F\u002Freactjs.org\u002F), [Vue](https:\u002F\u002Fvuejs.org\u002F), [Knockout.js](http:\u002F\u002Fknockoutjs.com), [Ember](https:\u002F\u002Fwww.emberjs.com\u002F) and others (see [frameworks](#specific-frameworks) section).\n\nInspired by no-longer maintained gridster, built with love.\n\nCheck http:\u002F\u002Fgridstackjs.com and [these demos](http:\u002F\u002Fgridstackjs.com\u002Fdemo\u002F).\n\nIf you find this lib useful, please donate [PayPal](https:\u002F\u002Fwww.paypal.me\u002Falaind831) (use **“send to a friend”** to avoid 3% fee) or [Venmo](https:\u002F\u002Fwww.venmo.com\u002Fadumesny) (adumesny) and help support it!\n\n[![Donate](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDonate-PayPal-green.svg)](https:\u002F\u002Fwww.paypal.me\u002Falaind831)\n[![Donate](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDonate-Venmo-g.svg)](https:\u002F\u002Fwww.venmo.com\u002Fadumesny)\n\nJoin us on Slack: [https:\u002F\u002Fgridstackjs.slack.com](https:\u002F\u002Fjoin.slack.com\u002Ft\u002Fgridstackjs\u002Fshared_invite\u002Fzt-3978nsff6-HDNE_N45DydP36NBSV9JFQ)\n\n\u003C!-- [![Slack Status](https:\u002F\u002Fgridstackjs.com\u002Fbadge.svg)](https:\u002F\u002Fgridstackjs.slack.com) -->\n\u003C!-- START doctoc generated TOC please keep comment here to allow auto update -->\n\u003C!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**  *generated with [DocToc](http:\u002F\u002Fdoctoc.herokuapp.com\u002F)*\n\n- [Demo and API Documentation](#demo-and-api-documentation)\n- [Usage](#usage)\n  - [Install](#install)\n  - [Include](#include)\n  - [Basic usage](#basic-usage)\n  - [Requirements](#requirements)\n  - [Specific frameworks](#specific-frameworks)\n  - [Extend Library](#extend-library)\n  - [Extend Engine](#extend-engine)\n  - [Change grid columns](#change-grid-columns)\n  - [Custom columns CSS (OLD, not needed with v12+)](#custom-columns-css-old-not-needed-with-v12)\n  - [Override resizable\u002Fdraggable options](#override-resizabledraggable-options)\n  - [Touch devices support](#touch-devices-support)\n- [Migrating](#migrating)\n  - [Migrating to v0.6](#migrating-to-v06)\n  - [Migrating to v1](#migrating-to-v1)\n  - [Migrating to v2](#migrating-to-v2)\n  - [Migrating to v3](#migrating-to-v3)\n  - [Migrating to v4](#migrating-to-v4)\n  - [Migrating to v5](#migrating-to-v5)\n  - [Migrating to v6](#migrating-to-v6)\n  - [Migrating to v7](#migrating-to-v7)\n  - [Migrating to v8](#migrating-to-v8)\n  - [Migrating to v9](#migrating-to-v9)\n  - [Migrating to v10](#migrating-to-v10)\n  - [Migrating to v11](#migrating-to-v11)\n  - [Migrating to v12](#migrating-to-v12)\n- [jQuery Application](#jquery-application)\n- [Changes](#changes)\n- [Usage Trend](#usage-trend)\n- [The Team](#the-team)\n\n\u003C!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n# Demo and API Documentation\n\nPlease visit http:\u002F\u002Fgridstackjs.com and [these demos](http:\u002F\u002Fgridstackjs.com\u002Fdemo\u002F), and complete [API documentation](https:\u002F\u002Fgridstack.github.io\u002Fgridstack.js\u002Fdoc\u002Fhtml\u002F) ([markdown](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fdoc\u002FAPI.md))\n\n# Usage\n\n## Install\n[![NPM version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fgridstack.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgridstack)\n\n```js\nyarn add gridstack\n\u002F\u002F or\nnpm install --save gridstack\n```\n\n## Include\n\nES6 or Typescript\n\n```js\nimport 'gridstack\u002Fdist\u002Fgridstack.min.css';\nimport { GridStack } from 'gridstack';\n```\n\nAlternatively (single combined file, notice the -all.js) in html\n\n```html\n\u003Clink href=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack.min.css\" rel=\"stylesheet\"\u002F>\n\u003Cscript src=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack-all.js\">\u003C\u002Fscript>\n```\n\n**Note**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future) and DROPPED again in v12 (css variable needed).\nYou can use the es5 files and polyfill (larger) for older browser instead. For example:\n```html\n\u003Clink href=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack.min.css\" rel=\"stylesheet\"\u002F>\n\u003Cscript src=\"node_modules\u002Fgridstack\u002Fdist\u002Fes5\u002Fgridstack-poly.js\">\u003C\u002Fscript>\n\u003Cscript src=\"node_modules\u002Fgridstack\u002Fdist\u002Fes5\u002Fgridstack-all.js\">\u003C\u002Fscript>\n```\n\n\n## Basic usage\n\ncreating items dynamically...\n\n```js\n\u002F\u002F ...in your HTML\n\u003Cdiv class=\"grid-stack\">\u003C\u002Fdiv>\n\n\u002F\u002F ...in your script\nvar grid = GridStack.init();\ngrid.addWidget({w: 2, content: 'item 1'});\n```\n\n... or creating from list\n\n```js\n\u002F\u002F using serialize data instead of .addWidget()\nconst serializedData = [\n  {x: 0, y: 0, w: 2, h: 2},\n  {x: 2, y: 3, w: 3, content: 'item 2'},\n  {x: 1, y: 3}\n];\n\ngrid.load(serializedData);\n```\n\n... or DOM created items\n\n```js\n\u002F\u002F ...in your HTML\n\u003Cdiv class=\"grid-stack\">\n  \u003Cdiv class=\"grid-stack-item\">\n    \u003Cdiv class=\"grid-stack-item-content\">Item 1\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"grid-stack-item\" gs-w=\"2\">\n    \u003Cdiv class=\"grid-stack-item-content\">Item 2 wider\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u002F\u002F ...in your script\nGridStack.init();\n```\n\n...or see list of all [API and options](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fdoc) available.\n\nsee [stackblitz sample](https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fgridstack-demo) as running example too.\n\n## Requirements\n\nGridStack no longer requires external dependencies as of v1 (lodash was removed in v0.5 and jquery API in v1). v3 is a complete HTML5 re-write removing need for jquery. v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is `gridstack-all.js` and `gridstack.min.css` (layouts are done using CSS column based %).\n\n## Specific frameworks\n\nsearch for ['gridstack' under NPM](https:\u002F\u002Fwww.npmjs.com\u002Fsearch?q=gridstack&ranking=popularity) for latest, more to come...\n\n- **Angular**: we ship out of the box an Angular wrapper - see \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fangular\" target=\"_blank\">Angular Component\u003C\u002Fa>.\n- **Angular9**: [lb-gridstack](https:\u002F\u002Fgithub.com\u002Fpfms84\u002Flb-gridstack) Note: very old v0.3 gridstack instance so recommend for **concept ONLY if you wish to use directive instead**. Code has **not been vented** at as I use components.\n- **AngularJS**: [gridstack-angular](https:\u002F\u002Fgithub.com\u002Fkdietrich\u002Fgridstack-angular)\n- **Ember**: [ember-gridstack](https:\u002F\u002Fgithub.com\u002Fyahoo\u002Fember-gridstack)\n- **knockout**: see [demo](https:\u002F\u002Fgridstackjs.com\u002Fdemo\u002Fknockout.html) using component, but check [custom bindings ticket](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Fissues\u002F465) which is likely better approach.\n- **Rails**: [gridstack-js-rails](https:\u002F\u002Fgithub.com\u002Frandoum\u002Fgridstack-js-rails)\n- **React**: work in progress to have wrapper code: see \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Freact\" target=\"_blank\">React Component\u003C\u002Fa>. But also see [demo](https:\u002F\u002Fgridstackjs.com\u002Fdemo\u002Freact.html) with [src](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fdemo\u002Freact.html), or  [react-gridstack-example](https:\u002F\u002Fgithub.com\u002FInder2108\u002Freact-gridstack-example\u002Ftree\u002Fmaster\u002Fsrc\u002FApp.js), or read on what [hooks to use](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Fissues\u002F735#issuecomment-329888796)\n- **Vue**: see [demo](https:\u002F\u002Fgridstackjs.com\u002Fdemo\u002Fvue3js.html) with [v3 src](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fdemo\u002Fvue3js.html) or [v2 src](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fdemo\u002Fvue2js.html)\n- **Aurelia**: [aurelia-gridstack](https:\u002F\u002Fgithub.com\u002Faurelia-ui-toolkits\u002Faurelia-gridstack), see [demo](https:\u002F\u002Faurelia-ui-toolkits.github.io\u002Faurelia-gridstack\u002F)\n\n## Extend Library\n\nYou can easily extend or patch gridstack with code like this:\n\n```js\n\u002F\u002F extend gridstack with our own custom method\nGridStack.prototype.printCount = function() {\n  console.log('grid has ' + this.engine.nodes.length + ' items');\n};\n\nlet grid = GridStack.init();\n\n\u002F\u002F you can now call\ngrid.printCount();\n```\n\n## Extend Engine\n\nYou can now (5.1+) easily create your own layout engine to further customize your usage. Here is a typescript example\n\n```ts\nimport { GridStack, GridStackEngine, GridStackNode, GridStackMoveOpts } from 'gridstack';\n\nclass CustomEngine extends GridStackEngine {\n\n  \u002F** refined this to move the node to the given new location *\u002F\n  public override moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {\n    \u002F\u002F keep the same original X and Width and let base do it all...\n    o.x = node.x;\n    o.w = node.w;\n    return super.moveNode(node, o);\n  }\n}\n\nGridStack.registerEngine(CustomEngine); \u002F\u002F globally set our custom class\n```\n\n## Change grid columns\n\nGridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need **2 things** if you need to customize this:\n\n1) Change the `column` grid option when creating a grid to your number N\n```js\nGridStack.init( {column: N} );\n```\n\nNOTE: step 2 is OLD and not needed with v12+ which uses CSS variables instead of classes\n\n2) also include `gridstack-extra.css` if **N \u003C 12** (else custom CSS - see next). Without these, things will not render\u002Fwork correctly.\n```html\n\u003Clink href=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack.min.css\" rel=\"stylesheet\"\u002F>\n\u003Clink href=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack-extra.min.css\" rel=\"stylesheet\"\u002F>\n\n\u003Cdiv class=\"grid-stack\">...\u003C\u002Fdiv>\n```\n\nNote: class `.grid-stack-N` will automatically be added and we include `gridstack-extra.min.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS\u002FCSS yourself (see next).\n\nSee example: [2 grids demo](http:\u002F\u002Fgridstack.github.io\u002Fgridstack.js\u002Fdemo\u002Ftwo.html) with 6 columns\n\n## Custom columns CSS (OLD, not needed with v12+)\n\nNOTE: step is OLD and not needed with v12+ which uses CSS variables instead of classes\n\nIf you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w=\"X\"]` and `.grid-stack-item[gs-x=\"X\"]`.\n\nFor instance for 4-column grid you need CSS to be:\n\n```css\n.gs-4 > .grid-stack-item[gs-x=\"1\"]  { left: 25% }\n.gs-4 > .grid-stack-item[gs-x=\"2\"]  { left: 50% }\n.gs-4 > .grid-stack-item[gs-x=\"3\"]  { left: 75% }\n\n.gs-4 > .grid-stack-item { width: 25% }\n.gs-4 > .grid-stack-item[gs-w=\"2\"]  { width: 50% }\n.gs-4 > .grid-stack-item[gs-w=\"3\"]  { width: 75% }\n.gs-4 > .grid-stack-item[gs-w=\"4\"]  { width: 100% }\n```\n\nBetter yet, here is a SCSS code snippet, you can use sites like [sassmeister.com](https:\u002F\u002Fwww.sassmeister.com\u002F) to generate the CSS for you instead:\n\n```scss\n$columns: 20;\n@function fixed($float) {\n  @return round($float * 1000) \u002F 1000; \u002F\u002F total 2+3 digits being %\n}\n.gs-#{$columns} > .grid-stack-item {\n\n  width: fixed(100% \u002F $columns);\n\n  @for $i from 1 through $columns - 1 {\n    &[gs-x='#{$i}'] { left: fixed((100% \u002F $columns) * $i); }\n    &[gs-w='#{$i+1}'] { width: fixed((100% \u002F $columns) * ($i+1)); }\n  }\n}\n```\n\nyou can also use the SCSS [src\u002Fgridstack-extra.scss](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fsrc\u002Fgridstack-extra.scss) included in NPM package and modify to add more columns.\n\nSample gulp command for 30 columns:\n```js\ngulp.src('node_modules\u002Fgridstack\u002Fdist\u002Fsrc\u002Fgridstack-extra.scss')\n        .pipe(replace('$start: 2 !default;','$start: 30;'))\n        .pipe(replace('$end: 11 !default;','$end: 30;'))\n        .pipe(sass({outputStyle: 'compressed'}))\n        .pipe(rename({extname: '.min.css'}))\n        .pipe(gulp.dest('dist\u002Fcss'))\n```\n\n## Override resizable\u002Fdraggable options\n\nYou can override default `resizable`\u002F`draggable` options. For instance to enable other then bottom right resizing handle\nyou can init gridstack like:\n\n```js\nGridStack.init({\n  resizable: {\n    handles: 'e,se,s,sw,w'\n  }\n});\n```\n\n## Touch devices support\n\ngridstack v6+ now support mobile out of the box, with the addition of native touch event (along with mouse event) for drag&drop and resize.\nOlder versions (3.2+) required the jq version with added touch punch, but doesn't work well with nested grids.\n\nThis option is now the default:\n\n```js\nlet options = {\n  alwaysShowResizeHandle: 'mobile' \u002F\u002F true if we're on mobile devices\n};\nGridStack.init(options);\n```\n\nSee [example](http:\u002F\u002Fgridstack.github.io\u002Fgridstack.js\u002Fdemo\u002Fmobile.html).\n\n# Migrating\n## Migrating to v0.6\n\nstarting in 0.6.x `change` event are no longer sent (for pretty much most nodes!) when an item is just added\u002Fdeleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track `added|removed` [events](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fdoc#events) if you didn't and relied on the old broken behavior.\n\n## Migrating to v1\n\nv1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:\n\n0. see previous step if not on v0.6 already\n\n1. your code only needs to `import GridStack from 'gridstack'` or include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, see [jquery app](#jquery-application) section.\n\n2. code change:\n\n**OLD** initializing code + adding a widget + adding an event:\n```js\n\u002F\u002F initialization returned Jquery element, requiring second call to get GridStack var\nvar grid = $('.grid-stack').gridstack(opts?).data('gridstack');\n\n\u002F\u002F returned Jquery element\ngrid.addWidget($('\u003Cdiv>\u003Cdiv class=\"grid-stack-item-content\"> test \u003C\u002Fdiv>\u003C\u002Fdiv>'), undefined, undefined, 2, undefined, true);\n\n\u002F\u002F jquery event handler\n$('.grid-stack').on('added', function(e, items) {\u002F* items contains info *\u002F});\n\n\u002F\u002F grid access after init\nvar grid = $('.grid-stack').data('gridstack');\n```\n**NEW**\n```js\n\u002F\u002F element identifier defaults to '.grid-stack', returns the grid\n\u002F\u002F Note: for Typescript use window.GridStack.init() until next native 2.x TS version\nvar grid = GridStack.init(opts?, element?);\n\n\u002F\u002F returns DOM element\ngrid.addWidget('\u003Cdiv>\u003Cdiv class=\"grid-stack-item-content\"> test \u003C\u002Fdiv>\u003C\u002Fdiv>', {width: 2});\n\u002F\u002F Note: in 3.x it's ever simpler \n\u002F\u002F grid.addWidget({w:2, content: 'test'})\n\n\u002F\u002F event handler\ngrid.on('added', function(e, items) {\u002F* items contains info *\u002F});\n\n\u002F\u002F grid access after init\nvar grid = el.gridstack; \u002F\u002F where el = document.querySelector('.grid-stack') or other ways...\n```\nOther rename changes\n\n```js\n`GridStackUI` --> `GridStack`\n`GridStackUI.GridStackEngine` --> `GridStack.Engine`\n`grid.container` (jquery grid wrapper) --> `grid.el` \u002F\u002F (grid DOM element)\n`grid.grid` (GridStackEngine) --> `grid.engine`\n`grid.setColumn(N)` --> `grid.column(N)` and `grid.column()` \u002F\u002F to get value, old API still supported though\n```\n\nRecommend looking at the [many samples](.\u002Fdemo) for more code examples.\n\n## Migrating to v2\n\nmake sure to read v1 migration first!\n\nv2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x\n\n1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set\u002Fget are also not function calls so API would have changed). Instead we decided to have \u003Cb>all set methods return\u003C\u002Fb> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridStackOptions` or `GridStackWidget`).\n\n```js\n`addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`\n\u002F\u002F Note: in 2.1.x you can now just do addWidget({with: 2, content: \"text\"})\n`float()` --> `getFloat()` \u002F\u002F to get value\n`cellHeight()` --> `getCellHeight()` \u002F\u002F to get value\n`verticalMargin` --> `margin` \u002F\u002F grid options and API that applies to all 4 sides.\n`verticalMargin()` --> `getMargin()` \u002F\u002F to get value\n```\n\n2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop|dragstop` are now called **after** the DOM attributes have been updated.\n\n3. `oneColumnMode` would trigger when `window.width` \u003C 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `oneColumnSize` or `disableOneColumnMode`.\n\n**Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x\n\n## Migrating to v3\n\nmake sure to read v2 migration first!\n\nv3 has a new HTML5 drag&drop plugging (63k total, all native code), while still allowing you to use the legacy jquery-ui version instead (188k), or a new static grid version (34k, no user drag&drop but full API support). You will need to decide which version to use as `gridstack.all.js` no longer exist (same is now `gridstack-jq.js`) - see [include info](#include).\n\n**NOTE**: HTML5 version is almost on parity with the old jquery-ui based drag&drop. the `containment` (prevent a child from being dragged outside it's parent) and `revert` (not clear what it is for yet) are not yet implemented in initial release of v3.0.0.\u003Cbr>\nAlso mobile devices don't support h5 `drag` events (will need to handle `touch`) whereas v3.2 jq version now now supports out of the box (see [v3.2 release](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Freleases\u002Ftag\u002Fv3.2.0))\n\nBreaking changes:\n\n1. include (as mentioned) need to change\n\n2. `GridStack.update(el, opt)` now takes single `GridStackWidget` options instead of only supporting (x,y,w,h) BUT legacy call in JS will continue working the same for now. That method is a complete re-write and does the right constrain and updates now for all the available params.\n\n3. `locked()`, `move()`, `resize()`, `minWidth()`, `minHeight()`, `maxWidth()`, `maxHeight()` methods are hidden from Typescript (JS can still call for now) as they are just 1 liner wrapper around `update(el, opt)` anyway and will go away soon. (ex: `move(el, x, y)` => `update(el, {x, y})`)\n\n4. item attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require less typing and more efficient (2k saved in .js alone!).\n\n5. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well\n\n## Migrating to v4\n\nmake sure to read v3 migration first!\n\nv4 is a complete re-write of the collision and drag in\u002Fout heuristics to fix some very long standing request & bugs. It also greatly improved usability. Read the release notes for more detail.\n\n**Unlikely** Breaking Changes (internal usage):\n\n1. `removeTimeout` was removed (feedback over trash will be immediate - actual removal still on mouse up)\n\n2. the following `GridStackEngine` methods changed (used internally, doesn't affect `GridStack` public API)\n\n```js\n\u002F\u002F moved to 3 methods with new option params to support new code and pixel coverage check\n`collision()` -> `collide(), collideAll(), collideCoverage()`\n`moveNodeCheck(node, x, y, w, h)` -> `moveNodeCheck(node, opt: GridStackMoveOpts)`\n`isNodeChangedPosition(node, x, y, w, h)` -> `changedPosConstrain(node, opt: GridStackMoveOpts)`\n`moveNode(node, x, y, w, h, noPack)` -> `moveNode(node, opt: GridStackMoveOpts)`\n```\n\n3. removed old obsolete (v0.6-v1 methods\u002Fattrs) `getGridHeight()`, `verticalMargin`, `data-gs-current-height`,\n`locked()`, `maxWidth()`, `minWidth()`, `maxHeight()`, `minHeight()`, `move()`, `resize()`\n\n\n## Migrating to v5\n\nmake sure to read v4 migration first!\n\nv5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode:\nYou can now drag in\u002Fout of parent into nested child, with new API parameters values. See the release notes.\n\n## Migrating to v6\n\nthe API did not really change from v5, but a complete re-write of Drag&Drop to use native `mouseevent` (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and `touchevent` (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib).\n\nThe main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version.\n\n## Migrating to v7\n\nNew addition, no API breakage per say. See release notes about creating sub-grids on the fly.\n\n## Migrating to v8\n\nPossible breaking change if you use nested grid JSON format, or original Angular wrapper, or relied on specific CSS paths. Also target is now ES2020 (see release notes).\n* `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts` rename. We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (was both types which is error prone)\n* `GridStackOptions.addRemoveCB` -> `GridStack.addRemoveCB` is now global instead of grid option\n* removed `GridStackOptions.dragInOptions` since `GridStack.setupDragIn()` has it replaced since 4.0\n* remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead\n* CSS rules removed `.grid-stack` prefix for anything already gs based, 12 column (default) now uses `.gs-12`, extra.css is less than 1\u002F4th it original size!, `gs-min|max_w|h` attribute no longer written (but read)\n\n## Migrating to v9\n\nNew addition - see release notes about `sizeToContent` feature.\nPossible break:\n* `GridStack.onParentResize()` is now called `onResize()` as grid now directly track size change, no longer involving parent per say to tell us anything. Note sure why it was public.\n\n## Migrating to v10\n\nwe now support much richer responsive behavior with `GridStackOptions.columnOpts` including any breakpoint width:column pairs, or automatic column sizing.\n\nbreaking change: \n* `disableOneColumnMode`, `oneColumnSize` have been removed (thought we temporary convert if you have them). use `columnOpts: { breakpoints: [{w:768, c:1}] }` for the same behavior.\n* 1 column mode switch is no longer by default (`columnOpts` is not defined) as too many new users had issues. Instead set it explicitly (see above).\n* `oneColumnModeDomSort` has been removed. Planning to support per column layouts at some future times. TBD\n\n## Migrating to v11\n\n* All instances of `el.innerHTML = 'some content'` have been removed for security reason as it opens up some potential for accidental XSS.\n\n* Side panel drag&drop complete rewrite.\n\n* new lazy loading option\n\n**Breaking change:**\n\n* V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular\u002FReact\u002FVue frameworks.\n* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself as shown below, OR use `GridStack.createWidgetDivs()` to create parent divs, do the innerHtml, then call `makeWidget(el)` instead.\n* if your code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this:\n```ts\n\u002F\u002F NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736\nGridStack.renderCB = function(el: HTMLElement, w: GridStackNode) {\n  el.innerHTML = w.content;\n};\n\n\u002F\u002F now you can create widgets like this again\nlet gridWidget = grid.addWidget({x, y, w, h, content: '\u003Cdiv>My html content\u003C\u002Fdiv>'});\n```\n\n**Potential breaking change:**\n\n* BIG overall to how sidepanel helper drag&drop is done:\n1. `clone()` helper is now passed full HTML element dragged, not an event on `grid-stack-item-content` so you can clone or set attr at the top.\n2. use any class\u002Fstructure you want for side panel items (see two.html)\n3. `GridStack.setupDragIn()` now support associating a `GridStackWidget` for each sidepanel that will be used to define what to create on drop!\n4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item.\n5. support DOM gs- attr as well as gridstacknode JSON (see two.html) alternatives.\n\n## Migrating to v12\n\n* column and cell height code has been re-writen to use browser CSS variables, and we no longer need a tons of custom CSS classes!\nthis fixes a long standing issue where people forget to include the right CSS for non 12 columns layouts, and a big speedup in many cases (many columns, or small cellHeight values).\n\n**Potential breaking change:**\n* `gridstack-extra.min.css` no longer exist, nor is custom column CSS classes needed. API\u002Foptions hasn't changed.\n* (v12.1) `ES5` folder content has been removed - was for IE support, which has been dropped.\n* (v12.1) nested grid events are now sent to the main grid. You might have to adjust your workaround of this missing feature. nested.html demo has been adjusted.\n\n# jQuery Application\n\nThis is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before\n\n```js\nimport 'gridstack\u002Fdist\u002Fgridstack.min.css';\nimport { GridStack } from 'gridstack';\nimport 'gridstack\u002Fdist\u002Fjq\u002Fgridstack-dd-jqueryui';\n```\n**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, \nwhich means you can possibly bring your own version\n```js\n  alias: {\n    'jquery': 'gridstack\u002Fdist\u002Fjq\u002Fjquery.js',\n    'jquery-ui': 'gridstack\u002Fdist\u002Fjq\u002Fjquery-ui.js',\n    'jquery.ui': 'gridstack\u002Fdist\u002Fjq\u002Fjquery-ui.js',\n    'jquery.ui.touch-punch': 'gridstack\u002Fdist\u002Fjq\u002Fjquery.ui.touch-punch.js',\n  },\n```\nAlternatively (single combined file) in html\n\n```html\n\u003Clink href=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack.min.css\" rel=\"stylesheet\"\u002F>\n\u003C!-- HTML5 drag&drop (70k) -->\n\u003Cscript src=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack-h5.js\">\u003C\u002Fscript>\n\u003C!-- OR jquery-ui drag&drop (195k) -->\n\u003Cscript src=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack-jq.js\">\u003C\u002Fscript>\n\u003C!-- OR static grid (40k) -->\n\u003Cscript src=\"node_modules\u002Fgridstack\u002Fdist\u002Fgridstack-static.js\">\u003C\u002Fscript>\n```\n\nWe have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. \n\n**NOTE: in v4, v3**: we ES6 module import jquery & jquery-ui by name, so you need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions.\n\n**NOTE: in v1.x** IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Fissues\u002F1306)).\n\nAs for events, you can still use `$(\".grid-stack\").on(...)` for the version that uses jquery-ui for things we don't support.\n\n# Changes\n\nView our change log [here](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Ftree\u002Fmaster\u002Fdoc\u002FCHANGES.md).\n\n# Usage Trend\n\n[Usage Trend of gridstack](https:\u002F\u002Fnpm-compare.com\u002Fgridstack#timeRange=THREE_YEARS)\n  \n\u003Ca href=\"https:\u002F\u002Fnpm-compare.com\u002Fgridstack#timeRange=THREE_YEARS\" target=\"_blank\">\n  \u003Cimg src=\"https:\u002F\u002Fnpm-compare.com\u002Fimg\u002Fnpm-trend\u002FTHREE_YEARS\u002Fgridstack.png\" width=\"70%\" alt=\"NPM Usage Trend of gridstack\" \u002F>\n\u003C\u002Fa>\n\n# The Team\n\ngridstack.js is currently maintained by [Alain Dumesny](https:\u002F\u002Fgithub.com\u002Fadumesny), before that [Dylan Weiss](https:\u002F\u002Fgithub.com\u002Fradiolips), originally created by [Pavel Reznikov](https:\u002F\u002Fgithub.com\u002Ftroolee). We appreciate [all contributors](https:\u002F\u002Fgithub.com\u002Fgridstack\u002Fgridstack.js\u002Fgraphs\u002Fcontributors) for help.\n","gridstack.js 是一个用于快速构建交互式仪表盘的现代 TypeScript 库。它支持拖放、多列响应式布局，能够轻松创建复杂的用户界面。该项目兼容多种前端框架，如 Angular、React、Vue 等，并提供了丰富的 API 以满足自定义需求。适用于需要高度可定制且响应迅速的数据可视化场景，无论是企业级应用还是个人项目都能从中受益。MIT 许可证下开源，社区活跃，持续更新维护。","2026-06-11 03:26:15","top_topic"]