How to bind dynamic columns in Datagrid – JSON structure?

Ask us anything How do I?
1

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
2

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
3

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

4

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?

5

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"}]
6

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