[New plugin] Fully Customizable Table / Grid

It works thanks

Hi All

Anyone know if you can now add a reusable element or button for extra options to the rows?

img111 img222

Thanks

1 Like

Great plugin @Thimo. I was wondering if I could use conditional logic when displaying data in cell. Currently, I am using your html/css snippet for displaying tags in a cell.
I have “order” data type and it has “status” field. Status can be open, closed or cancelled. Based on the status, I want to change background color. Should I use js and select cells by class name & change it based on their text value, or is there an easy way you can think of?

Thanks,

@ferhatg In your case with conditional formatting, I think that the best way is to go the JS route :slight_smile:

Update 2.9.0

1 - Added the option to hide the pagination summary

2 - Added the option to change the ‘No results found’ text

3 - You can now retrieve the value of the search input as an element state.

4 - You can now retrieve the current pagination of the table as an element state.

5 - Fixed a bug where the ‘No records found’ message triggered the ‘cell/row is clicked event’.

2 Likes

Perfect, thanks a lot Thimo!

Great question, @ferhatg- I want to do something similar with tags. What did you end up doing?

Also, @Thimo- would it be possible to use different colors for the Header font color and the secondary font color? I’m using a dark Header BG color and want to use white for the Header font color, but then the pagination text won’t be visible.

Hi @sydney22,

The demo also has a dark header BG with a light font color and the pagination is still visible:

Is this also the style you are going for? If so, it may help to look at the editor of the demo page :slight_smile:

Does this plugin support the integration of data from external api? Or does it only refer to bubble tables? Thanks in advance

Hi @rispoli.mar2803

Data from an API should be supported. Here is demo using the Airtable API. Note that I have used the type ‘Text’ as data type for the columns :slight_smile:

Demo: https://bubble.io/page?type=page&name=api_data_in_table&id=pluginpreview&tab=tabs-1

Update 2.10.0

Columns with data type ‘Number’ are not converted to texts anymore. This will improve sorting.

1 Like

Dark mode is great, but I was aiming for a dark header with white text (i.e., secondary font color) and a light background with dark text. My problem is that white text leaves the pagination buttons blank when they are disabled.

I was hoping to plop an html element onto the table and style the buttons accordingly, but it didn’t work. I tried something like this:

#id9163522 .gridjs-pagination .gridjs-pages button[disabled] { color: rgba(0, 0, 0, 1) !important; }

Is it possible to override secondary font color? Superb plugin, btw. :slightly_smiling_face:

@sydney22 Ah, I see! I will look into if I can let you specify a custom color for the inactive pagination button.

In the meantime, maybe you could try the following CSS in your html element (almost the same but without the ‘id…’:

.gridjs-pagination .gridjs-pages button[disabled] { color: rgba(0, 0, 0, 1) !important; }

Sweet stuff!

1 Like

That would be awesome- thanks Thimo!

This is great. Is there a way you can make a table open for to a community of users to crowdsource the data and then report on each cell of that data?

Update 2.11.0

Added the option to specify a ‘disabled pagination font color’ @sydney22

Boom. Thimo, you are the king! Anyone reading this thread who hasn’t bought this plugin yet: do yourself a favor and get it, stat.

1 Like

Hi @Thimo ,

I need your help about an issue I have.

I try to show a list of data with array in array in array. I want to find the fist element of each sub-array of the first one: (want to show the name of the last event of the last action in my array of users for each user)
[
{name: “franck”
tittle: “dr”
Actions: [
{events:[
{Name : "doSomething"
** date : “2021-02-19”}**,
{Name : “doSomething2”
date : “2021-02-18”}
]
}
]

For now I have the message [object Object] when I try to show it. How to navigate to the sublist?
When I turn the type as text, the data are showered at the wrong row (beause it is a list of event name and not a list of user with the field “event name”)
Could you help me please?

Hi @fr.duhamel

Only lists of texts are supported. Nested lists of things are not supported. The message ‘[object Object]’ appears because you are trying to show an object instead of a text. You can see on the demo page an example of how these lists of texts work (column 6 if I recall correctly). For this to work you should have a ‘list of texts’ field directly inside the thing you are loading. Does this make sense?