🚀[NEW PLUGIN] Table / Grid "Tabulator"

[MindForApps]

@jdiazarmas

@MindForApps what is the roadmap for clickable elements (buttons) to be supported in a cell, would be a great addition

Hey!

Well actually we have already done that and are almost done testing.

But it seems to me that this is not an entirely interactive element. One more column is simply added in which there will be icons (buttons). When you click on these icons, you can get a unique identifier for the row (in which the icon is located) and then, on the “Button is clicked” event, start a workflow using this unique identifier.

You can see this beforehand. I tested this here:
https://plugin-preview-2.bubbleapps.io/version-test/test_tabulator?debug_mode=true

We will publish the update tomorrow or the day after tomorrow.

[jdiazarmas]

Thank you @MindForApps !

I will be attentive for the update. Nice weekend!

[MindForApps]

Hello everyone!

Update version 1.9.0

New column type - “button” type.
Add a column with icons (buttons) to the table. When you click on these buttons, you can get a unique identifier for the row in which the button is located, and then use this identifier to start the workflow on the “Button is clicked” event.
The settings for this column are the same as for the others, except for two additional fields:

• Icon - the icon that will be displayed in the cell. You can choose any of the standard icons. Just take the name of the standard icon and remove the “fa” prefix.
• IconColor - icon’s color.
  
  

Good luck to all.

[dario.pratola]

Thank you @MindForApps!
I have purchase your plugin and I think that it is fantastic!
I have 2 question and I hope that you can help me.

1. I notice that in your updated plugin version 1.9.0 if I use column type - “button” type, when I try to use the custom filter to search any value in the table, it doesn’t work. If I remove the column “button” type from the table the custom filter work again correctly.
   CUSTOM FILTER DON’T WORK
   

   
   
   CUSTOM FILTER WORK
   
   

2. I can’t change the font size in the table.
   For example, if I use table theme “bootstrap4” with font “Lato” and font-size “12” (look first screen),
   on browser (chrome, second screen) the font-size is 16px
   

   

Probably I’m loosing something. Can you a feedback, please?

Thank you for your great job and for your help.

Hoping to hear for you soon.

Dario

[MindForApps]

@dario.pratola

Dario

Hello Dario!
I am very glad that you liked our plugin.

@dario.pratola

I notice that in your updated plugin version 1.9.0 if I use column type - “button” type, when I try to use the custom filter to search any value in the table, it doesn’t work. If I remove the column “button” type from the table the custom filter work again correctly.
CUSTOM FILTER DON’T WORK

Yes this is a plugin bug. We added a new type of columns (buttons) a couple of days ago. And apparently missed it in testing.
Now everything is fixed and works as it should.

@dario.pratola

I can’t change the font size in the table.
For example, if I use table theme “bootstrap4” with font “Lato” and font-size “12” (look first screen),
on browser (chrome, second screen) the font-size is 16px

Well, I would not call it a mistake. It’s just that each theme used a different font size. And so far there have been no wishes for individual customization. But you’re right - there should be a font size setting regardless of the theme.

Now you can choose the font size in the same way as font-family. Now everything will work as expected for you.

Thank you for bringing these issues to our attention.

Good luck.

Best Regards.

[dario.pratola]

@MindForApps Thank you for your quickly feedback.
I really appreciate your fixes. I’ve already tried them and all perfectly work now.
If It can be useful for you, I notice that, when I try to use “text_col a tabulator” with the “formater conditional”, if the column header is not a single word, the table will return an error.
I solved writing the column title “Livello di rischio” as “Livello_di_rischio” (you can see it in the precedent point 1 screenshot).
I’m using it in the correct way?

Thank you again for your support.

Dario

[MindForApps]

@dario.pratola

If It can be useful for you, I notice that, when I try to use “text_col a tabulator” with the “formater conditional”, if the column header is not a single word, the table will return an error.
I solved writing the column title “Livello di rischio” as “Livello_di_rischio” (you can see it in the precedent point 1 screenshot).

And again I want to thank you.
I decided not to wait for a big update, but to fix everything right away today.
Now everything works, you can give columns multi-word names and use conditional formatting and everything will work as expected.

Update plugin version 1.9.2

Thanks again Dario.

[dario.pratola]

Thank you!
I have already tried it and it’s perfectly work!!! That’s great!!

Thank you again.
Cheers,
Dario

[dario.pratola]

Hi @MindForApps ,
Sorry to bother you again.
I’ve done several trials but couldn’t solve the following two problems:

1. if I use the column “boolean type” in “editor tickCross” mode, when I click on the value the icon disappears and the graphical value does not change, instead in “editor input” mode it works fine.
   

   
   
   
   

2. when I click on any value in the table, the table returns only the value “rowUniqueId”.
   

   

Can you help me, please?

Hoping to hear for you soon.

Thank you so much.

Dario

[MindForApps]

Hey!

@dario.pratola

if I use the column “boolean type” in “editor tickCross” mode, when I click on the value the icon disappears and the graphical value does not change, instead in “editor input” mode it works fine.

Unfortunately, I cannot repeat this error. I tried different connections and this error does not appear for me.

I created a test page with full access and included the Table / Grid “Tabulator” plugin there.
I sent you a link to this application in private messages. Look and try to connect (reconnect) as you have connected. If I see an error, then I can start solving it.
Maybe this is a bubble glitch and you just need to reconnect your table again?

@dario.pratola

when I click on any value in the table, the table returns only the value “rowUniqueId”.

That’s right, you get the row id (rowUniqueId) of the clicked row.
And then you get the cells associated with this identifier.

You can also use actions in the workflow: “row is clicked” and “button is clicked”

• “row is clicked” - starts a workflow when a row is clicked
• “button is clicked” - launches a workflow when an icon (button) is clicked in a button-type column.
  You can see more details about columns of this type in the documentation, here:
  https://plugin-preview-2.bubbleapps.io/version-test/08_tabulatot_image_rownum

In the application , which I wrote about in point 1, there are examples of connecting “button” type columns.
This application will be at your disposal for a while and you can change the connection or create a new one.

Good luck.

[dario.pratola]

Hi,
thank you very much for the tools you have made available to me and I hope I can be of some help.
Regarding point 1, I’ve been trying all evening to replicate my error on your application but I couldn’t do it. I created a new table on both your application and my application. The tables are the same both as database and as settings but on my application it keeps giving the same error.I have now removed all the data I had created on your application. I will investigate in the next days even if I am discouraged. Do you have any other advice for me?
Regarding point 2, to explain better what I meant, on your application (page “tabulator_06”) I duplicated the table and I created 2 new events (“Row is clicked” and “button is clicked” color blue).
I tried to separate the action of clicking on the row of the table from the action of clicking the button to start two separate actions.I used the “Only when This tabulator columnTitle is/is not” commands but I can’t get it to work. The example is available to you on the shared application. If you try to click on the button, the click also starts the action set for the row.
Am I using the command incorrectly?

I apologize for my less-than-perfect English and hope I was understandable sufficiently.

I thank you very much for your support.

Dario

[MindForApps]

@dario.pratola

Regarding point 2

You didn’t have a big mistake in your example.
You from the element “tabulatorv1.9.2 B” called the popup connected to the element “tabulatorv1.9.2 A”
For this reason, no data was displayed there. I have corrected. And now everything works.

Look again at page “tabulator_06”.

Further.
The “Row is clicked” action invokes a workflow when a row is clicked. On the drain, on any of its cells, and there is no way to localize it in one cell, or vice versa to exclude some cell (as you tried to do).
So it’s better not to hang on “Row is clicked” with any global actions (for example, reloading the page, as you did). Because the page will reload when you click on any cell in the row. “Row is clicked” is best used to get information about an entire row, information about a row element by row id.
If you want to separate actions for different cells, then you can use several columns of the “button” type

[dario.pratola]

@MindForApps

If you want to separate actions for different cells, then you can use several columns of the “button” type

Hi,
thanks for the clarification!
I’ve tried separating the actions using multiple buttons but I can’t.
Can you please give an example? I think it will be very useful for the whole community.

Thank you very much.

Dario

[MindForApps]

@dario.pratola

Can you please give an example?

Oh sure.
On the demo page, I added two buttons and set actions for each one.

Demo:

Bubble - Visual Programming

You can go to the editor (OPEN IN EDITOR) and see in detail how everything is connected.

Pay attention to the condition: Only when “This tabulator’s columnTitle is …” - the binding goes to “columnTitle”.

[dario.pratola]

Thank you so much for your clear example!
I tried it and it works!

Best regards
Dario

[alon2]

Thank you for this plug-in. How well does Tabulator work with a large set of rows? 200 / 1000 / 3000?

I tried it with two hundreds and the page froze (evens after loading, just pagination between pages). Am I doing something wrong? Was it tested with large sets ? This plug-in is exactly what I was looking for, but I need it to work with large sets of data.

Cheers

[MindForApps]

@alon2

How well does Tabulator work with a large set of rows?

Data processing (like all tabular plugins on Bubble) takes place on the client side. So the more data, the longer it takes to process.
Sorry, but unfortunately that’s just the way it is.

[eduardo_calaca]

Olá gostaria de saber como fazer um filtro como esse de itens por pagina

[MindForApps]

Hey!

I understand you have a “Tipos” field which is of type “List of text’s”. And you want to make a filter for this field?

If so, then the demo page has a “List_Text” field and you can see how the filters work. And in the editor you can see the connection.

and

[tadeu.msv]

Hello.

Amazing plugin.
I got some questions:

1- Is it possible to change the row color (similar to when you click on the row) based on a condition/event or you can only do that to the text on the row?
2-Is it possible to change the colors of the table themes (like the color of the row when you hover or the table header…) ?
3- Can i change the language to pt-br (Brasil) ?
4- Can i create a more styled button in the table (ex: text along with the icon and button color , roundness …) ?
5- Can i change the font type ?