Data Grid features for Sort, Search, Pagination, etc

Developer corner
1

Hey all -

Data Grid as built in weweb seems basic, probably by design. Is it better to extend that component or instead just add in a feature rich Vue component like “Data Table” or any of the other myriad available vs. writing or rebuilding the wheel here e.g. data grid functionality…

Data Tables
https://datatables.net/manual/vue

Also, is the marketplace coming along to allow any of us to be uploading quick useful components or snippets or plugins to do route basic things one might expect? I see it is launched now, but not much in it…

Thanks -

David

2

The marketplace for custom code components is not here yet, weweb’s team mentioned it should be available with a first version next year.
If you have a specific use-case for the component with a fixed set of requirements you can go with your own wrapper of an existing library, but usually you require more features and flexibility (like adding arbitrary weweb components/layouts inside your custom component), so the whole process it’s always longer than wrapping an existing library.
Reading the code of weweb components is extremely useful to see what you can accomplish.

1 Like
3

Thanks @dorilama and good to meet you here. I see your answers on other posts I have been investigating.

It seems to me for no code generally a feature rich data grid is just about a must and seems like it would have been primary to build out in the weweb data grid component natively.

I haven’t investigated enough but I don’t for see even in the JOB LISTING template where they have “search” bolted onto it ~ that wasn’t no code was it?

weweb is probably my greatest discovery in 2023 and hoping to standardize all work I have going and coming up to one platform environment, other than say in cases of building “apps” but also there - idea would be to promote PWAs anyhow.

My evaluation bellwether is always simple things, so come along to new platform: And how is a data grid or table features built out or how quick can I get data piped into a data grid and have: search, pagination, sorting built and published.

Suffice it to say, despite this - weweb is going in such the right direction and sticking to standards, its intriguing to say the least.

Best

David

4

not sure what your test is, but you can sort/filter the data source of the grid client-side, and you can bind dynamic values to the filters. It does require some work and I have read on another topic that the team is thinking about improvements for the component.

1 Like
5

Hi @davidk :wave:

Welcome on board :slight_smile:

Hehe… the data grid element is a big topic of discussion internally! The team developed it a while back because users needed a quick table with inline editing and basic features. Since then, we looked at adding built-in sort and filter options but the result was never satisfactory (the UX became horrible and clunky).

So you have three main options at the moment:

  1. develop and import your own Vue data grid component
  2. build your own data grid with no-code using inputs and save it as a component
  3. wait a few weeks for the new data grid elements coming your way via the v0 of the marketplace and the WeWeb Starter Kit ^^

I hope that helps! Looking forward to seeing what you build with WeWeb :slight_smile:

2 Likes
6

Thanks Joyce for the warm welcome.

Yea, I hit upon what is to me as an outsider and coming maybe at this more as a hybrid of business, marketing, creative, developer type - the data grid or a table “component” w built in bells and whistles (sorting, search, pagination … is for no code a huge golden carrot to win customers/users. Make that simple and give me those requirements, that is going to be inspiring. And if its mostly a no code goal here, then I don’t want have to learn even if easy how to bolt those features on. Even if I could cut and paste them say from the WeWeb Job Listing template or at worst see how you wired it together. But, I see why its internally a huge discussion point. And I am getting to a question based on your 3 ways to do this reply…

Building internally which it sounds like you are going to have a further set of starting components coming, is daunting because libraries I look at and am going to use I guess are things like:

  1. Quasar - look at their data grid component, nobody could or should even bother trying to go up against that

  2. Data Tables - as mentioned above, they already have a Vue library put together too, again why even bother go up against this, or rebuild it, it has beyond anything you would need

So, your 3:

1. develop and import your own Vue data grid component

Me: Or just import one of the above I mentioned? So my big question continues to be - if I do this, there really is no no code advantage is there? Like its not going to be editor aware ala editor no code wise isnt gonna magically know how to configure it and use it, will it? (See #3)

2. build your own data grid with no-code using inputs and save it as a component

Me: This is getting to my point in #1 that this then allows me to be very no code, and just lots of wiring via configuration using the editor UI w no code… The magic of “why weweb.” (statement not question) :wink: … The question is then, how much and how quick could I button click configure - search, data fed to the table, pagination types, sorting of columns vs. doing #1 and again what I assume in #1 - losing no code benefits

3. wait a few weeks for the new data grid elements coming your way via the v0 of the marketplace and the WeWeb Starter Kit ^^

Me: So, if you are tracking w me this is my point - the more you all do build in natively to weweb - the more extreme the abilities, capabilities with me having to do no coding (#1) and even less configuration (#2) …

Am I wrong?

You all only have so much resources and story points probably get wiped out keeping building the plumbing of weweb hence why data grid sat on the shelf for a bit… But, this is interesting with #3.

Also, you do a great job I see all your work across videos on streams, and YT etc. and going through some now… Its greatly appreciated by people like me.

Thanks -

David

7

I likewise am interested in more pre-built options for tables / data grids.

If anyone is out there deciding what components to build to put on the upcoming marketplace, I’d be very interested in anything that provided greater functionality.

For my use case, I’d like to be able to display several hundred rows without crashing the browser, similar to AG Grid. Maybe too big of an ask, I don’t know.

@chadsmithclt @dorilama @jptrinh

8

This will not be possible in WeWeb anytime soon in my opinion. I already have performance issues even with the new components widget. And until you use their dropzone ww-layout feature, I’m guessing you’ll bring the WeWeb’s wrappers and clutter with you, so it will in the end have a similar performance. It really depends on what aspect crashes your browser tho, is it too much markup?

Apart from this, have you considered infinite scrolling?

9

Out of curiosity Ken, what need do you have for a few hundred rows?

10

@Broberto Yes, infinite scrolling might be the answer.

11

@chadsmithclt I’ve heard it said that if you find a spreadsheet that seems complex or a “workaround,” you might have found a need that could be turned into a SaaS.

I’ve been using a spreadsheet that runs calculations for service planning for church. Because I’ve been doing it this way personally for 5 years, I’m so used to being able to scroll up and down the spreadsheet to view lots of song options. In my app, it feels limiting only get some of the results. It’s not required for my app to work, but I think the qualities of AG Grid that attracted me was the ability to see all results, the stock-like color-coding of lines that looks good (can also do this in WeWeb), filtering & sorting are done virtually instantaneously, and the speed of the demo (which is obviously super-optimized) but $$$. You don’t feel like you’re getting partial information - you can get at the whole set all at once.