Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
gridstack
Advanced tools
TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)
Gridstack is a JavaScript library that helps you create dynamic, responsive, and draggable grid layouts. It is particularly useful for building dashboards, widgets, and other interactive web applications where users can customize the layout by dragging and resizing elements.
Draggable Widgets
This feature allows you to add draggable widgets to the grid. The code sample initializes a grid and adds a widget at position (0, 0) with a width and height of 2 units.
const grid = GridStack.init();
grid.addWidget('<div><div class="grid-stack-item-content">Widget 1</div></div>', {x: 0, y: 0, width: 2, height: 2});
Resizable Widgets
This feature allows you to add resizable widgets to the grid. The code sample initializes a grid and adds a resizable widget at position (1, 1) with a width and height of 2 units.
const grid = GridStack.init();
grid.addWidget('<div><div class="grid-stack-item-content">Widget 2</div></div>', {x: 1, y: 1, width: 2, height: 2, resizable: true});
Static Grid
This feature allows you to create a static grid where widgets cannot be dragged or resized. The code sample initializes a static grid and adds a widget at position (2, 2) with a width and height of 2 units.
const grid = GridStack.init({staticGrid: true});
grid.addWidget('<div><div class="grid-stack-item-content">Static Widget</div></div>', {x: 2, y: 2, width: 2, height: 2});
Saving and Loading Layouts
This feature allows you to save the current layout of the grid and load it later. The code sample demonstrates how to save the layout of a grid and then load it into another grid instance.
const grid = GridStack.init();
const layout = grid.save();
// Later, you can load the layout
const grid2 = GridStack.init();
grid2.load(layout);
Muuri is a JavaScript library for creating responsive, sortable, filterable, and draggable grid layouts. It offers more advanced sorting and filtering options compared to Gridstack but may require more configuration for basic grid functionalities.
Packery is a JavaScript library for creating draggable and resizable grid layouts. It focuses on packing elements in the most efficient way possible, which can be useful for creating masonry-style layouts. However, it lacks some of the built-in features for saving and loading layouts that Gridstack offers.
Interact.js is a JavaScript library for drag-and-drop, resizing, and multi-touch gestures. While it is more versatile and can be used for a variety of interactive elements, it requires more custom code to achieve the same grid functionalities that Gridstack provides out of the box.
Mobile-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 React, Vue, Angular, Knockout.js, Ember and others (see frameworks section).
Inspired by no-longer maintained gridster, built with love.
Check http://gridstackjs.com and these demos.
If you find this lib useful, please donate PayPal (use “send to a friend” to avoid 3% fee) or Venmo (adumesny) and help support it!
Join us on Slack: https://gridstackjs.troolee.com
Table of Contents generated with DocToc
Please visit http://gridstackjs.com and these demos, and complete API documentation
yarn add gridstack
// or
npm install --save gridstack
ES6 or Typescript
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
// THEN to get HTML5 drag&drop
import 'gridstack/dist/h5/gridstack-dd-native';
// OR to get legacy jquery-ui drag&drop (support Mobile touch devices, h5 does not yet)
import 'gridstack/dist/jq/gridstack-dd-jqueryui';
// OR nothing to get static grids (API driven, no user drag&drop)
Note: jquery
& jquery-ui
are imported by name, so you will have to specify their location in your webpack (or equivalent) config file,
which means you can possibly bring your own version
alias: {
'jquery': 'gridstack/dist/jq/jquery.js',
'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
},
Alternatively (single combined file) in html
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<!-- HTML5 drag&drop (70k) -->
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<!-- OR jquery-ui drag&drop (195k) -->
<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
<!-- OR static grid (40k) -->
<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
Note: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through jquery.ui.touch-punch
(h5 version is planned). Read more at migrating to v3
Note2: 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 might break in the future). You can use the es5 files and polyfill (larger) for older browser instead. For example:
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
<script src="node_modules/gridstack/dist/es5/gridstack-jq.js"></script>
creating items dynamically...
// ...in your HTML
<div class="grid-stack"></div>
// ...in your script
var grid = GridStack.init();
grid.addWidget({w: 2, content: 'item 1'});
... or creating from list
// using serialize data instead of .addWidget()
const serializedData = [
{x: 0, y: 0, w: 2, h: 2},
{x: 2, y: 3, w: 3, content: 'item 2'},
{x: 1, y: 3}
];
grid.load(serializedData);
... or DOM created items
// ...in your HTML
<div class="grid-stack">
<div class="grid-stack-item">
<div class="grid-stack-item-content">Item 1</div>
</div>
<div class="grid-stack-item" gs-w="2">
<div class="grid-stack-item-content">Item 2 wider</div>
</div>
</div>
// ...in your script
GridStack.init();
...or see list of all API and options available.
see jsfiddle sample as running example too.
GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). v3.0.0 is a complete HTML5 re-write which removes all jquery dependency (still available for legacy apps). All you need to include now is gridstack-h5.js
and gridstack.min.css
(layouts are done using CSS column based %).
You can easily extend or patch gridstack with code like this:
// extend gridstack with our own custom method
GridStack.prototype.printCount = function() {
console.log('grid has ' + this.engine.nodes.length + ' items');
};
let grid = GridStack.init();
// you can now call
grid.printCount();
You can now (5.1+) easily create your own layout engine to further customize you usage. Here is a typescript example
import { GridStack, GridStackEngine, GridStackNod, GridStackMoveOpts } from 'gridstack';
class CustomEngine extends GridStackEngine {
/** refined this to move the node to the given new location */
public moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {
// keep the same original X and Width and let base do it all...
o.x = node.x;
o.w = node.w;
return super.moveNode(node, o);
}
}
GridStack.registerEngine(CustomEngine); // globally set our custom class
GridStack 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:
column
grid option when creating a grid to your number NGridStack.init( {column: N} );
gridstack-extra.css
if N < 12 (else custom CSS - see next). Without these, things will not render/work correctly.<link href="node_modules/gridstack/dist/gridstack-extra.css" rel="stylesheet"/>
<div class="grid-stack">...</div>
Note: class .grid-stack-N
will automatically be added and we include gridstack-extra.css
which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
See example: 2 grids demo with 6 columns
If 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"]
.
For instance for 3-column grid you need to rewrite CSS to be:
.grid-stack-item[gs-w="3"] { width: 100% }
.grid-stack-item[gs-w="2"] { width: 66.67% }
.grid-stack-item[gs-w="1"] { width: 33.33% }
.grid-stack-item[gs-x="2"] { left: 66.67% }
.grid-stack-item[gs-x="1"] { left: 33.33% }
For 4-column grid it should be:
.grid-stack-item[gs-w="4"] { width: 100% }
.grid-stack-item[gs-w="3"] { width: 75% }
.grid-stack-item[gs-w="2"] { width: 50% }
.grid-stack-item[gs-w="1"] { width: 25% }
.grid-stack-item[gs-x="3"] { left: 75% }
.grid-stack-item[gs-x="2"] { left: 50% }
.grid-stack-item[gs-x="1"] { left: 25% }
and so on.
Better yet, here is a SASS code snippet which can make life much easier (Thanks to @ascendantofrain, #81 and @StefanM98, #868) and you can use sites like sassmeister.com to generate the CSS for you instead:
@use "sass:math";
.grid-stack > .grid-stack-item {
$gridstack-columns: 12;
min-width: math.div(100%, $gridstack-columns);
@for $i from 0 through $gridstack-columns {
&[gs-w='#{$i}'] { width: math.div(100%, $gridstack-columns) * $i; }
&[gs-x='#{$i}'] { left: math.div(100%, $gridstack-columns) * $i; }
&[gs-min-w='#{$i}'] { min-width: math.div(100%, $gridstack-columns) * $i; }
&[gs-max-w='#{$i}'] { max-width: math.div(100%, $gridstack-columns) * $i; }
}
}
you can also use the SASS src/gridstack-extra.scss included in NPM package and modify to add more columns.
Sample gulp command for 30 columns:
gulp.src('node_modules/gridstack/dist/src/gridstack-extra.scss')
.pipe(replace('$gridstack-columns: 11 !default;','$gridstack-columns: 30;'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(rename({extname: '.min.css'}))
.pipe(gulp.dest('dist/css'))
You can override default resizable
/draggable
options. For instance to enable other then bottom right resizing handle
you can init gridstack like:
GridStack.init({
resizable: {
handles: 'e,se,s,sw,w'
}
});
gridstack v3.2 jq version compiles touch support (html5 version does not yet support touchmove
events. This will be added in a future release), so it works out of the box, no need for anything.
You used to need jQuery UI Touch Punch to make jQuery UI Draggable/Resizable
work on touch-based devices (now distributed as dist/jq/jquery.ui.touch-punch.js
for reference).
This option will be useful:
let options = {
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
};
GridStack.init(options);
See example. If you're still experiencing issues on touch devices please check #444
search for 'gridstack' under NPM for latest, more to come...
starting in 0.6.x change
event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track added|removed
events if you didn't and relied on the old broken behavior.
v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:
see previous step if not on v0.6 already
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 section.
code change:
OLD initializing code + adding a widget + adding an event:
// initialization returned Jquery element, requiring second call to get GridStack var
var grid = $('.grid-stack').gridstack(opts?).data('gridstack');
// returned Jquery element
grid.addWidget($('<div><div class="grid-stack-item-content"> test </div></div>'), undefined, undefined, 2, undefined, true);
// jquery event handler
$('.grid-stack').on('added', function(e, items) {/* items contains info */});
// grid access after init
var grid = $('.grid-stack').data('gridstack');
NEW
// element identifier defaults to '.grid-stack', returns the grid
// Note: for Typescript use window.GridStack.init() until next native 2.x TS version
var grid = GridStack.init(opts?, element?);
// returns DOM element
grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
// Note: in 3.x it's ever simpler
// grid.addWidget({w:2, content: 'test'})
// event handler
grid.on('added', function(e, items) {/* items contains info */});
// grid access after init
var grid = el.gridstack; // where el = document.querySelector('.grid-stack') or other ways...
Other rename changes
`GridStackUI` --> `GridStack`
`GridStackUI.GridStackEngine` --> `GridStack.Engine`
`grid.container` (jquery grid wrapper) --> `grid.el` // (grid DOM element)
`grid.grid` (GridStackEngine) --> `grid.engine`
`grid.setColumn(N)` --> `grid.column(N)` and `grid.column()` // to get value, old API still supported though
Recommend looking at the many samples for more code examples.
make sure to read v1 migration first!
v2 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
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
).`addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`
// Note: in 2.1.x you can now just do addWidget({with: 2, content: "text"})
`float()` --> `getFloat()` // to get value
`cellHeight()` --> `getCellHeight()` // to get value
`verticalMargin` --> `margin` // grid options and API that applies to all 4 sides.
`verticalMargin()` --> `getMargin()` // to get value
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.
oneColumnMode
would trigger when window.width
< 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid oneColumnSize
or disableOneColumnMode
.
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
make sure to read v2 migration first!
v3 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.
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.
Also 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)
Breaking changes:
include (as mentioned) need to change
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.
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})
)
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!).
GridStackWidget
used in most API width|height|minWidth|minHeight|maxWidth|maxHeight
are now shorter w|h|minW|minH|maxW|maxH
as well
make sure to read v3 migration first!
v4 is a complete re-write of the collision and drag in/out heuristics to fix some very long standing request & bugs. It also greatly improved usability. Read the release notes for more detail.
Unlikely Breaking Changes (internal usage):
removeTimeout
was removed (feedback over trash will be immediate - actual removal still on mouse up)
the following GridStackEngine
methods changed (used internally, doesn't affect GridStack
public API)
// moved to 3 methods with new option params to support new code and pixel coverage check
`collision()` -> `collide(), collideAll(), collideCoverage()`
`moveNodeCheck(node, x, y, w, h)` -> `moveNodeCheck(node, opt: GridStackMoveOpts)`
`isNodeChangedPosition(node, x, y, w, h)` -> `changedPosConstrain(node, opt: GridStackMoveOpts)`
`moveNode(node, x, y, w, h, noPack)` -> `moveNode(node, opt: GridStackMoveOpts)`
getGridHeight()
, verticalMargin
, data-gs-current-height
,
locked()
, maxWidth()
, minWidth()
, maxHeight()
, minHeight()
, move()
, resize()
make sure to read v4 migration first!
v5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode: You can now drag in/out of parent into nested child, with new API parameters values. See the release notes.
We now 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
.
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.
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).
As for events, you can still use $(".grid-stack").on(...)
for the version that uses jquery-ui for things we don't support.
View our change log here.
gridstack.js is currently maintained by Alain Dumesny and Dylan Weiss, originally created by Pavel Reznikov. We appreciate all contributors for help.
FAQs
TypeScript/JS lib for dashboard layout and creation, responsive, mobile support, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)
The npm package gridstack receives a total of 176,757 weekly downloads. As such, gridstack popularity was classified as popular.
We found that gridstack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.