(tutorial) Build a Javascript dashboard with resizable, moveable widgets using gridstack.js

In this post, we’ll explain how to build a working Javascript dashboard with resizable, moveable widgets using gridstack.js, some simple CSS, and a single line of Javascript. If you’d rather skip the gridstack.js tutorial and go straight to the code, scroll to the end to find links to a working codepen.

What you’ll need

Note that all of these can be installed with npm using npm install gridstack or bower with bower install gridstack

Getting started

Now that we’ve prepped all of our dependencies, let’s create a file called gridstack-dashboard.html. Get all those normal HTML tags in there – html, head, body, etc. etc. In the head section, we’re going to reference all of our dependencies. Mine looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>A gridstack.js dashboard</title>

  <link rel="stylesheet" href="https://bootswatch.com/3/paper/bootstrap.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.css"/>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.all.js"></script>
</head>
<body>
</body>
</html>

Building the dashboard with gridstack.js

Getting a dashboard with draggable, resizable widgets could not be easier with the help of gridstack.js. First, well lay out the page:

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h2>A gridstack.js dashboard</h2>
      </div>
      <div class="col-sm-12 well">
        <!-- gridstack.js elements go here -->
      </div>
    </div>
  </div>
</body>

Great! Now all we have to do is lay out a few gridstack.js elements. Note that we haven’t applied any custom Javascript yet. Let’s update the div with the well class. I’m going to apply some quick Bootstrap styles for cosmetic effect.

<div class="col-sm-12 well">
  <!-- gridstack.js elements go here -->
  <div class="grid-stack">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="2">
      <div class="grid-stack-item-content panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Widget 1</h3>
        </div>
        <div class=panel-body">
          content here
        </div>
      </div>
    </div>
    <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="2" data-gs-height="2">
      <div class="grid-stack-item-content panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Widget 2</h3>
        </div>
        <div class=panel-body">
          content here
        </div>
      </div>
    </div>
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="3" data-gs-height="2">
      <div class="grid-stack-item-content panel panel-warning">
        <div class="panel-heading">
          <h3 class="panel-title">Widget 3</h3>
        </div>
        <div class=panel-body">
          content here
        </div>
      </div>
    </div>
  </div>
</div>

We’re almost there! Let’s just add a touch of Javascript just before the closing of our body tag…

<!-- ...
    <script type="text/javascript">
        $(function () {
        	 $('.grid-stack').gridstack();
        });
    </script>
</body>

With this one line of Javascript, we’re telling the page to convert our gridstack element to a gridstack Javascript object. Here’s what our final result looks like in a browser

gridstack.js dashboard screen shot

Drag those widgets. Resize those widgets. We did it; we’ve got a working dashboard!

What’s next

We built a working dashboard with gridstack.js in five minutes, but there’s so much more we can do. Subscribe to catch future dashboard tutorials, or check out our tutorial for adding charts to dashboards using gridstack.js and Highcharts. Recommend features and log errors at gridstack.js on GitHub.

If you’d like to see a working example of this tutorial, check this Codepen.

Leave a Reply

Your email address will not be published. Required fields are marked *