🎉 [New plugin] Json table / spreadsheet (like excel)

Showcase Plugins
65

That’s actually very helpful to hear! Give’s me some insight on how I can make the explanation a lot more friendly / less intimidating. As for autobinding, that simply just saves the json data to whatever “thing” you bind to it. In my experience, it’s usually easier not using the autobind feature, but I left it in since some people have a good reason to use it.

A good place to find a real example is on my example page in bubble here. You can just copy and paste the column json from my example to yours, and you should be able to tweak it relatively easily. If you run into issues, let me know exactly what you’re trying to set up and I should be able to help out!

66

Hi Devpanda

first of all thanks for contributing.

what is the best to display things in your table? how do go about this?

have a great day

67

How many rows can it handle?

68

As many rows as you want! I believe it should run smooth with even 1mil+ rows, but I am curious what your results are if you test it out

69

Hey! I recommend you check out my example where I set it all up here. You’ll also definitely want to check out the documentation. You just need to copy and paste the “column json” settings, and you can edit it to make it your own!

1 Like
70

Hi DevPanda, that worked, thank you.

will probably have some more questions with this is a good start

1 Like
71

Hmm, so from what I undestand, I can only autobind the whole json to one field?
Like, if I display a table with columns A, B and C, with rows 1, 2 and 3, it can autobinds to only one cell in a bubble db, for exemple, it would autobind to a column “user’s spreadsheet” in the Users db, so that each user would get his spreadsheet auto-saved in his row.
And if I want to save the columns and rows A B C / 1 2 3 to specific cells in other columns, I need to map them myself using bubble/javascript, it can’t autobind directly to columns A B C rows 1 2 3 in my bubble db :confused:

And when you say “In my experience, it’s usually easier not using the autobind feature”, it’s that it’s easier to do just a View (just Read data) than to Read And Write (whole CRUD)? (Which is logic without more explanations) Or is it that there is another way of saving data that is easier than autobind?

Happy to help, and thanks to you! To get back to the “how I can make the explanation a lot more friendly / less intimidating”, I think what I would need is a matrice of context → solution. At first, the plugin seams to do everything kind of easily, then you realize the work behind excel/gsheet and you understand that you won’t get the same, then you realize it will be more complicated or limited than expected, then you realize that there are actually different possibilities for different use cases, that have different levels of possibilities and difficulties. What would be great would be to jump right to the last step. Like if you had a matrice saying:

use case Read Read and Save Read and autobind
one bubble table with only simple values (just text/numbers/option sets) setup in 5min with method A setup in 1h with method B setup in 3h with method C
one bubble table with joined values (ex: client’s name, client’s product’s title) setup in 1h with method D setup in 1h with method B impossible
several bubble joined tables (ex: client’s name, client’s product’s title, client’s product’s category) setup in 5h with method D setup in 2 days with method E impossible
a json stored in a cell in bubble (client’s spreadsheet_json) setup in 5h with method F setup in 2 days with method E impossible
json from the bubble api setup in 5h with method D impossible impossible
json from an external api setup in 5h with method F impossible impossible



This would be really awesome, and help me understand what I can do, how, and when (MVP this week with features A, V2 next month with these features for use case B, and use case C won’t be achievable for this reason and that’s life).

1 Like
72

Wow, well appreciate the detail here! I’ll have to sift through this post more later, but I’d definitely be interested in adding a chart like you mentioned to the documentation.

You’re correct that auto-binding simply saves the json data to a text field in the bubble DB. It can’t do anything fancier than that, and unfortunately it’s not possible to do too much more due to the restrictions of bubble plugins. It should be able to read + write to one field.

The other option for saving the json data field, which I’d probably recommend, is to add an action called “when table X is updated” and then save “Table X’s json data” to the field that way. To “read” the json data, have the “column json” field in the plugin panel set to the field where you’re saving it.

If you wanted to do anything fancy with the data like splitting it up, calculating stuff with it, etc., you’re going to need to do that with javascript - which would be innately complicated.

My most valuable use for this however is to send it off to external API’s, since most of them require JSON as the input.

73

Can you place a button to switch pages?

74

Can I recap what I understood and you tell me if I’m correct / what I missed
?

From what I understood, I see 2 main use cases that are relatively easy to build and high:

  1. Displaying a read-only big clean table from an API, full-featured (display the table as needed, + user can search, order, and even add formulas), with one row per record from the API (especially the bubble api to get things from the bubbler’s db, or other third party APIs), with easily 100s/1000s of rows, and when the user clicks a row, we can display a detail view of the record, where the user can edit the thing.
  2. Creating a full featured editable table with autobind, which is amazing, but each table’s entire json must be stored in 1 unique cell in a bubble table, which limits to ±small tables, and it generally means creating a bubble table named “JsonTables”, which stores the jsons (1 table = 1 row).

Then, there ±can be possible to make a big editable table where each jsontable row comes from a different bubble row, but it means lots of hacks, which means dev time + loading time + risks of ui/ux bugs.

Is it the main use cases you have or is there other things that work well?

75

This sounds mostly correct, however the tables shouldn’t be limited to small tables only. I don’t see why having huge tables would be a problem. Also shouldn’t be too many hacks needed unless you’re trying to do something complicated.

I created this plugin because I needed it for a specific purpose, and that was to help with onboarding (by entering details for a list of stores) / sending things to API’s via JSON. That’s what it does best, however I’ve also used it in several other apps I’ve made, like for use in forms, where users need to input several things per item, etc.

1 Like
76

Do you think there could be a way to put html in cells (or another way to format/color texts), or is it a hard limitation of your underlying tech?

77

The plugin looks really promising, but I’m encountering an issue. Whenever I try to display the table at a reduced screen width, it gets cut off in the middle and can’t be fully viewed. I noticed that in the demo you created, the plugin gains a scrolling option as the screen narrows.
Here’s a screenshot:

image
image522×523 6.73 KB

78

This looks awesome but is still developing?

79

@DevoPanda Thanks for this plugin, we purchased it today. Is it possible you could add the “contextMenu” false attribute as an option to the plugin? I’d really like to disable the right click effect.

1 Like
80

Hi there,

I’m curious if the plugin can handle nested JSON files (I need to retrieve data 3-4 levels “down”).

Thanks!

81

The plugin is focused on producing / writing JSON, and won’t read any. As far as making more complex / multi-level JSON, unfortunately that’s not possible out of the box here.

82

Hi, glad to hear that! Apologies for the delay, but I’ve just published an update for this! You can now hide the right clicking context menu. Let me know if you find any issues :slight_smile:

1 Like
83

Thanks for the quick response :+1:

84

Thank you so much! looking forward to seeing the update