# Change Datagrid Row Background Color on Click

**URL:** <https://community.weweb.io/t/change-datagrid-row-background-color-on-click/1289>\
**Category:** Ask us anything\
**Created:** [October 13, 2022, 7:42pm UTC](https://community.weweb.io/t/change-datagrid-row-background-color-on-click/1289 "2022-10-13T19:42:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![patopt](https://avatars.discourse-cdn.com/v4/letter/p/97f17d/32.png) [@patopt](https://community.weweb.io/u/patopt)\
**Post date:** [October 13, 2022, 7:42pm UTC](https://community.weweb.io/t/change-datagrid-row-background-color-on-click/1289/1 "2022-10-13T19:42:33Z")

</div>

How can I change the datagrid background color when I select a specific row? Here is an example.

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

I don’t want to use the checkbox, I just want when someone clicks on it the color is changed.

---

<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:** [October 13, 2022, 8:16pm UTC](https://community.weweb.io/t/change-datagrid-row-background-color-on-click/1289/2 "2022-10-13T20:16:24Z")

</div>

Its not possible for the moment, but we planned to have row color available as a formula, and then it will be possible

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [October 13, 2022, 8:35pm UTC](https://community.weweb.io/t/change-datagrid-row-background-color-on-click/1289/3 "2022-10-13T20:35:44Z")

</div>

I did that actually by creating a custom variable. when click change the value of the variable to the list item key/index, then use if statements in your style. Ex: If variable = key then “red” else “blue”. Same can be done with hover interactions.

Let me know if you cannot figure it out

---

<div class="post-metadata">

**Author:** ![patopt](https://avatars.discourse-cdn.com/v4/letter/p/97f17d/32.png) [@patopt](https://community.weweb.io/u/patopt)\
**Post date:** [October 14, 2022, 7:26pm UTC](https://community.weweb.io/t/change-datagrid-row-background-color-on-click/1289/4 "2022-10-14T19:26:01Z")

</div>

> [@khairul](#):
>
> ctually by creating a custom variable. when click change the value of the variable to the list item key/index, then use if statements in your style. Ex: If variable = key then “red” else “blue”. Same can be done with hover interactions.
> 
> Let me know if you cannot figure it out

Thanks! Could you provide a couple screenshots of how you do this?