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

**URL:** <https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304>\
**Category:** Plugins\
**Created:** [October 6, 2022, 7:22pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304 "2022-10-06T19:22:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [October 6, 2022, 7:22pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/1 "2022-10-06T19:22:47Z")

</div>

Hey guys! I just released a plugin that allows you to add a table / spreadsheet to bubble. After trying all of the paid options available, I still couldn’t find a plugin that would let me properly manage data in my table. (I even offered to pay plugin owners - no luck!)

I wanted users to input a list of info (like addresses and names) and make new bubble data with those inputs. I finally decided to make my own plugin for this, and I think it turned out quite good! Not only does it accomplish this, but it’s flexible enough to be used for almost anything table-related.

You aren’t limited to just text boxes. Choose between text, checkbox, dropdown, autocomplete field, number-only, radio, calendar, image, and color picker. I focused on customization and support. If anyone has ideas to improve the plugin, I’ll try my best to update it.

 ![Screen Shot 2022-10-01 at 3.00.18 PM](https://us1.discourse-cdn.com/bubble/original/3X/7/8/78be8f42085715ebcdcc6fb46fd2b41947adf358.png)

**✨ Features ✨**

- Import your own Json data to display in the table
- Export data as Json
- Custom cell types
- Custom colors / style
- Download spreadsheet as CSV
- Choose between editable or non-editable table
- Make certain columns read-only
- Table searching
- Pagination
- Lazy loading (for large amounts of data)
- Copy / paste from other spreadsheets

🔗 **Documentation**

> **[Intro](https://devopanda.gitbook.io/json-table-spreadsheet-like-excel/)**

🔗 Demo

> **[Bubble - Visual Programming](https://json-table.bubbleapps.io/version-test)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

🔗 Editor

> **[Bubble Editor - Json table](https://bubble.io/page?name=index&id=json-table&tab=tabs-1)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

🔗 Plugin page

> **[Json table / spreadsheet (Excel) Plugin for Bubble, by DevoPanda](https://bubble.io/plugin/json-table--spreadsheet-excel-1663084315427x402334199161552900)**
>
> Json table / spreadsheet (Excel) Plugin page on Bubble, by DevoPanda. Add Json table / spreadsheet (Excel) in one click to your app. Bubble lets you build web apps without any code.

---

<div class="post-metadata">

**Author:** ![JohnMark](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/johnmark/32/42431_2.png) [@JohnMark](https://forum.bubble.io/u/JohnMark)\
**Post date:** [October 6, 2022, 7:43pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/2 "2022-10-06T19:43:08Z")

</div>

Great job and nice documentation. 💪

---

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [October 6, 2022, 7:53pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/3 "2022-10-06T19:53:18Z")

</div>

Thank you!!

---

<div class="post-metadata">

**Author:** ![morisita.hironori](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/morisita.hironori/32/259998_2.png) [@morisita.hironori](https://forum.bubble.io/u/morisita.hironori)\
**Post date:** [January 4, 2023, 9:33am UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/4 "2023-01-04T09:33:10Z")

</div>

hello,  
The table was displayed until yesterday, but today it is not displayed since this morning. The demo screen table is also not displayed.

> **[Bubble - Visual Programming](https://json-table.bubbleapps.io/version-test)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Why?  
Bug in custom code TypeError: Cannot read properties of undefined (reading ‘contextmenu’)  
error is displayed.

---

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [January 4, 2023, 9:26pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/5 "2023-01-04T21:26:41Z")

</div>

Hi! I took a look, but I’m not sure I totally understand the issue. Are you having issues with just the bubble editor? Or are you also having issues getting the spreadsheet to show up on your live site. If it’s the latter, could you copy and paste your column json to me? That’s usually the culprit. (Or if you have a link to your app that would be even better)

---

<div class="post-metadata">

**Author:** ![josh10](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/josh10/32/82900_2.png) [@josh10](https://forum.bubble.io/u/josh10)\
**Post date:** [January 9, 2023, 12:32am UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/6 "2023-01-09T00:32:59Z")

</div>

Really nice work here. Impressive implementation.

---

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [January 9, 2023, 3:08pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/7 "2023-01-09T15:08:02Z")

</div>

Thank you very much!! 🙂

---

<div class="post-metadata">

**Author:** ![blaise.destais](https://avatars.discourse-cdn.com/v4/letter/b/9f8e36/32.png) [@blaise.destais](https://forum.bubble.io/u/blaise.destais)\
**Post date:** [January 10, 2023, 1:41pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/8 "2023-01-10T13:41:32Z")

</div>

Hi @DevoPanda, thanks for the plugin, the demo is amazing!  
Just, there are 2 things I don’t get…,

1. Can I display data from a thing (bubble table row) easily? I guess I need to convert the thing to json with a thing2json plugin, but maybe there is something more straightforward?
2. And more importantly, can I auto-save data to the thing when users edit a cell? (and how?)

Thank you very much ❤!!

---

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [January 10, 2023, 6:08pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/9 "2023-01-10T18:08:25Z")

</div>

Hey, yes! That was one of the main uses I made this for. My main intention was for creating data, however I actually just made a few updates to make editing data easier as well! I added your question to the FAQ section of the documentation [here](https://devopanda.gitbook.io/json-table-spreadsheet-like-excel/faq#what-about-editing-data) and also made an example of this exact use in the bubble app [here](https://json-table.bubbleapps.io/version-test/editing-things). (Check out the editor for it and how to set that up [here](https://bubble.io/page?type=page&name=editing-things&id=json-table&tab=tabs-1))

I just sent the new update out, so it may take a few to see it. Let me know if you still have any questions - thanks!

---

<div class="post-metadata">

**Author:** ![nathicoutor](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nathicoutor/32/156876_2.png) [@nathicoutor](https://forum.bubble.io/u/nathicoutor)\
**Post date:** [January 10, 2023, 6:49pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/10 "2023-01-10T18:49:54Z")

</div>

Any hints on what might be preventing the plugin from showing up on the page? In the editor it seems to be ok, until this morning it was working and I didn’t edit anything in the settings, it just doesn’t appear on the page anymore. I even tried to get the exact same model that is in the plugin demo, but without success.

---

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [January 10, 2023, 7:01pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/11 "2023-01-10T19:01:53Z")

</div>

That’s definitely strange… I’d love to look into it though. If you go into debug mode, does it throw any errors?

---

<div class="post-metadata">

**Author:** ![nathicoutor](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nathicoutor/32/156876_2.png) [@nathicoutor](https://forum.bubble.io/u/nathicoutor)\
**Post date:** [January 10, 2023, 7:08pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/12 "2023-01-10T19:08:10Z")

</div>

The plugin Json table / spreadsheet (excel) / element Json table threw the following error: TypeError: Cannot read properties of null (reading ‘includes’)  
at p ([https://app.treidou.com/package/run\_debug\_js/265512f39543b3d8014b641c0aed001bc72ec3d2bae999d487256e8e5ba2d42d/xfalse/x21/run\_debug.js:6:2187835](https://app.treidou.com/package/run_debug_js/265512f39543b3d8014b641c0aed001bc72ec3d2bae999d487256e8e5ba2d42d/xfalse/x21/run_debug.js:6:2187835))  
at Object.m [as color\_property\_to\_rgba] ([https://app.treidou.com/package/run\_debug\_js/265512f39543b3d8014b641c0aed001bc72ec3d2bae999d487256e8e5ba2d42d/xfalse/x21/run\_debug.js:6:2188851](https://app.treidou.com/package/run_debug_js/265512f39543b3d8014b641c0aed001bc72ec3d2bae999d487256e8e5ba2d42d/xfalse/x21/run_debug.js:6:2188851)) (please report this to the plugin author)

---

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [January 10, 2023, 7:23pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/13 "2023-01-10T19:23:59Z")

</div>

Could you send a screenshot of your settings? Specifically the “style” settings - (if you have a link to the editor that would be even better! Also, a link to the page itself would be useful if possible too)

---

<div class="post-metadata">

**Author:** ![nathicoutor](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nathicoutor/32/156876_2.png) [@nathicoutor](https://forum.bubble.io/u/nathicoutor)\
**Post date:** [January 10, 2023, 7:31pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/14 "2023-01-10T19:31:12Z")

</div>

hmmm!!! Perfect! With your request, I noticed that the column and row colors were off. After including, it came back again. I believe it may have reference to the new Bubble update that came out yesterday. Thanks!!!

---

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [January 10, 2023, 7:32pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/15 "2023-01-10T19:32:53Z")

</div>

Ah awesome! That’s what I was thinking may have happened… I’ll make a fix soon to address that so others don’t run into the same issue. Thanks for posting, and if you run into anything else, I’ll be happy to help!

---

<div class="post-metadata">

**Author:** ![morisita.hironori](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/morisita.hironori/32/259998_2.png) [@morisita.hironori](https://forum.bubble.io/u/morisita.hironori)\
**Post date:** [January 28, 2023, 11:00pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/16 "2023-01-28T23:00:40Z")

</div>

question

1. Is there a way to check (characters/numbers) the values ​​entered in each column?
2. No matter how wide the overall height is, only 7 lines are displayed. I want to show more. The min dimension is set to 10,20.
3. For example, if you specify 2 for Freeze columns, even if you scroll left and right, you expected that up to the second column will be displayed fixedly, but it will all be scrolled left and right.

---

<div class="post-metadata">

**Author:** ![DevoPanda](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/devopanda/32/146641_2.png) [@DevoPanda](https://forum.bubble.io/u/DevoPanda)\
**Post date:** [January 30, 2023, 11:45pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/17 "2023-01-30T23:45:03Z")

</div>

Hey!

1. One easy way to get your column values is by using regex. Wherever you want to use the data, try getting the “data” from the spreadsheet and “extract with regex”. Then you can add some regex like: `((?<="Column name": ")[^"]*)` and this should return a list of results for that column. I realized that you might run into some trouble if a user enters quotes, so I also added the ability to replace double quotes with single quotes instead (you can find that under the advanced options)
2. I see! It looks like this feature was broken on the plugins end - I’ve just posted a new update that should fix this.
3. Unfortunately this feature is also broken with an update I made to the scrolling… I couldn’t find a simple way to fix this, so I’ll have to mark this as broken until I find a better fix ☹ I’ll keep trying on this one to see if I can get a solution.

Let me know if you have any other questions - thanks!

---

<div class="post-metadata">

**Author:** ![morisita.hironori](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/morisita.hironori/32/259998_2.png) [@morisita.hironori](https://forum.bubble.io/u/morisita.hironori)\
**Post date:** [February 1, 2023, 5:18am UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/18 "2023-02-01T05:18:28Z")

</div>

Hi, thanks for your answer.  
Let me ask you a question about the content of the answer.

1. What operation is “extract with regex”. Do you mean settings?
2. I will check with the new version.
3. I’m sorry. I think it would be nice if it could be set.

I’m not good at English, so I’m writing with translation software. Sorry if it’s hard to understand.

---

<div class="post-metadata">

**Author:** ![nathicoutor](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nathicoutor/32/156876_2.png) [@nathicoutor](https://forum.bubble.io/u/nathicoutor)\
**Post date:** [February 2, 2023, 9:59pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/19 "2023-02-02T21:59:43Z")

</div>

Hi @DevoPanda  
What would you recommend doing to correctly convert the numbers? I use a plugin to import CSV that generates a json result, in which the user can see the result in your Json table plugin.

It turns out that the CSV file can come with different numeric formats:  
Default format: 1,000.00  
Alternative format: 1.000,00

Do you recommend, or do you have a way, to interpret this number and generate the correct result? I have a file that the product quantity is 1.500 but the table is generating a result of 1.5

Thanks.

---

<div class="post-metadata">

**Author:** ![nathicoutor](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nathicoutor/32/156876_2.png) [@nathicoutor](https://forum.bubble.io/u/nathicoutor)\
**Post date:** [February 2, 2023, 10:31pm UTC](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304/20 "2023-02-02T22:31:58Z")

</div>

![image](https://us1.discourse-cdn.com/bubble/original/3X/1/5/1567de8a5457dd0788b27a161515ee366822f91c.png)

I tried to put the column type as text, but even typing 1,500 is being automatically converted to 1.5

[Next page](https://forum.bubble.io/t/new-plugin-json-table-spreadsheet-like-excel/227304.md?page=2)
