🚀[NEW PLUGIN] Table / Grid "Tabulator"

[jdiazarmas]

Hi everyone.

@MindForApps hi and thanks for a great plugin! I was not able to find how to freeze columns and rows with the plugin

would you be so kind to point me in the right direction?

[MindForApps]

@jdiazarmas

would you be so kind to point me in the right direction?

Hello!

I am very glad that you like our work.

Regarding freeze columns:
in the settings of each column (of any type) there is a parameter (checkbox) “frozen”

You can freeze columns on the left and/or right. But at the moment, the work of this function for the new adaptive engine only works for freezing the columns on the left (artifacts may appear when freezing on the right).
The algorithm for this function is as follows:

• at the left edge of the table, you can freeze either the first column or a block of columns including the first column. For example 1 or 1-2 or 1-6 but not 2 or 2-5
• all other columns with the “frozen” checkbox checked will be moved and frozen at the right edge of the table (even if they were in the center of the table, not on the right). Those. the order of the columns will change.

For example, we have a table with columns: 1, 2, 3, 4, 5, 6, 7, 8, 9

• check the “frozen” checkbox for 1, 2, 5, 7, 9
  at the left edge of the table will be 1, 2 will move to the right edge and freeze 5,7,9
  And the table will look like this:
  1, 2 are frozen on the left, then 3, 4, 6, 8 are not frozen, and 5, 7, 9 are frozen at the right edge

• check the “frozen” checkbox for 1, 2, 3, 4, 5, 7, 9
  1, 2, 3, 4, 5 will be at the left edge of the table, 7.9 will move to the right edge and freeze
  And the table will look like this:
  1, 2, 3, 4, 5 are frozen on the left, then 6, 8 are not frozen, and 7, 9 are frozen at the right edge

• check the “frozen” checkbox for 2, 5, 7, 9
  all marked columns will move and freeze at the right edge of the table.
  1, 3, 4, 6, 8 are not frozen and 2, 5, 7, 9 are frozen on the right

Demo on home page:

Bubble - Visual Programming

frozen on the left - “row_num” and “Avatar”, on the right - “Address”

Soon we will start work on a global update of the “Tabulator” plugin with its transfer to the latest version of the library. I think that then the “frozen” function will work correctly in the new engine.

Good luck!

[marcusahle]

Hey I just installed this plugin in hopes it’d be the cure for my data table use case. However, I can’t even get basic functionality to work. I have ten columns in the workflow but it will only ever show 6. If I change the order of the workflow data the first 6 will show but nothing more. Also the header is so thin it will not fit the text. The header text is cut off 3/4 of the height of the text. Any ideas how to make this work?

[MindForApps]

@marcusahle

Any ideas how to make this work?

Hello!

Please give a little more information.

• Have you read the plugin documentation?
• how did you connect the plugin? I do not know how you hooked up and it is very difficult for me to understand what is going on according to your description.
• have you numbered the columns (index_number field)? These fields must be filled in for correct operation.
• did you connect data from one table, or are you trying to connect related tables? This plugin configuration does not support linked tables.

Thank you.

[marcusahle]

Thanks for the quick reply.
I’ve read over the documentation.
It’s hooked to an external api call through the API Connector Plugin.
Columns are numbered.
I am not connecting related table.

Regarding the header, I did notice if I make the layout “fitDataStretch” that the header is displayed properly.
fitDataStretch:

all other layouts:

Here is the workflow showing the 10 columns:

All workflows are filled out similar to the following, just with a different coumns:

But still only the the first 6 fields show in the order I specific. I can rearrange them to show the other fields in the 6, but it will never show more than 6 columns.

[MindForApps]

@marcusahle

It’s hooked to an external api call through the API Connector Plugin.

Hello!

Unfortunately, the plugin works stably with data from the database, but there may be problems with data received from the API.
The plugin in automatic mode cannot determine when the data received from the API is fully loaded. Perhaps this is the reason you are having problems. It’s just that the plugin tries to build a table without getting all the data.
Unfortunately, there is only one way out: try to set a small delay before connecting the columns. Those. in your workflow, set the first step to be “Add a pause before next action” (perhaps 1000 or 2000 depending on the amount of data being received).
Or load the table not by the “Page is loaded” event, but by using, for example, the “Button A is clicked” event. But here, too, if there is a lot of data, then there will be a delay until all the data is processed. (i.e. the table will be displayed on the screen with a delay.)

Sorry, but you can only try these methods.

Good luck.

[marcusahle]

Thanks again for the quick feed back. Sounds like it’s not gonna be able to do what I need. API is only returning an array with one item in it, so if it would have some of the fields it’d have all. Nice product but unfortunately not going to be suitable for what I need.

[jdiazarmas]

Thank you very much for your reply. I am coming back to the topic and have a few questions:

1. Can you save views? Meaning that for example one can switch columns by dragging and dropping, hide columns by “unchecking” them, etc. Can this new view be saved so the user can come back to this view?

2. Is the frozen field dynamic? Meaning that if this field can be affected by outside, for example let my user press a button that is in that cell and then automatically freeze the give column. I was thinking on refreshing the page and load the table with that colum frozen but that can impact the user experience + be very complicated to implement if the user freeze many columns.

3. Is the them dynamic? My user requested me to enable dark/light mode.

Thank you, I understand that these are several questions but who can prevent user´s questions

[MindForApps]

@jdiazarmas

1. Can you save views? Meaning that for example one can switch columns by dragging and dropping, hide columns by “unchecking” them, etc. Can this new view be saved so the user can come back to this view?
2. Is the frozen field dynamic? Meaning that if this field can be affected by outside, for example let my user press a button that is in that cell and then automatically freeze the give column. I was thinking on refreshing the page and load the table with that colum frozen but that can impact the user experience + be very complicated to implement if the user freeze many columns.
3. Is the them dynamic? My user requested me to enable dark/light mode.

Hello!

Today we have studied your questions. And here’s what I can tell you:

2.
Unfortunately, there is no good news here. In this configuration, the plugin does not support dynamic column freezing. Columns are frozen hard when the plugin is loaded and cannot be changed afterwards.
.

.

now the good news:
1.
It is possible to save the configuration (for example, to a database) and then restore it back.
It is possible to get and save:

• “Column Layout” - column layout, column size and visibility (not visibility)
• “Filters” - filter states (in headers)
• “Sorters” - column sorting
• “Page” - current page and number of lines (selected in the footer)

this way you can save the configuration and then apply the saved configuration to the same table. But here you need to take into account that the configuration can be applied to the same table with which it was saved. If you try to apply the saved configuration to another table, correct operation is not guaranteed.

3.
Until now, it was not possible to change styles dynamically.
But today we worked and added this feature.
please update plugin v1.16.6
Now you can dynamically change the themes and styles of the table. It is convenient to do this through “Conditiona”

I made a simple demo on this page:

Bubble - Visual Programming

you can go to the page editor (OPEN IN EDITOR at the top of the page) and see how everything is connected there.
.
.

.
.
.

for 3

The “Dark” button switches styles.
By and large, the styles are configured in the plugin editor and the button only includes custom styles.

.
.
.

for 1

Try changing the width and position of the columns, sorting the data and changing the number of rows in the table. Then click the “Save Config” button. The current configuration will be saved to the database.
Further (for example, after reloading the page), you can restore the previously saved configuration by clicking the “Apply Config” button

.
.
.

“Save Config” - starts the “getSetupOptions” action

.
.
.

further on the event “SetupOptions is created” you get the saved configuration in the form of text and you can write it to the database.

.
.
.
.

“Apply Config” - starts the “setSetupOptions” action

.
.

.

I wrote a lot of text, but in fact, everything is not so difficult.

please update plugin v1.16.6

Good luck.