[New plugin] Fully Customizable Table / Grid

Hi @matthewbuilds

Instead of hiding and showing certain columns using conditionals, you I would recommend to use workflows to append new columns when needed. Would this work for your integration? The demo page has a showcase of the append column feature for you to look at (;

I will also look into if I can reproduce your issue, but do let me know if the proposed solution will work for you :slight_smile:

Hi @Thimo Thanks for the quick reply. I had tried that originally first, but I noticed that removing an appended column only seems to work (and I may be wrong here but this is what I experienced), if I first add the column through workflows. That being said, I would have to set up a conditional action for each column and Iā€™m already reaching a point where the workflows are affecting page performance. So in essence, it isnā€™t ideal to add more workflows than necessary. Other than that, as everyone knows, your plugins are awesome.

@Thimo I did manage to make it work without conditionals. Turns out, it is possible to do what I need without them and everything still display correctly. It also doesnā€™t cause issues with hiding/displaying certain columns. Iā€™ll keep you updated if I come across any more issues.

Hi @Thimo,

Iā€™m using the checkbox feature to allow someone to select rows and then click a button to upload to an API. However, when I run my workflow to upload the data, the table shows ā€œLoadingā€¦ā€ and doesnā€™t stop showing ā€œloadingā€¦ā€, even if the workflow ran without any issues. The only thing from the plugin Iā€™m using within the workflow is using the list of checklist IDs to filter on the repeating group and the data is already loaded within the table before they start the workflow.

The only workaround I can find is reloading the page.

Is there a bug somewhere or something I can trigger to stop it from loading?

Thank you for any ideas!

@cowlescj I will send you a pm so we can take a better look at the issue you are having! :slight_smile:

@Thimo Found a strange issue.

This happens when I hide a group element with the table inside of it, then show it again after changing the data source through a custom state on the page. But itā€™s only when I go back to hiding the group, changing the data source, and showing it again that the issue occurs.

It looks like itā€™s shrinking the cells to their minimum constraints.

@matthewbuilds Thank you for flagging and describing a way to reproduce the issue! I will look into it and hopefully can find a fix soon! :slight_smile:

1 Like

@Thimo Just to add one more thing to this. The more columns I add, the more the columns start to pull back and create a small notch of space at the end of the table like the screenshot above, but only what appears to be one px or so at a time. It will stay like this, regardless of any kind of setup. Thanks for looking into these!

1 Like

Hi. Is there any control over data driven cell colours? Iā€™m looking to create a heat map and want to colour the cells based on their numerical content.

This plugin has been a game-changer for my app it makes adding good looking charts so easy!

I had a couple of questions if you get a momentā€¦

  • Is it possible to set a max width on columns? Sometimes differences in data cause my columns to have random widths and it would be good get more consistency with maximum widths.

  • Are there any plans for being able to do ā€˜get API dataā€™ for a specific column? This would be super useful to me as it would allow me to populate data for a single column from an external API

Keep up the great work!!

Hi @jamesdevonport!

You can set a min width! This was introduced in the following update:

You can already use an API for the columns :slight_smile: I once created an example of a large set of bitcoin data from an API you can see here:

@Thimo hi!

Is it possible to place a button inside a cell? To trigger a workflow?
I tried without success :frowning:

Andā€¦ can I display my userā€™s picture in the same cell of his name? Also tried :sweat_smile:. Cuz I donā€™t want a cell with his picture and another with his nameā€¦

Thanks so much for this, turns out I had my min widths set too wide so I have adjusted them down.

I think my issue with the API data is that I need to be able to access the current cellā€™s data in order to make the call.

My table is primarily populated by the Bubble DB, but Iā€™d love to add a column that pulls in data from Shopify.

To do that I need to know the current cells ID to make the call, hopefully this explains it a bit betterā€¦

Thanks again for amazing plugin + support :slight_smile:

Hi @Thimo !
Is it possible to allow the app user to edit the column width? Kind of like in Excel where you can drag the edge of the column to change its width.

This is not yet possible and I am not sure if I will be able to implement it, but I will explore the possibilities for you!

Buttons are not yet supported at this time. You can use like for example using the html field and there is an example of that in the demo page. To display the name next to the image you will need a feature like @jamesdevonport talked about to have access to the current cell of the table (see above). This is not yet possible but I am looking into if there are ways to implement a feature like this :slight_smile:

The library actually supports this, but I encountered some breaking errors when implementing this feature. Once these errors are fixed I will definitely add it to the plugin! :slight_smile:

2 Likes

Hey I have a couple of problems.

  1. How can I make it so that instead of showing all columns, I only show one and then have a drop down to display other columns which can be picked by the user?
  2. The pagination background colour is not set to the same as the actual background colour, this may be because the actual background colour is not set to opaque?
  3. The pagination box is not aligned correctly?

Hi @fplassistant, I have answered your questions below! :slight_smile:

When you append new columns via workflows, you can hide/remove them also with a workflow action. You could trigger both workflows when a dropdown changes value to hide/show columns like that. The demo page has an example of add and removing a column for you to look at.

The pagination background color is automatically inherited from the table background. That is why those are both the same color. Is this something you want a separate color option for?

Are you referring to the small gap on the right? I have tried to reproduce that issue but I unfortunately was unsuccessful. I will try the coming days to see where that is coming from because it looks like a small bug :slight_smile:

Hi, thanks for answering! The bottom is not the same colour as the rest of the table so Iā€™m slightly confused?

@fplassistant The table should be the same color as the background color you have setup. For example, when I set thew background to this (very ugly) red color, you can see that the pagination background color also changes:


Hi yes I understand and it ā€œtechnicallyā€ is the same colour, but I have changed the transparency of the background and this has not been replicated in the pagination, hence the different colour.