✏️ Editable Tables with Formulas / Online Spreadsheet

BubbleSam · May 8, 2021, 8:17am

Online spreadsheet / Excel like tables for Bubble supporting formulas and multiple data types

Check the demo pages to see it in action!

Easy to use plugin with advanced settings:

Can be used like a static read-only or editable table
Create professional Excel-like and Google Sheets-like spreadsheets
Formulas support
Powerful cells. It can contain text, html, number, image, checkbox, radio button, dropdown, calendar…
Cells HTML code support
Export data to CSV
Context menu support
Dynamically add / remove column and rows
Columns reordering
Responsive table automatically adapts to any screen size
Sorting, Searching, Pagination and more!

Demo 1 (Data Types & Formulas): Demo | Editor
Demo 2 (Spreadsheet like Google Sheets / Excel): Demo | Editor

Plugin Page:

Full Description, Documentation & Screenshots

Feel free to post your questions, feature requests and bug reports here!

jared.gibb · May 7, 2021, 11:13am

Nice work Sam!

kevonmayers31 · May 10, 2021, 3:42am

Can you show an example of a workflow to update the database with the edited information for the corresponding cells? I went to the editor for demo 1, but there is no workflow that does that. Also, could you explain the deletion process for rows?

kevonmayers31 · May 10, 2021, 6:21am

I am also running into issues when using data types other than string. Attaching screenshots to hopefully help narrow down the issue. When trying to have a number field shown for example, the cell value is blank, and a column labeled “A” is shown to the left of it. Here is what it looks like:
zip-number-issue

I tested with string data types, and those work. This is an example with the same data (multiple records this time), but the data type is a string instead of a number:

zip-string-working

Still though, every time the page loads, I still see the column labeled “A” momentarily, then only the string based data/column label appears. For images, it just give the s3 file path, and doesn’t show an image. This is an example of that:

Here are screenshots of the workflows and data types for the “Zip” number record, and also the “Zip” string record. It may also be good to note that I tried on multiple tables and the same issue was happening for some reason.

Zip - string data type

Corresponding workflow:

Zip - number data type:

Zip - number workflow

I’d appreciate any guidance you can provide.

Kevon

BubbleSam · May 10, 2021, 9:33am

Here is a small example updating the database: Demo | Editor

The database table has 2 fields: zip_text and zip_number:

In the table we are also using 2 column types: text and number:

Once an event of type “cell edited” triggers, we are ready to update our database using plugin’s shared states (edited_value, edited_col_id and edited_record_id):

PS Please make sure to update the plugin to the latest version if it’s not done yet as a small bug has been fixed.

BubbleSam · May 10, 2021, 9:35am

Regarding the image issue, are you inserting a column of type “image” or “text” ?

lottemint.md · May 10, 2021, 11:54am

@BubbleSam
It looks nice!

If you are looking for an auto-refresh solution, please have a look at the below links.

Video:

Editor:

Preview:
https://just4tests8.bubbleapps.io/version-test/excel
username
password

So, if a thing was updated, created, or deleted by someone else, the workflow automatically sets a new source.

It might be helpful if you add the Output type of a thing here. So, you can make a change directly without doing a search. It will work faster.

BubbleSam · May 28, 2021, 10:46pm

That’s a great advice! Thank you for sharing this!!

I agree with you on this point and this approach was my first idea.
However I chose to populate the table column by column and probably from different database tables (or even calculated data based on other data) to have a more flexible approach.

mr9sky · June 25, 2021, 2:51am

With this, we can now create Airtable in Bubble now

BubbleSam · June 25, 2021, 9:20am

Yep, it should be possible, with some limitations

ahmed · July 4, 2021, 2:46pm

can we get custom formula ?

BubbleSam · July 4, 2021, 4:33pm

Hi Ahmed,

Here is the list of supported formulas:
https://bubble.digital-bird.com/plugins/editable#special-formulas

Do you need something else?

MrMaker · July 6, 2021, 4:36pm

I want to make my own custom formulas
by adding a function or formula name and specify the URL API or a local formula using the JS formula plugin
functions are able to take input/ inputs and return output
every cell has content and actual evaluation
I can pass a dynamic list of inputs (A, B1:Bx, C1:)
I can get status if I am trying to drag a formula (when button drag formula is dragged vertical vs Horizontal)
I can change the input of the formula slightly based on current cell , current column.

BubbleSam · July 7, 2021, 8:21am

Hi there @MrMaker ,

In that case, plugin should store somewhere your formula name, formula handler and execute custom formulas. This is a very complex case and unfortunately it’s not currently supported.

Rolder · July 12, 2021, 4:21am

Hi @BubbleSam,

I have been looking for a long time for a plugin that will help my users insert tables. Yours looks like it hits the target But I can’t figure out how to add new things to the database. I can create them, but I can’t write data from the table to new things. I can’t figure out how to do this, help me

BubbleSam · July 12, 2021, 8:27am

Hi @Rolder ,
Thank you for your feedback and question!

I think you want to do something similar to our Demo 2?

Demo 2 (Spreadsheet like Google Sheets / Excel): Demo | Editor

Please check out the Editor / Workflow and I hope it will be helpful!

Rolder · July 17, 2021, 10:54am

Thank you, I just managed what I was looking for. There is only one nuance left:

Is it possible to fix it through CSS or JS?

BubbleSam · July 18, 2021, 7:27am

Hi @Rolder ,
Are you talking about bottom buttons? I think it should be possible to fix. Probably I can help you if you could share a demo page repeating the issue

jeremy.shubert · July 19, 2021, 3:52am

Great plugin, I have been getting this error recently:

The plugin Editable Table Pro / Excel like / action Add column: Numeric a Editable Table threw the following error: jexcel/[email protected]https://dd7tel2830j4w.cloudfront.net/f1620166158622x557830045438484350/jexcel.min.js:1:21155
jexcel/[email protected]https://dd7tel2830j4w.cloudfront.net/f1620166158622x557830045438484350/jexcel.min.js:1:63040
anonymous/[email protected]_Editable-Table-Pro—Excel-like-initialize–Editable-Table-.js:198:29 (please report this to the plugin author)

jeremy.shubert · July 19, 2021, 4:13am

I’m creating a Dropdown column, it appears that only the first value in option set will show up. I have data in the database, three different option set values. The dropdown column is empty for all rows except where the database value is the first option set. I can change the order of the values in my option set and the new first option set value will be the only entries to display.