# Creating data grid with a select element in each row

**URL:** <https://community.weweb.io/t/creating-data-grid-with-a-select-element-in-each-row/5304>\
**Category:** Ask us anything\
**Created:** [November 8, 2023, 10:20pm UTC](https://community.weweb.io/t/creating-data-grid-with-a-select-element-in-each-row/5304 "2023-11-08T22:20:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sampannemans](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@sampannemans](https://community.weweb.io/u/sampannemans)\
**Post date:** [November 8, 2023, 10:20pm UTC](https://community.weweb.io/t/creating-data-grid-with-a-select-element-in-each-row/5304/1 "2023-11-08T22:20:00Z")

</div>

Hi there,

I have a data grid with a list of users. For each user I want to display the user role as a select element (with a list of user roles which I have in my Xano database).

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/55606744e88ec47676821b82ed8f5539b4cfc6ca.png)

The column is set as a type ‘select’.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d636d2ac6fb6a8246c511ac6f0354aa38d8d6146.png)

However in preview it doesn’t appear to be a select element…

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/0c301aa4b44894a9a0e99492691652d7aabc3dfd.png)

I assume there’s something I’m missing here…  
Any advice?

Thank you!

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [November 9, 2023, 10:02am UTC](https://community.weweb.io/t/creating-data-grid-with-a-select-element-in-each-row/5304/2 "2023-11-09T10:02:43Z")

</div>

Hi,  
the select element is on readonly mode when the row is not edited.  
This is what the readonly mode is looking for a select 🙂  
When you will edit the row, they will appear as a select

---

<div class="post-metadata">

**Author:** ![sampannemans](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@sampannemans](https://community.weweb.io/u/sampannemans)\
**Post date:** [November 9, 2023, 7:44pm UTC](https://community.weweb.io/t/creating-data-grid-with-a-select-element-in-each-row/5304/3 "2023-11-09T19:44:21Z")

</div>

Hi Aurelie,

I found a solution by using a simple table iso. a data grid. I styled the table exactly the same as the data grid, now I can change the dropdown value and automatically save the changes.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b40ddde8284e2a3171dae56519c72fc5f650227d.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [November 9, 2023, 8:23pm UTC](https://community.weweb.io/t/creating-data-grid-with-a-select-element-in-each-row/5304/4 "2023-11-09T20:23:48Z")

</div>

Looks wonderful 😍 Well done!

---

<div class="post-metadata">

**Author:** ![julian](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@julian](https://community.weweb.io/u/julian)\
**Post date:** [April 24, 2024, 12:34pm UTC](https://community.weweb.io/t/creating-data-grid-with-a-select-element-in-each-row/5304/5 "2024-04-24T12:34:10Z")

</div>

I had the same problem. Solution was in my case to set editable for the column to “on”. Then, I was able to access the dropdown when editing a row in preview mode.