Forum Academy Marketplace Showcase Pricing Features

[New plugin] Fully Customizable Table / Grid

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

Excellent- nice idea :+1:

I did receive this error when I got up around 350 rows and the table wouldn’t load. I’ll try to make some adjustments to see if it wasn’t a cell width issue.
Table_error

Hi @Thimo ! Just wondering is there an option to have the checkbox column at the end of the table rather than the start?

Just tried it out - thank you. This allowed me to remove a bunch of janky javascript code that I was running in the page that I would try to get to run after the table rendered to go and convert columns with numbers to currency. This was causing numbers to flicker and made the app feel glitchy. Having the plugin have an option to treat a text column as a number is a huge improvement.

Your continued investment in your plugin is appreciated. Thank you.

hello thimo, I am working on a project, and I am also fairly new to bubble, I would like to know if you are able to produce a conditional formatter (like the one seen above), but with numbers instead, and also formatting them so they are <=, >=, < and >, if you are able to let me know if this is possible, it would be greatly appreciated :slightly_smiling_face:

This is in the current version of the plugin not supported unfortunately. I will put it on my list to see if I can give you more freedom for the checkbox column placement.

If I remember correctly, CSS operators don’t support formatters like that for numbers. I will explore if there is a workaround for this and I will let you know if I find one! :slight_smile:

that’s brilliant, thank you, also is it possible to make the table a certain height and allow the ability to scroll downwards?

@bubble63 The table will expand to fit all the rows. If you want a more compact table you can enable pagination and set a certain row limit per page :slight_smile:

okay, thanks again

Hello I’m using a dropdown to change the value with a constraint, but its not updating after the first time, it stays in the same constraint value, I have to refresh the page for it.
image
This is an example, outside I have a dropdown, and I can choose a value, then I open a popup that has a table/grid, but when I change the dropdown, it does not update. Thank you

@GerLC Not sure what goes wrong here. You could try to use the ‘Re-render’ workflow action for the table to re-render the table once it gets visible in your popup. This could force the table to update the data :slight_smile:

Hi @Thimo I use Table/Grid and I’m having a problem. On mobile the tables do not have horizontal scrolling like your example. What could I be doing wrong?