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.slack.com
Table of Contents generated with DocToc
- Demo and API Documentation
- Usage
- gridstack.js for specific frameworks
- Migrating
- jQuery Application
- Changes
- The Team
Please visit http://gridstackjs.com and these demos, and complete API documentation
yarn add gridstack
// or
npm install --save gridstackES6 or Typescript
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';Alternatively (single combined file, notice the -all.js) in html
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<script src="node_modules/gridstack/dist/gridstack-all.js"></script>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). 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-all.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 is a complete HTML5 re-write removing need for jquery (still available for legacy apps). 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 %).
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