How do I integrate GridStack.js with React?

GridStack.js provides a React wrapper in the repository, and demos show usage with hooks. You can install via npm and import the component, but note that the wrapper is a work in progress and might require custom adjustments.

GridStack.js vs gridster – which should I use?

GridStack.js is actively maintained and inspired by the no-longer-maintained gridster. It offers modern features like touch support and framework agnosticism, making it a better choice for new projects needing ongoing updates.

Does GridStack.js work on mobile touch devices?

Yes, starting from v6, it includes native touch event support for drag-and-drop and resizing on mobile, as highlighted in the 'Touch devices support' section, with options to customize for mobile responsiveness.

How can I save and load dashboard layouts?

GridStack.js supports serialization via JSON using the 'load' and 'save' methods, allowing you to persist layouts to databases or local storage, as mentioned in the key features and basic usage examples.

Can I use GridStack.js without jQuery?

Absolutely. Since v1, GridStack.js is dependency-free and no longer requires jQuery, though legacy jQuery applications can use older versions or specific builds, but this is discouraged for new projects.

What changed in GridStack.js v12?

v12 introduced CSS variables for columns and cell heights, removing the need for extra CSS files for custom columns, but dropped IE support again and requires updates to migration paths, as detailed in the migration section.

Open-Awesome

gridstack

MITTypeScriptv13.1.0

A mobile-friendly TypeScript library for building interactive, drag-and-drop, multi-column responsive dashboards.

Visit Website GitHub

9.0k stars1.4k forks0 contributors

What is gridstack?

GridStack.js is a JavaScript library for building interactive, responsive dashboards with drag-and-drop widgets. It solves the problem of creating customizable dashboard layouts that work seamlessly across devices, eliminating the need for complex CSS or manual layout management.

Target Audience

Frontend developers and teams building admin panels, analytics dashboards, or any application requiring dynamic, user-configurable widget layouts.

Value Proposition

Developers choose GridStack.js for its framework-agnostic design, mobile-friendly touch support, and ease of integration—enabling rapid dashboard development without external dependencies like jQuery.

Overview

Build interactive dashboards in minutes.

Use Cases

Best For

Building admin dashboards with draggable widgets
Creating responsive analytics panels for multi-screen devices
Developing customizable user interfaces with nested grid layouts
Prototyping interactive dashboard designs quickly
Integrating drag-and-drop layouts into Angular, React, or Vue applications
Implementing touch-enabled dashboard interfaces for mobile users

Not Ideal For

Projects requiring static, non-interactive layouts without drag-and-drop
Applications with strict legacy browser support (e.g., Internet Explorer)
Teams averse to frequent breaking changes and extensive migration work
Large-scale apps needing heavy server-side rendering with minimal client-side JavaScript

Pros & Cons

Pros

Framework Agnostic

Works seamlessly with Angular, React, Vue, and others through dedicated wrappers, as shown in the 'Specific frameworks' section, reducing integration overhead.

Mobile-Friendly Touch Support

Includes native touch event handling out of the box for drag-and-drop on mobile devices, eliminating the need for external libraries like jQuery UI touch punch.

Dependency-Free Core

Since v1, the library has no external dependencies like jQuery or lodash, making it lightweight and easier to bundle, as stated in the 'Requirements' section.

Extensible Architecture

Allows custom extensions to the library and engine, enabling developers to override methods or create custom layouts, detailed in 'Extend Library' and 'Extend Engine'.

Cons

Frequent Breaking Changes

The README includes extensive migration guides from v0.6 to v12, indicating that updates often require significant code adjustments, which can disrupt ongoing projects.

Unstable Legacy Browser Support

IE support was dropped, restored, and dropped again across versions (e.g., v2, v4.4, v12), showing inconsistency and making it unreliable for older environments.

Complex Custom Column Setup

For non-default column counts (e.g., beyond 12), developers must generate custom CSS manually or use extra files, adding setup complexity as explained in 'Change grid columns'.

Frequently Asked Questions

Related Projects

angular-gridster2

Angular gridster 2

Stars1,343

Forks387

Last commit2 days ago

angular-split

🍌 Angular UI library to split views and allow dragging to resize areas using CSS grid layout.

Stars930

Forks219

Last commit1 month ago

angular-grid-layout

Responsive grid with draggable and resizable items for Angular applications.

Stars520

Forks73

Last commit10 months ago

ng-polymorpheus

Polymorpheus is a tiny library for polymorphic templates in Angular.

Stars414

Forks23

Last commit1 day ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub