[New plugin] Fully Customizable Table / Grid

@przybyszfm Yes you can refer to the value of your cells by using the ':formatted as text; operator followed by the ‘:split by’ operator. You can see an example of this on the demo page (column 10):

Would it be possible to have a per cell character display limit? After a certain number of characters the cell would display “…”, similar to the column headers. This could make the table much easier to render.

@sydney22 Yes this is possible by using the ‘:truncated to’ operator in Bubble. You can refer to the value of your cells by using the ':formatted as text; operator followed by the ‘:split by’ operator. You can see an example of this on the demo page (column 10). In your case it will look like this:

1 Like

Awesome! Thanks, @Thimo!

As a heads up, the HTML (CSS) styling isn’t being applied for me on an added column. Same code works just fine on the main table itself. Not a big deal, just an FYI.

Thank you so much for this great plugin. Two questions:

1- Is there any way to know the number of rows populated in the table / grid when it reads data from the database? I would like to hide the table in my app when it is empty by using a conditional statement. Right now it shows “No matching records found” message when it finds no data.

2- Is there a way to prepare a list of values in a column? Let’s say rows are different employees’ information, and column 1 is the employee ID. I would like to get the list of employee IDs. Bubble’s RepeatingGroup enables us to do this. Of course, I can read the data from the database again to prepare the list separately. But I prefer to have one single database call instead of two knowing that the data is already on the client side.

Thank you again!

Hi @Thimo is it possible to let the user select how many rows they want to display per page? e.g. a dropdown with 10, 50, 100 that sets this.

Whether Thimo’s plugin does this, or not, you could use List Shifter to paginate a list of things (whatever they are – well, in this case it’d just be a list of texts) and send that paginated output to Thimo’s plugin… and there you go.

1 Like

Thanks @keith . I’m already using your List Shifter plugin to do this with an RG, I was really just seeing if I still needed to do it that way if I used this plugin instead of an RG. Trying to decrease the number of List Shifters I have on the page, I think current count is 6 :slight_smile:

You cause the :count operator on your data source you use with the table to retrieve the number of rows that are being displayed.

Not sure if I completely understand your question, but Bubble caches your data searches. So when you do the same search again, you should not have to worry about performance :slight_smile:

The input that lets you choose the number of rows per page supports dynamic data. So you can theoretically fill in the expression of the value of the dropdown you want to use to let the users choose the number of rows :slight_smile:

Thanks, yea that’s basically how I do it now with List Shifter and an RG. I’ll give it a try over the weekend to do a bit of a comparison between the plugin approach vs the RG approach.

Hi All,

So far enjoying this plugin however I cannot get the font awesome icons to output nor figure out how to format large numbers with commas (or to change the colour of numbers based on their size using the conditional formatting). Is there something else that needs to be added for these to work?

See this screenshot for font awesome icon example:

Screenshot 2022-03-26 105548

In regards to the number formatting, I have tried to use the “:format as” and select the column as a ‘number’ however Bubble complains that when I format a number with a comma for thousands, it has become a string which is then not sortable correctly. Has anyone been able to just correctly format a large number within this plugin?

Any help would be greatly appreciated.

Thanks,
Robin

Hi @Thimo Trying out the plugin now and have hit a couple of issues.

  1. It doesn’t display 0’s (zeros), the cell is just blank - do I need to do something in terms of format as:? (the source data is a number and it definitely contains 0’s.)

  2. Setting the pagination limit to be the value of a dropdown (so user can select how many rows to show per page) works(ish) but messes up the sort function. If I sort the column and then change the drop-down value to show more rows or I go to the next page, the list is not sorted anymore. (whereas, if I just hard code a number in the pagination limit e.g. 10 then the sort order persists correctly when I go to the next page.)

Is there a workaround for these issues?

I am unable to reproduce this issue. When I load a list of numbers in the table as data type number it gets displayed like expected. Do you have a different setup?

When you change the dropdown that controls a property of the table, the table will re-render. When I replicate your setup, with a dropdown that controls the pagination limit, I can switch between pages like expected without the sort resetting. I have created a demo for you here (including a 0 value in the list of numbers): Pluginpreview | Bubble Editor

Hey @Thimo - Bought the plugin. Very tight. Just wanted to put my 2c in - trying to render a table that shows currency and being able to sort the column value correctly.

If I treat the column data type as numbers, it’s sorted correctly, but throwing a $ in front of it in BBCode/HTML has the problem of:

  1. not being able to control number of floating point integers (i.e. round to 2 digits without some hacky format to text and then convert back to number)
  2. if the smallest cent place is 0 (i.e. like $99.90) will get chopped off and it renders like $99.9. Now, users probably know what this means, but it looks wierd.

Potential solutions:

  1. Potentially allowing for a shadow list of values - one that is for sorting only?
  2. Alternatively, allow user to provide a shadow list of values that MUST be of type text to “override” what gets rendered to user
  3. If currency is the real issue here that needs this, maybe a checkbox for number type columns that “this is currency” and format it as currency for the user but use the number representation for sorting.

Right now I’m doing hacky stuff where I let your table render it as numbers and then trigger some JS to run asyncronously to “correct” the data to be currency formatted. This has the unpleasant effect of numbers getting rendered for a few hundred ms and then getting changed to currency, and the solution feels jank.

Thanks for your effort and appreciate continued development of the plugin.

1 Like

Hi @dmotles_qumulo thank you for sharing your ideas! This number issue is at the top of my list and I will look into what the best way of implementing a fix will be. Your ideas are definitely very helpful, thanks! :slightly_smiling_face:

I use this plugin for lists of invoices a fair bit and being able to have a currency symbol while still treating as a number would be amazing :slight_smile:

Currently I just leave the symbol off which is ‘ok’ but being able to have the symbol would make it very slick :slight_smile:

2 Likes

@equibodyapp @dmotles_qumulo

I have implemented a very elegant solution for the sorting of formatted numbers problem! Update 2.37.0 adds a new checkbox for every column that parses the formatted number as a number in the background to sort that list correctly.

This logic is very smart that it can recognises almost all ways to format a number up to 2 decimals. For example:

“$333.722,42” currency symbol, dot as thousand separator and comma as decimal separator.
“$333,722.42” currency symbol, comma as thousand separator and dot as decimal separator.
Even the sentence: “The total is: $333.722,42 dollar” works :rocket:

Example:

Don’t forget to refresh your editor after upgrading

3 Likes

You never cease to amaze, @Thimo! Can it be configured to work with more than one comma (7+ digits)? Will it work with added columns or only columns that are set in the table itself?

Either way this is a huge feature!

Sort_As_Number

@sydney22 For now it will only work with columns added inside the table properties, but I can definitely look into adding this option to the ‘Add column’ workflow action! Multiple commas are not supported yet, but in that case you can do something like this (divide by 1000):

1 Like