🚀[NEW PLUGIN] Table / Grid "Tabulator"

[MindForApps]

@tadeu.msv

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 ?

Hey!

I am very glad that you liked our work.

Regarding questions:
Right now, items 1 - 4 are not available.

BUT:

1. We will see if this can be implemented and how. And if we succeed, we will add this feature in the next update. So far, I can’t give a definitive answer.

2. I just checked. I think (sure) that many colors in themes can be made changeable. Well, at least the color of the row and column header on hover can definitely be controlled.
   Write what other parameters to add and we will add those that will be possible.

3. We’ll do it in the next update.

4. Here, just like in paragraph 1, we need to think about what can be done with it. So far, I can’t give a definitive answer.

5. Here is the easiest. This feature is available now. You can adjust the type, size, weight and slant of the font directly in the standard editor.

Give us a little time and in the next update we will add the features that will be possible (from list 1 - 4).

Thank you.

[tadeu.msv]

Thank you very much for the quick response ! I feel dumb for not realizing that changing the font was that easy. Thank you very much !!!

About the 2 question what i had in mind, for example, was the ability to change the colors of the semantic-ui to look a little more soft or to make a night mode.

How do you change the color of the row and column header on hover ?

I really loved the plugin as there is a great capability for modifications. I will be waiting for the next update with great enthusiasm !

-----//
PS: When i use the boolean column and as a data source : List_A (each item name) :intersect with List_B (each item name) :each item is not empty **( to check whether or not an Item is in a list)… i get a list of yes/no. If i try using that on the tabulator it will show all itens with an X (as if the item is not on the list) , even when it is. When i try to print the output of the intersect on a normal text block i get a correct result of yes/no.

EDIT 2: It seems to be a bubble error or behavior (when the intercept is used it will not return a “no” for the value that is not on the list - thus it will create an empty value). The only problem i have now is that if i turn it on a list of text it will not display (i will try to post here after some more test an example).

EDIT 3: When building a new column can i reference a row thing to display an information ? Ex: I said that i was trying to check whether or not an item was in a list, so i built a column of type stores names (text) witch displays the names of the stores…on another column i want to display if that store is listed on the current user data : Like this (tabulator A column #1 current row value):

By doing this i would be able to check if the item is on a list and display on the column a list of text (yes/no) or list of yes/no (boolean) ** since i can’t find a way to correctly display the search result aligned with the correct row.

[MindForApps]

@tadeu.msv

EDIT 3: When building a new column can i reference a row thing to display an information ? Ex: I said that i was trying to check whether or not an item was in a list, so i built a column of type stores names (text) witch displays the names of the stores…on another column i want to display if that store is listed on the current user data : Like this (tabulator A column #1 current row value):

Unfortunately, this cannot be done. Columns are created at the initialization stage and at this stage the plugin does not know anything about the data that will come into it and about the rows. That is, at this stage we tell the plugin the settings of each column and its name. And only then, after initialization, the plugin will load data into the table.

@tadeu.msv

How do you change the color of the row and column header on hover ?

We will add this in the next update.

@tadeu.msv

EDIT 2: It seems to be a bubble error or behavior (when the intercept is used it will not return a “no” for the value that is not on the list - thus it will create an empty value). The only problem i have now is that if i turn it on a list of text it will not display (i will try to post here after some more test an example).

Look at our main demo page to see how the list of texts is connected. You can go to the editor and see the details.

[MindForApps]

Hello everyone!
An update has been released v1.10.0

1.
Added the ability to color-code rows by condition. (in columns of type text, number and date)
A - you need to select Formatter = condition (this is not necessary with columns of the date type)

B - in section * * conditional formatting to highlight information * * set conditions.

• If the value is - select a condition.
• Reference value - what we will compare with
• color - set cell text color (if condition is met)
• font weight - set the text thickness in the cell (if the condition is true)
• Row background color - set the color of the entire row in which the target cell is located (if the condition is true)

And there are five such blocks. Which allows you to set five conditional selections for a cell.

Important! Each next condition has a higher priority than the previous ones. That is, if the conditions conflict, then the last condition will be executed.

2.
Added a custom selection section for some shell colors.

Here you can change the colors:

• footer and header

• colors of rows and even rows

• background and text color in the filter fields and the “page-size” field in the footer

• text colors in the footer and header

• line color on hover

• column header color on hover

Attention! If you choose a color and then decide to leave this field blank, this won’t work. (this is a Bubble editor problem) In this case, set color = “#000000” and make it completely transparent (move the slider to the very bottom).

Attention! !!! the color of the main text in the table as well as the type, size and thickness of the font will change in the standard font settings.

3.
Added Portuguese language.

Here is an example of what has been done:
https://plugin-preview-2.bubbleapps.io/version-test/test_tabulator

Do not pay attention to bright colors , this is just a demonstration of the possibilities.

There are only 3 points, but in fact, a large number of changes have been made to the plugin code. Therefore, if inaccuracies or errors are noticed, we will immediately correct them.

Good luck to all.

[jdiazarmas]

Hi @MindForApps
i have one small question

when putting a date column with editor type input the value is not recognized as a date but rather as a text. I have tested this by comparing the entered value against a range of dates. Why would that be?

Additionally i believe the date editor type for date column is set to CET Timezone. Iam in a different timezone and it changes the value to 1 day before of the value i enter.

[MindForApps]

@jdiazarmas

i have one small question

That is, the current time of the user is recorded.
This is a feature of working with the “date” object

If for some reason this does not suit you, then you can edit the data in the table not through the “Tabulator”, but through a custom editing window.
For example, when you click on a row (or a button located in this row), you can get “rowUniqueId” a unique identifier for this row and use it to create, for example, a popup with database editing fields. And in this popup, you can already edit the data in the database using standard bubble tools (as you usually do). And if the “trackDatabaseChanges” parameter is enabled, then changes in the database will immediately be displayed in the “Tabulator” table.
If you are interested, I will send you a link to our test application in private messages in which I will make a simple example for the above described.

[jdiazarmas]

@MindForApps

n a row (or a button located in this row), you can get “rowUniqueId” a unique identifier for this row and use it to create, for example, a popup with database editing fields. And in this popup, you can already edit the data in the database using standard bubble tools (as you usually do). And if the “trackDatabaseChanges” parameter is enabled, then changes in the database will immediately be displayed in the “Tabulator” table.
If you are interested, I will send you a link to our test application in private messages in which I will make a simple example for the above described.

Thanks @MindForApps yes please send me this demo app internally

additionally please do not forget my enquiry about date with editor as input not date.

[MindForApps]

@jdiazarmas

send me this demo app internally

I sent a link to the test app in private messages. Also, there is not a big instruction.
The application has full access and you can change or add something yourself.

[andrew.waites]

Hi

I am trying to include a geographic location (actually just the formatted address) but I cannot work out how to do that. It would be great if you had a default handler for geographic location that just returns the formatted address so we could include in a text column.

tx

[andrew.waites]

Hi

I have looked here for sum, tally, etc. My apologies if I am missing this. It would be VERY useful to enable column (sum/average) in the footer row.

tx

[andrew.waites]

Hi

I am being a pain today. Again, I think this must be here somewhere but for the life of me I cannot find it, percent formatting of numbers??

tx

[MindForApps]

Hey!

@andrew.waites

I have looked here for sum, tally, etc. My apologies if I am missing this. It would be VERY useful to enable column (sum/average) in the footer row.

@andrew.waites

I am being a pain today. Again, I think this must be here somewhere but for the life of me I cannot find it, percent formatting of numbers??

Unfortunately, these features are not implemented. The library we use for the “Tabulator” plugin does not support these features.

For percentage formatting, there is only one way out: create an additional field in the connected table and format the data in it in advance. And then connect this field as text.

I’m sorry, but that’s just the way it is now.

[andrew.waites]

Hi

I’m sure this has been asked before but I couldn’t find it. Do your sorts/filters happen front-end and, if so, is there a reason why we can’t set the columns up as all using a RG list of things as their source. i.e. just load the RG then have all the columns point to that list rather than do the search every time for every column?

tx

[bansalmohit]

Hello.

I have images in the form of URLs stored in the database. Can we show/embed them in the column as images?

Also can we rename “Filter column” placeholder text?

Thanks!

[bansalmohit]

Also another query. I have a Data Type “Music” and in it a field “Artist” which is a User. I am just not able to Display this Artist/Users first name.

In the Tabulator element and workflows, the Type of Content is ofcourse “Music” as that what the table is essentially displaying.

Pls help!

[MindForApps]

Hey!

@bansalmohit

I have images in the form of URLs stored in the database. Can we show/embed them in the column as images?

I’ve added the ability to paste URLs as text to display images.
Just connect the data from the database to a column of type image_col.
That is, now you can connect data of two types to columns of type image_col (image and image URL in text form)

But note that when using “image” type data, we are using Imigix to compress the images. That is, you do not need to worry about the size of the images, the plugin will do it.
But if you use the URL of the images in text form, then Imigix will not be used and the table may take longer to load.

@bansalmohit

Also can we rename “Filter column” placeholder text?

Added custom header filter placeholder.
It’s in the table settings in the “other” section

You can enter whatever value you want, or if the field is empty, the default placeholder is used.

@bansalmohit

Also another query. I have a Data Type “Music” and in it a field “Artist” which is a User. I am just not able to Display this Artist/Users first name.

In the Tabulator element and workflows, the Type of Content is ofcourse “Music” as that what the table is essentially displaying.

Unfortunately, you won’t be able to connect like that.
When developing this plugin, we had to drop support for linked tables. We chose between the ability to have an unlimited number of individually configurable columns and the ability to work with related tables. We chose the first one.
Our developers collect all the data into one table in the database and connect it to the plugin.
Sorry, but that’s just the way it is.

Please update the plugin to the latest version 1.11.2

Good luck.

[bansalmohit]

Thanks for the support and feature additions

@MindForApps

Our developers collect all the data into one table in the database and connect it to the plugin.

What does this mean? Am i not doing the same thing? Adding the User data in the Music table. But still the plugin is not fetching User information from the Music table.

[Future]

could you post a demo with the responsive behavior?
Thanks!

[MindForApps]

@bansalmohit

What does this mean?

Hey!

You are using linked tables. That is, in your table there is a link to another table.
And our developers duplicate data rather than using linked tables. The data is located directly in the table connected to the plugin, and not in another table associated with it.

[MindForApps]

@Future

could you post a demo with the responsive behavior?

Hey!

I want to thank you for this question. It turns out that in one of the last updates I broke this function. And the responsive layout didn’t work correctly. Thanks to you, I now noticed it and corrected it.
Please update the plugin to the latest version (1.11.3)

I created an additional demo page with a simple demo of the responsive layout:
https://plugin-preview-2.bubbleapps.io/version-test/11_tabulator_responsive
.
.
.

There are two simple examples on the demo page:
1. - only layout = fitColums and responsiveLayout = true are used without additional column settings.

When you resize the page, the width of the columns will also change.
.
.
.

2. Let’s additionally set up some columns
(we will hide some columns when changing the width)

• Name - add value “width” = 200
  The width of this column will always be 200px and will not change on responce
  

• add “minWidth” values ​​to other columns
  Column width will not be less than “minWidth”
  

• add the parameter “responsive” to the columns “Age”, “Email” and “Married”
  (“Age”: “responsive” = 3; “Email”: “responsive” = 2; “Married”: “responsive” = 1;)
  The higher the “responsive” value, the earlier this column will be hidden when the table width is reduced.
  Thus, when reducing the width of the table, the “Age” column will be hidden first, then “Email” and the last column “Married” will be hidden
  

.
.

These are simple examples, but you can use more advanced settings. To adjust the responsiveness, you can use the parameters in the columns:
width, minWidth. maxWidth, widthGrow, widthShrink, responsive

Under each parameter, we have tried to give a detailed description.
For example:

Goodluck.