Gridstackjs - any feedback

Wappler General
#1

Hi,

I’m looking at implementing the gridstackjs framework in my Wappler project to offer customizable UI - anyone used it, have experience or feedback ?

https://gridstackjs.com/

Thanks.

#2

Hi @scalaris

I have never used gridstackjs before, but i got curious when i saw your post.
i was able create something with the code snippet on the documentation website . i will share the snippet.hope it helps.

JAVASCRIPT

var items = [
{ content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 2, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1

];
var grid = GridStack.init();
grid.load(items);

HTML

<div class="container">
<div class="grid-stack"></div>

Unzip below file in your public folder

grid-stack.zip (23.6 KB)

Then include below in your main file

<script src="/grid-stack/gridstack-all.js"></script>

 <link href="/grid-stack/gridstack.min.css" rel="stylesheet" />

Result

2022-12-14 20-42-07

Hope it helps

#3

Thanks Ade,

Nice work. :sunglasses:

Can each of these widgets represent a different piece of Wappler code (tables, lists) that can be driven by data from server connects on the underlying page?

That’s what I’m thinking. So you create a bunch, each with different stuff in them, driven by server connect data. E.g.

Avatar widget (with name)

Purchases list

Address widget

Notes widget

And so on…

And can the config be saved/retrieved from the database everytime the pages loads

Thanks

#4

That’s a good thing to explore .will give it ago in the weekend :sunglasses:

#5

Cool :relieved:

#6

You may also be interested in the composable architecture from the Wappler roadmap which may satisfy many of your needs. Expected any time now.