Forum Academy Marketplace Showcase Pricing Features

✏️ Editable Tables with Formulas / Online Spreadsheet

Thank you very much! I’ll give it a go

1 Like

Hello! This is a great plugin, just what I’m looking for. However, the custom CSS I put in wasn’t working.

I can see the plugin’s CSS well and when I change something on the console that works fine. When I add CSS to an HTML code element on the page, nothing happens. Here’s the code I’m trying to change:

.jexcel > thead > tr > td {
border: none !important;
}

.jexcel > tbody > tr > td.readonly {
color: #000 !important;
}

.jexcel > tbody > tr > td {
border-left: 0px !important;
border-right: 0px !important;
border-top: 0px !important;
border-bottom: 0px !important;
}

.jexcel {
    font-size: 14px !important;
}

Also, I want to format the cells with .toLocaleString() in JS, can you recommend me a way to do it? I was planning to select all numbers somehow since all the columns need that.

Thanks so much in advance!

Hi @peterkimlehner
Sorry for the late reply (I’m so sick these days).

Custom CSS work fine for me:
Editable___Bubble_Editor

Did you insert them between <style>...</style> tag?

Did you check the Toolbox plugin:

Probably it could be useful to pre-process the data (but it could be a bit tricky).

Thank you so much for replying.

Yes, my funny mistake! I forgot to add the style tags as you suggested. I realized that and fixed it. Thank you!

I’ll check the Toolbox plugin too. I believe if I can select all the columns with a var, I should be able to use this function. Could you explain what you mean by pre-processing the data? We have plain number data (mostly integer, sometimes float) but they are +6 digits sometimes. All we want is to format the numbers correctly.

A little update: I’ve been trying to make a for loop which selects all the items and I’ll replace them with the .toLocaleString(). I can get all the elements as an array with .getElementsByClassName(“readonly”) but this is just an array and I won’t be able to populate the cells again. Could you tell me how does “data-x” and “data-y” work so that I can select those with a nested loop and put back the right numbers with DOM manipulation?

If you have a better idea I’d be happy to hear that too.

Thanks for the plugin!

I have a problem choosing a dropdown item when the menu goes out of the bounds of the table. Is there a fix for this? Thanks!

Hi @rein ,
I think it’s possible to solve by adding custom css. Could you please share a demo page that reproduces the issue?

Sent you the link to the demo page with a private message.

@BubbleSam

If I may trouble you with the following questions please:

  1. Can regex instructions be performed on text/list of text displayed in the cells eg find&replace ?
  2. If one text is split across many rows, can changes made to a row update (make a change) to the original text to reflect only the edits made?
  3. Is this possible: text from just one column (eg column 2) is saved while column 1 is not saved?
  4. Can a cell expand to text width/size?
  5. Is styling background and text possible?

My use case is I want to create a translation editor where source language segments are displayed in the first column and their translations are typed and saved in the second column, after which the total of all second column’s segments can then be saved as one text field of a thing

Thank you for the link. You’ll need to add a padding on the bottom of your table.
For example, add an HTML element and replace it content by:

<style>
.spreadsheet {padding-bottom: 200px;}
</style>

1 Like

Hi @phrase9 ,

Thank you for your questions. Your use case is quite complex… I think it should be possible to achieve most of the styling tasks with custom css. However, I’d recommend you to subscribe to the plugin for 1-2 days and test all the features :slight_smile:

Does this support =MAX() or =MIN() functions?

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

Hi @bubblesam,

first your plugin seems awesome :slight_smile: and thanks for having coded it :slight_smile:

I have a question that might be tricky :
i have two tables and i want to be able to display rows from table A as rows, rows from table B as columns and the cells at the intersection would be data from a third table (cells as rows from that third table , and referencing row from table A and row (column in the grid) from table B, as in the image below :

Can this be done … easily ?

Thanks for any answer :slight_smile:
i even take no :wink:

Hi @gmaison ,
Probably the easiest way is to publish a server endpoint that will pre-format table data.
As an alternative, you could also try using the Toolbox plugin