[New plugin] Fully Customizable Table / Grid

Hi @andyestridge!

This is at this time not supported. The checkboxes are right now are for the main purpose of selecting rows to perform workflow actions with these rows.

Conditional colors are supported using the css field (there is an example on the demo page). Using a color range is more difficult to achieve as there aren’t really a good css selectors for a range, did you look into a css solution already?

1 Like

Hey @Thimo!
I have some data like “000000” in my database and I need to show it as-is. Right now it shows up as “0” instead. I have a feeling it’s probably a formatting issue on my end. Do you have any suggestions?

Here’s my formatting setup for reference:
Screen Shot 2021-07-13 at 5.36.07 PM

Yes this is probably caused by the :formatted as operator. If you set the data type to ‘number’ you don’t have to use the formatted as operator as the column will then accept just numbers. I think that will fix this for you :slight_smile:

That actually made the column appear empty… It looks like zeros don’t show up at all when used as number type :thinking:

OK thanks!

I’m tinkering with CSS currently & have a couple questions:

  • Does {{value}} always show as a string? I’ve tried using it in places where an integer is required & it doesn’t seem to work.

  • is it possible to expose a row # ? I could do some fun stuff via bubble language if i could “Do a search” and find the data on current row. (or even have the cell value exposed as a bubble thing! that would be :fire::fire:)

Thanks!

That is odd. As it is a number in your database it just should showup. Is it maybe possible to save these fields as a text in your database for showing in the grid? That way you don’t have to use the ‘:formatted as operator’

The {{value}} will be replaced by the value of the column, so I don’t think the datatype should matter. I am not completely sure in your case though, do you maybe have some examples of what doesn’t work?

That are some interesting ideas. Not sure if that would be possible to implement, but I will explore the possibilities! Thanks! :slight_smile:

1 Like

example:

I would like to use the css “calc” function, which doesn’t seem to work with {{value}} inside it. (but does work if i just put a number there)

for the row #/cell value idea, i have a few api’s that i work with that use ids instead of names & i’d really love to not have to pre-process them to get it in a table. (also would open up all sorts of fun stuff).

Ah I see, thank you for the info! I will explore if this is something that could be improved with an update! :slight_smile:

1 Like

Hey Thimo, any updates on the pagination issue?

Hi @Thimo i’m trying to style the column & row borders (the grid basically) and am having a hard time doing it via CSS. Any tips, or can you add options for that in the element? Specifically i’m trying to remove the column borders.

Thanks as always, you are the best!

When performing a workflow action the grid will reset back to page one. For instance I have a toggle element (or button) in a grid column. A workflow action hooked up to the row/column based on a columnName-uniqueId pair. So when the column row clicks and the action is from a column it triggers a workflow. Upon finishing the workflow the state of the grid resets.

If I was on page 3, after the workflow runs it will be on page 1.

If I was sorted on column b, it resets the sort.

If I was searching for value, it resets the search.

Any guidance on how to persist the grid state between workflows or actions?

Last night I was finishing a 12 header table, when I suddenly realized I missed a header. I had to redo half the work, Is there a way to reorganize the header order without having to delete and redo everything?

1 Like

I was in contact with the library creator and he does want to improve the responsiveness of the pagination menu, so hopefully we will see improvements in the coming library update!

If you want to add custom css to the table, you could use the inspect element function inside your browser to make changes to the css on the page and see the result in real time.

I could look into if I can maybe add the oprij to let you specify the column and row borders separately. I think I looked into this in the past and was running into the issue that both borders shared the same class, but I will look again to see if this is possible now :slight_smile:

The table should not re-render after a workflow action. The table does re-render every time the data is changed (or other features of the element). Does your workflow action cause a change of data? If so you could maybe look into preventing this to keep the table from re-rendering

Totally understand your situation here! You could append the columns via workflows to have the ability to easily reorder the workflow action when a change need to be made. Would that be of any help in your situation?

Yes the actions do change aspects of the underlying data. This could be to approve a record or to open the record in edit mode. Is there anyway to avoid the refresh after data change? Or possibly expose an ability to set the search term/page number/ sort column via workflow?

The changes to data are going to be a hard requirement, I’m not sure I can avoid it.

Thanks, that’s what i was doing. I can get to the row borders, but couldn’t change the column borders. I’ll keep trying & report back if i find a way.

Hi @Thimo! Is there a way to retrive “is loading” from a table? Similar to a repeating group. Would be useful to show a loading appearence while data is loading and users don´t get confused.

2 Likes

update on this:
to remove column borders, set grid to white/transparent via element. Then use CSS to set bottom borders of table rows to color.

@Thimo another question/request! I’d love to be able to use an input as the keyword-search. Any chance you could make that magic happen? :slight_smile: (i can do it via db search, but it’s not as snappy as the native search box)

That is a very good feature idea that I could see very useful. The library does not offer ‘on load’ event, but maybe I could use my own logic for a feature like this! Hopefully I can implement a feature like this for you :slight_smile:

This is unfortunately not supported by the library at this time. I think that for now a db search would be the best option, but that may not be the fastest solution like you mentioned. If I find a way to make this work I will let you know!

2 Likes

Ok thanks!

@Thimo Hey, I’m converting to native app with BDK plugin (@gaurav) and the chart behaviour is weird. One chart does show and for other charts the colours of the bars etc are not visible, although data labels are? This is a super important aspect of my app!

@gaurav has asked whether the library is compatible with apple’s wkwebview browser?