✏️ 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.