✏️ Editable Tables with Formulas / Online Spreadsheet

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

Check the demo pages to see it in action!

:fire: 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!

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

:link: Plugin Page:

:books: Full Description, Documentation & Screenshots

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

6 Likes

Nice work Sam!

1 Like

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?

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

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.

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

@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.


1 Like

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.

1 Like

With this, we can now create Airtable in Bubble now :stuck_out_tongue:

1 Like

Yep, it should be possible, with some limitations :wink:

can we get custom formula ?

Hi Ahmed,

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

Do you need something else?

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.

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.

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 :slight_smile: 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 :fearful:

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

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

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

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

1 Like

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?

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

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/obj.createCellHeader@https://dd7tel2830j4w.cloudfront.net/f1620166158622x557830045438484350/jexcel.min.js:1:21155
jexcel/obj.insertColumn@https://dd7tel2830j4w.cloudfront.net/f1620166158622x557830045438484350/jexcel.min.js:1:63040
anonymous/instance.data.insertColumn@PLUGIN_Editable-Table-Pro—Excel-like-initialize–Editable-Table-.js:198:29 (please report this to the plugin author)

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.