Forum Academy Marketplace Showcase Pricing Features

[New plugin] Fully Customizable Table / Grid

Ah I see. If I recall correctly, the library expects hex colors. Is it a solution for you to drop the transparency and select a new color that is the same you are using right now but without the transparency? That should fix your problem for now. Let me know if this is possible for you in this situation!

I can try this of course, if there isn’t a workaround! What is more important is the alignment error :slight_smile:

@fplassistant hopefully that solves it for now! I will look in this color issue and the alignment issue for you to see if I can come with a fix! :slight_smile:

Will it be possible to set a conditional to check when the table is loading? Right now I can set a preloader to be visible when the entire page is loading, but it would be great to do this specifically for the table itself as it loads data.

Also, and this is a very minor issue, but it seems like the text for certain letters is being cut off in the header (i.e., words that contain the letters “g” or “y”). I’m running the latest version of Chrome. Not a big deal, more of an observation.

I still have problems with randomly changing width of the grid.
Please look at this short video where i show it.

This would definitely be a handy feature! I will see if I can add a way to let you know the table is done loading.

This should now be fixed in the update I just pushed (see update details below) :slight_smile:

This looks to be caused by updating the data of the table while it is hidden. Once the table is being resized it re-renders. I have added the workflow option to re-render the table you can call when switching pages in your case. This will restore the width. Not the solution I am looking for, but should help you out for now :slight_smile: See update details below.

Update 2.22.0

1 - Added the re-render workflow action to re-render the table again:

2 - Fixed a bug that causes the header text to be slightly cut-off.

Don’t forget to refresh your editor after upgrading


@Thimo How can we only show one column at a time using a this dropdown menu idea you mentioned in an earlier reply? At the moment I have one column chosen out of a possible 10 from the drop down. I understand the logic of removing a column and appending one but it is not always known which of the 10 columns is currently being shown?
Is there a way to perhaps reset the table and the append each time a new column choice from the drop down is clicked?

When appending a column, you could in the same workflow set a state or create a data entry that holds the values of the column(s) that are appended. That way you know which columns are appended. Is that somethings that could work for you?

I have added the option to remove all appended columns for you in update 2.23.0! Hopefully that helps :slight_smile:

Don’t forget to refresh your editor after upgrading

Hi, thanks for that, got it all working now!! :slight_smile: Unfortunately there is more, also when sorting I have issues with the numbers being sorted by their first digit, as you can see here 17 and 14 are not top when they should be…

This is probably caused by having the data-type as ‘text’. When having numbers in a column, make sure that they have the data type ‘number’. That way the numbers will be sorted by the actual number and not alphabetically :slight_smile:

2021-07-06 om 12.11.25

Hey yes I already checked this and they are set to number. It’s happening with a couple of them.

The issue is only happening when appending a column from a workflow. Can you recreate this issue?
To be clearer, the data is coming from API but in the API call the data is set to number there.

Not sure if it’s possible but it would be nice if there was an option in the append column workflow to “sort by ascending” automatically so when a new column is added the user doesn’t need to keep cycling the sorting buttons.

Can the pagination be scaled down so it stays on one line and appears smaller?
There is still a issue with the pagination being misaligned. The width of the table is 320.

I just pushed an update (2.24.0) that should fix this issue for you :slight_smile:

This seems to be a library related issue. I have reached out to the creator to and hopefully the next version of the library will have a fix for both issues that I will implement as soon as it is available!

@Thimo I’m still having an issue where the table width pulls back pixel by pixel for each new column if the table is too wide for the horizontal scrollbar. And this is even more noticeable if pagination is active. If the horizontal scrollbar is used, however, there are no issues.

On another note, the table still pulls back to the column’s minimum width if the group it’s in becomes hidden and unhidden again when changing data sources. Although, I did have one instance where I hid the group it was in, then unhid it and it pulled the columns back.

Any ideas? Thanks

I am looking in to this but I am suspecting that it is a small bug in the library. I am in contact with the library creator so hopefully this can be resolved in a timely matter!

I implemented a ‘re-render’ workflow action to reset the table. So when you show the table that was hidden you can call this action and the width will be normal again. This is not the perfect solution, but for now it should do the job :slight_smile: See update details here:

For now I’ve just added some CSS to add to the length of the table based on the number of columns the table is using.

.gridjs-table {
width: calc(100% + Column’s Countpx)

It’s not ideal of course but it works.

I’ll test out the re-render action some time today. Other than that, everything seems to be working great. Thanks!

@unisonapps thank you for sharing the CSS of your workaround. I have now implemented a similar solution to tackle this bug right inside the plugin (update 2.25.0)! So, no custom CSS needed anymore :slight_smile:


You’re the best. Thanks!

Hi @Thimo , i’m thinking about using this plugin & had a question: is it possible to have some checkboxes load as “checked” based on row info?

Also: is it possible to do per cell conditional color range formatting a la sheets/Excel?