Dashboard UI widget

The Grid Dashboard, apart from helping you neatly place UI components into a grid, lets you create a dashboard-like layout with panels. Dashboard enhances the possibilities of GridLayout and allows users to easily choose the preferable position for components within the grid. Users can drag panels, drop them into any cell, and resize panels to fit in accurately.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Samples of PHP, Node.js, .NET integration
  • Ready for Touch Devices
  • Meets Section 508

Draggable panels

You can let users decide where to put UI components. Dashboard panels can be dragged to any position within the grid by the header or by their inner part.

Drag panels to change their position.

Resizable panels

You can also make panels resizable, so that users can change sizes of panels to fit them into the grid.

Drag the ‘resize’ icon in the bottom right corner of panels.

Dashboard panels with menus

Add menus to panels for quick actions with them, for example deleting, exporting their data or displaying some additional information.

Click icons on the panels to open menus.

Changing the layout

Use Dashboard API for adding, moving and deleting panels from the grid. You can also define schemes for creating dynamic panels.

Drag panels from the list on the left to the dashboard.

Saving and restoring state

It’s possible to save and restore the current position and sizes of all panels.