How to bind dynamic columns in Datagrid – JSON structure?

Hi everyone :waving_hand:

I’m working with the Datagrid in WeWeb and trying to implement a feature where users can dynamically choose which columns to display.

I see there’s a manual option to add columns in the Datagrid settings, but there’s also the possibility to bind the “Columns” property. However, I couldn’t find clear documentation or examples on what the expected JSON structure is for the binding.

Screenshot 2025-03-26 at 11.53.03

Can anyone please share the correct JSON format to bind dynamic columns in the Datagrid component?
Ideally, I’d like to generate this array based on user input (e.g. checkboxes or a settings panel).

Thanks in advance! :folded_hands:

3 Likes

It would be nice to have the new components such as datagrid open sourced as all of the other components in the weweb-assets directory @Raphael, this way we could answer such questions.

3 Likes

I tried with the new AI but it’s also struggling to find the correct JSON structure :grinning_face_with_smiling_eyes:

This prompt got me a bit closer but it’s not great:

Based on the selected datagrid, can you reverse engineer the JS code to create it in Custom JS?

As I figured it out it is using ag-grid definition of columns. Try playing with this:

[{"headerName":"Column A","field":"a"},
{"headerName":"Column B","field":"b"}]

Do you know if there is a way to customize stuff like type (to use custom), flex width, pinned column, etc.?

I just spent awhile trying to figure out how to do flex columns and date column when binding the columns.

I actually figured it out.

If anyone is still looking for how to do this kind of stuff let me know and I’ll write a tutorial out for it if a few people are interested.

For anyone with the know how, I figured this out by forking the component and looking at the code all the answers are there. There’s lots of options we have with binded columns that weweb has no mention of in the docs. Still seeing what else is possible.

Hey Yaj, mind giving us a quick explanation? hahah

Hey Azu

Which part did you want an explanation on?

it’s fine, I figured some stuff out… There is a “hidden” input for columns I didn’t see haha

Ended up even forking the datagrid and doing some changes to fit my needs better… I love weweb haha

2 Likes