[updated] Of gridstack.js 1.0

Update: The new release date is August. I know, I know, I promised June. The upside: some of the features mentioned in this post as higher priorities for future releases are included in version 1. The new version is awesome. I have had some recent bumps in my non-open source life, but I’ll commit more dedicated time to developing gridstack.js ASAP. – dylan

(Read the footer if you’re unfamiliar with gridstack.js)

First started on November 9, 2014, gridstack.js is quickly closing in on three years old and has not hit version 1.0. In fact, version 0.3.0 was only just released a few days ago. I’m please to inform you that version 1.0 is coming very soon (by June 2017 soon)!

If you’re already on 0.3.0, you won’t have any problem switching to version 1.0. The APIs remain largely the same, but the API names deprecated in 0.2.5 have been removed. If you’re getting loads of console warnings, please get that fixed ASAP! What can you expect in this long-coming release? Well, dependencies are removed to make way for…a fully working plugin system for dragging, dropping, and resizing! (jQuery and jQueryUI are removed, while lodash may continue to make an appearance). Not only does this mean a smaller footprint and easier usage, but it means that you can use your favorite dragging library (is it dragula? interact?), or even roll your own!

Version 1.0 is all well and good, but what of later, future releases of gridstack.js? Here’s a condensed list of a few of our higher priorities:
  • Responsive widgets (which will change size depending on viewport)
  • Faster collision detection for larger sets of widgets
  • User-chosen gravity – Widgets can be packed upwards, leftwards, rightwards, downwards, or some combination. For reference, gridstack.js currently packs up-and-left
  • Widget swapping – A much-requested feature, we’re working on a way to make widgets swap places so that widgets may still be moveable even in a full grid.

 

Questions?

For any questions, please reach out to our community on Slack or log a bug on the GitHub bug tracker.

– dylan (@radiolips)

* If you aren’t already familiar with gridstack.js, it’s one of the few maintained Javascript dashboard libraries. gridstack.js is easy to use, quick to setup, and works with most current technologies (and for @troolee‘s sake, I’ll mention that it was built with love). It’s based on a 12-column layout (Bootstrap, anyone?), so anyone with similar experience will find it easy to lean in to designing their own dashboard software with the help of gridstack. There are plenty of quick-and-easy tutorials to build some beautiful dashboards. Why not try creating a dashboard with charts to start?

44 thoughts on “[updated] Of gridstack.js 1.0

    • Great question, Garvin! I’d recommend subscribing to this blog and/or the blog’s RSS feed. We’re also working on setting up a mailing list – I’ll let you know when that’s done. We’ll push out updates to the mailing list.

  • Question,

    Why did you have to keep lodash? Besides that your library is amazing! Thank you for supporting it!

    • Hey Andrew,

      When we were considering which dependencies to remove, we factored in the quality of the library, the likelihood that it’d already be in a project, and the time it would take us to remove from gridstack. The problem with lodash is primarily that we have many references that would take time to rewrite. Eventually we will remove lodash, but we decided we wouldn’t have time before 1.0 is completed. If you’d like, we’d love to have a PR in to remove it.

      Thanks for using gridstack! Let me know if you have any other questions.

  • eagerly waiting for Version 1.0. When you guys are planning to release it? Any specific date in Jun 2017?

    • I’ve updated the post with a new date (August). I’m disappointed to have had to postpone the release, but I’m twice as excited for the new features!

  • So pleased to see this! We’re about to do a full rewrite of our dashboard and have been looking for a library to use. I like gridstack but had hoped to find something with fewer dependencies, so this timing could not be better. Here we are in the middle of June, though, and no news on 1.0. What’s the word?

    • Hey Alex – I’ve updated the post and commented on Prashant above you, but the short is: there’s been a delay. I hope that this won’t impact your dashboard update. If you do decide to use gridstack, you won’t have much to change when 1.0 is released. You’ll get speed and usability improvements, but we aren’t removing any of the current functionality. Let me know if you’ve got any questions about the update!

      • Completely understandable, I’m still pumped about 1.0. We’ll be prototyping the dashboard this month but we’re not meant to launch anything until November, so we’ve got time. Not that I want to put any meta-work on your plate, but do you have a more detailed list somewhere of the features that will be coming with 1.0? We’re in the design phase right now so if we can *plan* for 1.0 and code for the current version on our first pass, that would be amazing. Thank you for all your hard work on this.

        • The list hasn’t been finalized yet, but the changes are primarily going to be under-the-hood and won’t impact usage. I’m hoping to get gravity implemented into the code such that the widgets can push left, down, or right in addition to the current gravity that pushes widget to the top. I doubt that that will change your plans, but either way – now you know. If you’re coding based on the latest release, it will be a quick swap to the new version for you.

          • sorry but doesn’t seem like other than top gravity (and ‘float’ option) being that important… there are so many bugs with drag&drop between grids (no resize, loosing custom data), grid collapsing to 0 when empty (how do drop into that? need a min size setting), impossible to drop widget into new row to grow, etc…

  • Dashboards with charts, tables, graphs and a lot of information. Been there, done that. Absolutely amazing. :p.
    One small question: How is the responsive layout going to behave like? The current responsive example is kind of wanky, as in if you size down the page then change it back, the tiles will be really small as they only take 1 column space (or whatever’s the minimum you set). Is that going to be fixed?

    • Hey, xshteff! Apologies for the delay in response – things have been hectic at work, followed by our Independence Day.

      We haven’t yet made final decisions on the responsive layout, but it will likely be similar to Bootstrap’s system. You’ll be able to set a width/height for 3 or 4 screen sizes (ie xs, small, medium, large).

      The current example is DEFINITELY “wanky,” as you say. It was mostly an example POC.

      Keep checking back – as v1.0 gets wrapped up, we’ll begin looking at these exciting features and I’ll post progress on this blog.

      – dylan

      • that’s exciting – was worried I might not be able to use gridstack long term (right now prototype app and library to be re-used) as it’s missing a real responsive design (including hiding cells, not sure 12->n columns. But typically that is down with CSS layout for different screen size (and media query) and not hard coding the column/row on each widgets like today – even the grid height is pixel computed. Wouldn’t that be a major departure from today ?

    • Christian,

      I missed a date (twice) and that’s unacceptable. I’ll get out a blog post with an update. Sorry for the delay.

    • eagoo – if you (or anyone!) writes a react example, I’d be happy to link to it in a readme. Otherwise, when I have time I’ll try to put together a quick blog post about it.

  • I like the way gridstack behaves, but as it stands it looks like I won’t be able to use it because of the constraints that currently exist, such as needing an older version of lodash, problems with jquery-ui and inability to use it properly with webpack. I am hopeful that the new version addresses enough of these issues that I’ll be able to use it. Any word on when the new edition will be released?

    • Tony,

      None of the problems you listed should exist currently. Could you tell me more about the issues you’re having? jquery-ui should be fine, the newest lodash should work, and it shouldn’t have a problem with webpack.

      That being said, August has come and gone and the new version hasn’t been released, but it hasn’t been forgotten. If you still haven’t gotten it to work, let me know and we can work out whatever kinks you’ve got.

      -dylan

  • Hello,
    Nice work,i need help for my grid.
    How we can clone element when is drag this ?

    Do you have a release date for 1.0?

    • Yes. But I’m back and am fully active and at work on it again. I’ll post an update as soon as I can. I’m sorry for the delay.

      -dylan

      • A DELAY on a FREE TO USE (and awesome) LIBRARY?! UNSPEAKABLE! Seriously, though, we appreciate all the work you’re doing and will be stoked when 1.0 does comes out. Side note, the previously mentioned dashboard is done (but still not launched until October/November) and it’s the bees knees. Everyone loves the functionality and it’s all thanks to your library. I’m just excited for fewer dependencies when we get there, but in the meantime, it’s all good.

          • Oh, sorry, did not mean that to be a snarky response to your comment! He’s just keeps apologizing for the multiple delays and honestly, even though we’re all eagerly awaiting the new version, we’re all just happy grid-stack exists at all.

  • Hi there!

    I am currently working on porting your project to Angular 4 (of course removing jQuery and implementing DOM manipulations in “Angular 4 way”). Are there any updates for version 1?

    • Hey, Val! So great to hear that you’re making an Angular 4 port. I’ll post an update about version 1 soon, but none of the core methods changed. You’re likely fine making your code now and it shouldn’t be hard to swap in gridstack 1.

    • Val, I’ll be interested in what you’re doing as I’m also using Angular 4 with it – but currently having Component wrappers around the lib as is (GridComponent, GridItemComponent,…). Working pretty well but having to go between Ng way and JQuery isn’t always pretty… My biggest issue really is angular dealing with static ng-content vs dynamically created content for the grid items (what I’m mostly doing coming from backend description)… re parenting from one grid to another is also not working on the angular side (lib does it’s own thing)… ping me if you want to collaborate.

    • Hey, got an idea – how people STOP asking so Dylan can actually spend time coding it instead of replying same question ???

      instead help review PR, fix issues and submit PR, reply to issues and help however you can… 🙂

Leave a Reply

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