✏️ Editable Tables with Formulas / Online Spreadsheet

OK great tx… also had an idea with your context menu… if you added the format option there you could select a cell and assign it… then have another field that matches the col row of the data column to hold the classes for each cell and then apply them… as well as another field for javascript functions (like I am using to round number to two decimal places) That way you can easily assign classes and functions to individual cells… I am also doing this with css to assign specific cells to be non editable using the class you already have for that… as well as the example of assigning $ and % signs…

tx
JR

Thanks for the reply! The solution actually worked for dynamically defining dropdown choices, but I’m getting an error when trying to convert list to a string in data source.

As far I understood from your previous messages, some of your columns can contain a list of objects which you want to convert into a single string.

If my understanding is correct, then you should only convert these column values, not the whole table row.

I’d probably try the Toolbox plugin:

@BubbleSam
Hello.
Why dropdown don’t working?



As we have no access to your data, it’s hard to say what’s wrong with your config.

However, here is a demo page where we are using dynamic dropdowns: Demo | Editor

I hope it will be helpful!

Hello Sam,

I just posted my question on the forum and then came across your post:

Is your plugin suitable for my purpose?

  • Can I use your plugin to replicate my MS Excel template in Bubble, so to speak, so that users can perform the complex calculations online via my Bubble website? (the users enter some parameters themselves in advance, the plugin then calculates all the rest)?

  • Are all common Excel formulas supported? (I also use longer nested formulas in my MS Excel)

  • In my original MS Excel, most of the approximately 5,000 cells are read-only, but certain cells can be edited. Is that also possible with the plugin, to define which cells are readable and which are editable?

Many thanks in advance and greetings
Tom

Hi @sizzling_turtle ,

Apologies for the late reply.
Does the error persist?
The easiest way to understand the reason is to print on the screen the text values you are passing to the plugin.
Generally this error appears when the source data isn’t formatted correctly.
You can also try to display less items in the table (1 or 2 rows for example).

Hi Tom,

Unfortunately, this plugin can not completely replace your MS Excel. It supports some basic formulas: addition, subtraction, multiplication, division, and some special formulas.

We have a demo that stores user data to the DB:

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

Have you checked it?

I’m working on the export to CSV, is there documentation on the options here? The UI is showing over 3,000 rows but when I export it only downloads 1423 … I’m also wondering if there is a way to have it download based on search criteria or other filters?

image

Is there an option of wrapping text in a row? How can we achieve that?

Hi @peeyush ,

Could you please elaborate? If your text contains html tags with line breaks, the plugin can handle it automatically

@BubbleSam not sure if you saw my question a few weeks back, can you help? I am trying to add new editable rows but edits to new rows aren’t being saved to the database: ✏️ Editable Tables with Formulas / Online Spreadsheet - #75 by sizzling_turtle

Hi @sizzling_turtle ,
Plugin fires a Cell edited event and provides a number of related states:

  • edited_value
  • edited_col_id
  • edited_col_title
  • edited_row_index
  • edited_record_id
  • edited_col_index

This is how it works in our demo. Could you please print out all these states? If some values are empty, do you have any errors in the browser console?

That’s probably because your data row around the 1423th contains a character that breaks the CSV format. This shouldn’t happen however because the plugin automatically encodes this kind of characters.

To let us understand better the issue, could you please output the data rows around the 1423th (± 5 rows)? Probably you’ll even find the problem yourself

Nope, unfortunately that’s not possible yet, but it’s a good idea which we should consider in the next release!

Thanks for taking the time to respond … that is a bummer about the not being able to download based on search/filtering, I’m wondering if I can use another plugin to tap into your table? Can’t use this without that ability as users need to be able to download only certain data.

I totally agree with you. We haven’t planned a new release for this plugin yet but we will consider adding filtered CSV export! That’s a great idea

I’ve printed out all the related states. There are no errors in browser console. I am able to add new rows and edit the cells of the new rows, but the edits are not persisted in the database. Here is my app, and the primary table to look at is BuildOrderStepsTable:

  1. Initial state with 2 rows. I edited the cell Gold-2 with the value “24” and I see everything printed out correctly:

  2. Now I add a 3rd row and edit a cell. You can see edited_col_id and edited_record_id are both empty. There are no errors in browser console.

  3. I check my App Data. I search for the table’s rows, and I see the edited value has not been persisted to the database. Food=0 is the default value when a new row is created, so the edited value Food=1 has not been persisted:

  4. And here is my workflow to persist cell updates to the database:

  5. I’m wondering if it could be an issue with my “Add New Row” workflow? I create a new row empty row, then create a new Build Order Steps. Like how do I make sure the new row is associated with the new Build Order Steps record in the database? Ideally I want to keep my existing table structure and not concatenate all the data into a single column like in your demo because that messes up other things, like being able to easily filter the data in other views and having distinct column names:


Great plugin! The only issue I have is that I can’t seem to find out how to get (and then set) column widths?

I have a pretty simple use case that is working otherwise but my users want to set the widths of columns and have them remembers between sessions for the data they are working on.

Hi @BubbleSam, thanks for this plugin! For me the biggest benefit was having a table of data drawn from the database, that could be interacted with and edited by any user/visitor without logging in, and without writing that data back to the database - the changes are on their browser only.

What I am looking to do is have a dropdown of products a visitor can select, and then add that row from the database onto the table. I have it rigged to add a blank line, but I cannot find a combo of Workflow Element Actions that could do this.

I have a help topic posted here as well but didn’t know if what was looking to do was more Plugin specific: Using button to add row from database via dropdown onto temp table

Here is my ‘skeleton’ site: https://know-thy-drink.bubbleapps.io/

Thanks!