[New plugin] Fully Customizable Table / Grid

@megha.rath for this, you can create a pop-up that will be shown when a user clicks on a cell/row and displays a bunch of inputs for example where the user can edit data. You can take a look at the editor to see how to display data in a popup from the table :slightly_smiling_face: (in the editor of the demo page, keep an eye on the ‘ID data’ fields at the top of the plugin properties)

@Thimo I am seeing the same problem that I need to click 3 times to get the row index or CLICK ID. Any update on this? It is kind of urgent for me to do a demo. Thanks!

@whycu I have responded to your PM (:

Hi Thimo, is it possible to do an alternating row color (like Zebra table)? Can’t seem to find an option for that.

Would also love to be able to do condtional formatting on a particular row. For example in the screenshot below, when my right panel contains the same ID as the clicked row (clicking the row assigns the Part to the panel), I would like to have it highlighted in a different color

Hey @Thimo - is it possible to freeze 1 or more columns - so that only the columns after scroll?

Hi @aiancu A zebra table is not supported at this time, same for the conditional formatting of a complete row. I have placed both of your features on my list so I can explore if it is possible for me to implement! :slight_smile:

I have looked into this and this is not natively supported by the library unfortunately. I will add this feature as a feature request on Github :slight_smile:

Hi @Thimo ,

First, this is by far the best-maintained plugin I have found! Thank you.

A few questions:

  1. Regarding the search keywords box … we lose the content when the data refreshes or the page resizes. Getting and setting it from a workflow will go a long way. THAT’S PROBABLY THE MOST IMPORTANT ONE (FOR ME, AT LEAST).

  2. The current column order is also lost on page resize / data refresh. It will be good to keep it, or be able to get it and set it using a workflow (ALSO SUPER IMPORTANT IMO FOR A CONSISTENT USER EXPERIENCE).

  3. When the table’s data is updated, it loses the checked checkboxes (same with page size changes). Is there a way to keep the checked checkboxes when the page resizes / the data refreshes? In my case, the rows stay the same. Only some of the column information changes.
    Allowing checking and unchecking checkboxes from a workflow can help mitigate that (I could store them in a state and re-apply them to the table).

  4. Same with pagination, we lose it on page resize and update of the data. Maybe if you could allow getting and setting the pagination page from a workflow, that could help.

@alon2
If you don’t want the table to update (e.g. on resize), just check this checkbox:

And use the re-render workflow to update the table manually (when needed).

At this time there are no workflow actions to set the pagination, sort, search and checkboxes. Some are harder than the others. But I have put all those on my list for me to try and implement in a future update! :slight_smile:

1 Like

Hello! I am trying to use this plugin. Is it possible to format the header? For example, can we format the header to break into 2 rows if the name is too long?

Hi @mdong185! Right now it is not supported to style the header texts. I will put it on my list for this plugin! You could in the mean time try to use some custom CSS if you have experience with it to see if you can style the header that way :slight_smile:

1 Like

Hello -

I am trying to set up tabs for different statuses. I am using conditionals in each column based on custom state which is tedious and sometimes doesn’t work!
Video where number of records varies. Is this because I am in debug mode?

Is there a better way of creating this UX with this plugin?

Here is my set up:

  1. Custom states which change based on the click of the tab

  2. Conditionals that change the data source based on custom state

  3. Re/render the table

@mdong185 this setup should work. Not sure why you are re-rendering the table? The table should automatically update when data changes. Please make sure you have unchecked ‘do not refresh table’ as this can cause timing issues when you re-render the table using states.

Let me know if this helps! :slightly_smiling_face:

I have a text field with variable data that I pull from a table. I want to show data from different rows by clicking chevron icons (< >) to switch to a new row’s data. Is the ListShifter plugin the best tool here or should I use Do a search for data#item:table’s clicked row index?

Hi @sydney22, not sure if I completely understand your question, but if you could get the implementation you want without relying on an additional plugin I would recommend that :slight_smile:

1 Like

Hi @Thimo I’ve read through the thread but cant find the answer (and I think it relates to @sydney22’s question)

Can we dynamically add columns? I want to have names in one column and then dates (going day by day) for a dynamically defined period. So each row would be name then a place holder for day which I could populate with BBCode)
Cheers -
Johnnyweb

1 Like

Thank you for the replies @Thimo and @johnnyweb. My use case is akin to merge tags where I do a find and replace: every time I see {{tag}}, I replace it with Do a search for Type’s thing. I want to iterate through different rows of data in my table using arrows :arrow_backward: :arrow_forward: on either side of an input.

Since I’m using unique id = Table’s Clicked ID to pull that data from the table, I thought I could +1 for a forward arrow :arrow_forward: and -1 for a :arrow_backward: to effectively switch through the unique ids. Problem is, unique ids don’t work that way- indices do- so I’m trying to do the same thing by using each row’s index, but I’m not quite sure how.

Yes you can add columns using a workflow action! You can also hide these appended columns using a workflow action. You can take look at the demo page to see how this works: Pluginpreview | Bubble Editor (‘append column’ button)

Yeah, that is not possible with unique IDs. I do feel I miss some context of what you are trying to achieve. Not sure if it helps, but you use the ‘Clicked row index’ you will get the index of the clicked row and you can do ‘+1’ or ‘-1’ using that integer. Does that help?

2 Likes

Exactly, I thought clicked row index would be my best bet. So I would then filter by index instead of unique id?

@sydney22 When you use the index, you can use the same data source as your table and use the “item #[index]” operator after your data source to retrieve that specific item. You can also increase or decrease the index number to get the item before or after it. Does that help? :slightly_smiling_face:

1 Like

Thanks, @Thimo. That was my initial thought. I remembered I tried it unsuccessfully because the popup which contains the dynamic text field was not triggered by a table button (ergo, the clicked row’s ID was never accessed). I think I can hard code the item #index as 0 (or 1 as I believe is Bubble’s custom) and then increase or decrease it from there.