# How to bind dynamic columns in Datagrid – JSON structure?

**URL:** <https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455>\
**Category:** How do I?\
**Tags:** data-grid\
**Created:** [March 26, 2025, 9:53am UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455 "2025-03-26T09:53:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrii\_r](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@andrii\_r](https://community.weweb.io/u/andrii_r)\
**Post date:** [March 26, 2025, 9:53am UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/1 "2025-03-26T09:53:28Z")

</div>

Hi everyone 👋

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/ddf619c043d5acf9ceab2b9e7a5c15e9fa05b7dd.png)

**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! 🙏

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [March 26, 2025, 9:32pm UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/2 "2025-03-26T21:32:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Melwyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/melwyn/32/5356_2.png) [@Melwyn](https://community.weweb.io/u/Melwyn)\
**Post date:** [March 28, 2025, 12:28am UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/3 "2025-03-28T00:28:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Melwyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/melwyn/32/5356_2.png) [@Melwyn](https://community.weweb.io/u/Melwyn)\
**Post date:** [March 28, 2025, 12:45am UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/4 "2025-03-28T00:45:52Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Dominic](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dominic/32/5645_2.png) [@Dominic](https://community.weweb.io/u/Dominic)\
**Post date:** [March 28, 2025, 8:28am UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/5 "2025-03-28T08:28:22Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [April 28, 2025, 9:26am UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/6 "2025-04-28T09:26:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Yaj](https://avatars.discourse-cdn.com/v4/letter/y/eb8c5e/32.png) [@Yaj](https://community.weweb.io/u/Yaj)\
**Post date:** [July 24, 2025, 3:26am UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/7 "2025-07-24T03:26:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [August 18, 2025, 6:16pm UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/8 "2025-08-18T18:16:41Z")

</div>

Hey Yaj, mind giving us a quick explanation? hahah

---

<div class="post-metadata">

**Author:** ![Yaj](https://avatars.discourse-cdn.com/v4/letter/y/eb8c5e/32.png) [@Yaj](https://community.weweb.io/u/Yaj)\
**Post date:** [August 18, 2025, 10:16pm UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/9 "2025-08-18T22:16:06Z")

</div>

Hey Azu

Which part did you want an explanation on?

---

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [August 19, 2025, 12:55pm UTC](https://community.weweb.io/t/how-to-bind-dynamic-columns-in-datagrid-json-structure/17455/10 "2025-08-19T12:55:29Z")

</div>

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
