Dynamic Columns in a Table

[kenboer]

I’d like to create a table that has two features:

1 - show and hide columns

2 - columns are not common to all users, but are pulled from the database. For example:
Each row is a song. In the database, users create their own tags and tag groups.
User A may have a tag group (column) “Style” which has values of rock, pop, etc.
User B may have a tag group (column) of “beats per minute” with numeric values.
User C may have their own set of 3 tag groups (columns).

Can anyone point me in the right direction of how to accomplish these features in WeWeb? I am doing a mix of building myself and hiring others to accomplish the parts that are too hard for me or need custom javascript. I am using Xano for the backend.

Here is a visual depiction of what I’m trying to accomplish: Dropbox Capture

[Himanshu (Himanshu Sharma)]

@kenboer did you manage to get it working? I have a similar use case so looking for a solution

[kenboer]

@Himanshu I have not, unfortunately.

[Quentin (Quentin Durantay)]

Hey,

This is not possible with the current datagrid element. You would have to create the layout yourself or customize the datagrid element.

Feel free to add the request here though, we’ll add it to the roadmap: feedback.weweb.io

[edbernal (Edgar)]

Hello Quentin,
if there any update if there is possible to achieve this? I would like to do this and if there is a way to change the position of the columns

thanks

[Broberto (Rob)]

If you have predefined columns and just display them conditionally, it’s a fairly straightforward process.

[edbernal (Edgar)]

I have tried to use conditionals to do it but I have only been able to show/hide which column appears, but not change the position of where each column can be located within the table, Any suggestion?

[Broberto (Rob)]

I just did it in WeWeb so it should be doable. You need to have the columns in an array and then actually bind that for each row.
This way you have dynamic columns. Then you can just move the column objects in the array, and it will change the order of the table columns also.

Check the following setup

then, you just need to change the [columns] array’s items’ place, and you have it working.