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

[bda233]

Hi, this is a great plugin and works perfectly when handling JSON data!

I just have an issue that I can’t seem to fix. The height dimension of any table appears to be fixed around 10 - 12 rows, leaving blank space below. There’s also a grey horizontal bar at the bottom (after the blank space) where the element is supposed to end.

I’ve tried updating to the latest version as well as modifying the minimum dimensions. Nothing seems to fix this issue.

It will be really appreciated if I can get support around this!

By the way, this is not really advertised but I think it’s a killer feature. With this plugin you can work with any type of arbitrary JSON data pulled from external APIs, completely bypassing Bubble limitations.

Thank you for the ongoing work and updates!

[bda233]

@DevoPanda
Ok so I did some digging and the issue appears to be the default configuration in jexcel.js, specifically the tableHeight variable (set at 300px). Once I’ve changed this in the inspector, the table was able to extend vertically.

I have no experience with javascript and could be totally wrong. But if this setting can be added to the bubble UI it would be really appreciated!

[DevoPanda]

You’re right! I’m surprised this hasn’t been pointed out before. I just published an update that should resolve this issue, and the height should be working as expected now.

@bda233

By the way, this is not really advertised but I think it’s a killer feature. With this plugin you can work with any type of arbitrary JSON data pulled from external APIs, completely bypassing Bubble limitations.

Yes! That was definitely the main goal of this plugin - Couldn’t find anything else like it, so decided to make it myself!

Let me know if you run into any other issues and I’d be happy to help

[minh.iae]

@DevoPanda Hey Jared, awesome plugin! I wish I found it earlier

Is it possible to do the following actions ?

• edit column names directly on the table
• delete a row

Cheers

[DevoPanda]

Hi, glad to hear it’s useful! What do you mean by editing columns? Do you mean the column titles at the top?

As for deleting a row, if I remember correctly, you can right click and there should be an option to delete the row there. Let me know if that works!

[minh.iae]

Hey @DevoPanda

I meant changing the column titles at the top. Is it possible?

Also when everything is empty and I try to add data. Isn’t it supposed to update the json data? It seems to work only when there are column names. When it’s A, B, C, etc, the json won’t update.

Thanks for your clarifications

[DevoPanda]

Hmm that’s very interesting, I think I’ll have to take a closer look later when I get home.

To change the titles at the top tho, you can check out the documentation here, and add a value for “header”.

I can give some more detailed help later today!

[minh.iae]

Thanks, I just checked with Excel and titles (A, B, C, D, etc) can’t be edited. But in your case, it can be with Column JSON Setup. I need my users to be able to update the titles dynamically. Just let me know if it’s even possible

Then I need users be able to edit a blank table and it updates the json accordingly.

I will let you check when you have time, thanks for your help! That would be awesome if this works.

[DevoPanda]

Just looked more into your questions, and I can’t find any easy way to implement dynamically changing the titles. However, you could always change the JSON dynamically using “dynamic data” in bubble. For example:

{
    "id": "a",
    "header": "<USER INPUT FROM BUBBLE>",
    "order": 1,
    "type": "text",
    "columnWidth": 200
},
{
    "id": "b",
    "header": "<USER INPUT FROM BUBBLE>",
    "order": 4,
    "type": "text",
    "columnWidth": 150
},

As for the second question, that’s definitely not supposed to happen, and the json should still be generated. I’ll patch this bug so that works properly in the future - in the meantime, if you add one of these for each column, that should allow the json to generate properly. (you can just make the ID’s “A”, “B”, “C”, etc.:

{
  "id": "A"
}

Let me know if I misunderstood something, or if you have any other questions!

[minh.iae]

Hey @DevoPanda, thanks for looking at it!

1/ I really need my users to add headers dynamically without using inputs. Maybe I can do like Excel and let my users fill the first row as the header. Would it be possible to have then json data’s headers?

2/ Thanks for looking at this, will wait for your answer.

3/ Is it possible to add delete a row please?

Cheers,
Minh

[minh.iae]

Any news @DevoPanda ? 🥹

I can help with code if needed. I really need this to work

Thanks!

[DevoPanda]

Big apologies for the delay! I was on vacation and just got back.

1. Currently there’s no way to edit these right in the plugin. I looked into it a bit and there wasn’t a super easy way to implement this either. I’d say your best bet is probably to have the first row act as your header row instead, or add an extra column to handle these names instead. If this is a super important part of the plugin, I can probably come up with a custom solution for you and add it in, it’d just need to take a bit before I could get to updating it.
2. If you make sure the “ID” fields are always filled out, this should fix this issue still btw
3. There is a built in action to add a new row - you can hook it up to a button. You can also simply right click on the rows to add one before or after. If you want to get fancy with it, you’d need to edit the JSON data with some workflow instead

[morisita.hironori]

Hello,
I always use it.
I have two questions.
Q1: When I specify “Mask: 0”, 0 values ​​are displayed blank. Is there no way to display it?
Q2: Is there a sorting function for table data?

[minh.iae]

Hey @DevoPanda, no worries! I hope you had great vacation

Thanks for your answers! May I suggest:

1/ If we have the first row act as a header row instead, would it be possible to have an output to get the headers? (i.e. json data’s headers)

2/ If I have the first row act as a header, I will fall into this issue because it will not have IDs therefore it will not update the json data. Kinda stuck

3/ I’m looking for a way to “delete a row” instead of adding a row (which works fine). This one is very important as a lot of users are asking me how to delete a row

If you need anything from me, I’m happy to help or even help you maintain the plugin if you don’t have time. I badly need this to work

[DevoPanda]

Hi! I see… both valid questions!

1. I notice that the same bug is also present in the demo for this plugin. There is however a quickfix that you can use for now until I figure out what’s wrong. Simply check off the “replace quotes” option in the settings panel, and that should do the trick!
2. I’ve just updated the plugin to add a sorting function!

[DevoPanda]

1. So, I’ve just updated the plugin to add some new features. First of all, I’m working on making a way to update the column headers right in the plugin. You’ll see an experimental feature for column renaming. This won’t touch your existing column JSON, however it will at least export the list of column names.
   Although complicated, you could get creative and add these items as the “header” field in the column JSON.

2. You’re right, you’ll always need to have the column JSON filled out, and you’ll always need to put something in for the ID’s. I can soon work on a fallback for this so this doesn’t happen, however I don’t think this should stand in the way of you accomplishing what you need in this case.

3. I see, there was no way to delete rows. I just updated the plugin to allow you to right click and delete a row. Check it out in the experimental settings.

With the right creativity, this could be enough to hack together what you need - However I realize it’s far from ideal, and will be thinking of a better way to accomplish this over the next few days

[blaise.destais]

Hi! You plugin seams totally awesome, but i’m still afraid of trying to set it up, it seams complicated with the api etc. Do you have a really step by step tutorial or video for creating a table to edit the first and last name of a client for example ? Thank you so much!

[DevoPanda]

Glad to hear you’re interested! I know, a lot of plugins I try are horrible to set up with bad documentation – I tried my best to make a very detailed documentation that should help you set it up very easily! Check out the doc page here

You can also see an example of how I set up a basic table on the example page here - also let me know if you have any questions along the way!

[blaise.destais]

Ok, through the examples I saw that some things I thought would be very complicated are in fact actually really simple !

Yet I didn’t see a concrete full example of how to unable auto bind or click-to-save in the examples, I’m not sure exactly how to use the API, how it works etc…
Same thing, would you have an example of working with joined tables? Like if I want to display and autobind the fruit.title column and the fruit.category.title column, is it possible/how does it work?

Sorry, I really learn by examples, when I saw your doc with big jsons I was like “aww I will need to setup all this it’s scray”, while actually it’s just [search for fruits:format as text]
Thank you so much

[morisita.hironori]

Hello
Thank you for implementing the sort function. Thank you very much.
The case of 0 display does not go well.
I am checking the checkbox
I’ll try it some more.