# Move Position Of Row In A Table Based On Checkbox Value **URL:** \ **Category:** How do I?\ **Created:** [September 17, 2023, 12:48am UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396 "2023-09-17T00:48:44Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![mriganka](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mriganka](https://community.weweb.io/u/mriganka)\ **Post date:** [September 17, 2023, 12:48am UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/1 "2023-09-17T00:48:44Z")
Hello šŸ™‚ Non techie here šŸ˜¬ I am in the process of creating a very basic to-do list so that I can slowly learn the functionalities of WeWeb and Xano. So far I have achieved the followign: 1. Pull a collection from Xano onto a table in WeWeb 2. When user checks/unchecks the checkbox next to a to-do task, the backend table in Xano gets updated. Iā€™m able to achieve this by using a workflow which is attached to the checkedbox element. Now, I want to achieve the following: 1. When the checkbox is checked (i.e. when value is true), I want the entire row to move to the bottom of the list 2. If the user unchecks the checkbox, the entire row should move back to itā€™s original position How can I achieve this? Thanks in advance for all your help! Attaching a screenshot below: ![Screenshot 2023-09-16 at 20.46.33](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fb93ad7b8957426f96537424d889ee9086a592e4.png) ---
**Author:** ![mriganka](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mriganka](https://community.weweb.io/u/mriganka)\ **Post date:** [September 17, 2023, 2:25am UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/2 "2023-09-17T02:25:09Z")
Good news! I was able to sort of achieve what I wanted to achieve using filters when Iā€™m binding the collection to the table. Hereā€™s what I did: 1. I created another collection below the first collection 2. In the first collection I added a filter when binding, with the condition that it should display only those items whose chechbox value is ā€œfalseā€ 3. In the second collection I added a filter when binding, with the condition that it should display only those items whose checkbox value is ā€œtrueā€ To some extent it worked. BUT, if I checkbox one item, another random item from the first collection shows as checked. However, in the database, the correct values are getting recorded. For example - if there are three items - item\_1, item\_2 and item\_3, and I check item\_1, item\_1 gets filtered correctly and the database in the backend shows that item\_1 has a value ā€œtrueā€. However, in the frontend, item\_3 also shows as checked but in the backend, item\_3 still holds the correct value of ā€œfalseā€. Hereā€™s a link to a Loom recording. Unfortunately my mic wasnā€™t working and I couldnā€™t record the audio. Hopefully it can help - [ Library | Loom - 16 September 2023 - Watch Video ](https://www.loom.com/share/a3b96339aab74de4a54ea7f54a365d49) [ ![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5f59e29514ec6501bfd8b1fb03df2082de94d6f5.gif) ](https://www.loom.com/share/a3b96339aab74de4a54ea7f54a365d49) ---
**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:** [September 17, 2023, 7:41am UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/3 "2023-09-17T07:41:44Z")
Why not just sort the collection input by the value of your true\_false column? You could apply the same logic like @Joyce is using here, but without binding the value and by just simply sorting it by a static condition. [![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/01ffac01ea264c770f25ad5460be7657eaa9e81d.jpeg "Add dynamic options to filter a collection using the select element") ](https://www.youtube.com/watch?v=8e3-qvGb1ms) Or directly sort it in Xano. Btw, you also need to bind the checkboxes to your checked/unchecked value. ---
**Author:** ![mriganka](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mriganka](https://community.weweb.io/u/mriganka)\ **Post date:** [September 17, 2023, 9:55pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/4 "2023-09-17T21:55:07Z")
Hi Broberto, Sorting did help. And I was able to get the condition right. However, in preview mode, when I am checking the checkbox, I face the same issue as you can see in the Loom video I attached in my previous message. A random item gets checked in the frontend, without the corresponding value changing in the backend. So far, Iā€™ve been able to achieve the desired condition using sort as well as filter. But I think this is a front end bug. Any idea how I can go about the front end issue? ---
**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:** [September 17, 2023, 10:00pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/5 "2023-09-17T22:00:29Z")
You need to set the value of your backend checkbox to your checkbox on the frontend and then refresh the collection I think. ---
**Author:** ![mriganka](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mriganka](https://community.weweb.io/u/mriganka)\ **Post date:** [September 17, 2023, 10:12pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/6 "2023-09-17T22:12:03Z")
I could be wrong but I think Iā€™m doing that. Hereā€™s a step by step: 1. User clicks on the checkbox in the frontend 2. Workflow step 1 - calls Xano api and updates the record in the backend. 3. Workflow step 2 - fetches the collection again If I donā€™t add the sort or filter condition to the collection, everything works exactly as I want. The moment I add any kind of sort or filter condition, the front end produces erratic behavior. I even applied sorting logic in Xano backend api call to fetch collection without any front end filters or sorting and the same issue is happening. Below is a loom of what Iā€™m facing. This is with backend api sorting the collection. No filter/sort in the frontend. [ Pynapple | WeWeb - 17 September 2023 - Watch Video ](https://www.loom.com/share/f0fa4f6a23e34feabdd1f70ddaa759f5)[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/be5e0c03fe2f17552a7a350c1963d35a510318a9.gif) ](https://www.loom.com/share/f0fa4f6a23e34feabdd1f70ddaa759f5) This is the frontend behaviour when there is no sort/filter applied either in the backend or the frontend. [ Re: Pynapple | WeWeb - 17 September 2023 - Watch Video ](https://www.loom.com/share/0bb4416cb78b481d8ba87754ae1d10b3)[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/74a5ffc0c32ce94348a2cfc72ccc4d930d776dcd.gif) ](https://www.loom.com/share/0bb4416cb78b481d8ba87754ae1d10b3) ---
**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:** [September 18, 2023, 7:09am UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/7 "2023-09-18T07:09:48Z")
Can you send how the data is bound? I need to see how you determine the checkbox being selected from the backend into your checkbox. Iā€™m 90% sure you have it wrong. Thats what Iā€™m telling and asking you all the time ---
**Author:** ![mriganka](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mriganka](https://community.weweb.io/u/mriganka)\ **Post date:** [September 18, 2023, 6:32pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/8 "2023-09-18T18:32:10Z")
Sure thing. Iā€™m sure Iā€™m doing something incorrectly too ā˜¹ Screenshots below: Here Iā€™m binding the rows of the table to the collection ![Screenshot 2023-09-18 at 14.27.29](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c3a17b4bbdf2a07b521e36d8b20de82a8f47c15f.png) After that, Iā€™m binding the init value of the checkbox element. ![Screenshot 2023-09-18 at 14.28.03](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/77e5665dcc3520580edb105d5a5846bca43976c1.png) ![Screenshot 2023-09-18 at 14.28.26](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8bb3200ddb29584c0e8e788b8cf8d56e9788b7a6.png) Hope this helps ---
**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:** [September 18, 2023, 8:38pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/9 "2023-09-18T20:38:27Z")
You might want to set your checkbox value to a dynamic value from the context, now itā€™s gonna be always false. As you seem to be referencing todo.data[0] ā† fixed index ---
**Author:** ![mriganka](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mriganka](https://community.weweb.io/u/mriganka)\ **Post date:** [September 18, 2023, 9:04pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/10 "2023-09-18T21:04:00Z")
I changed that to dynamic value from the context and the frontend is still showing buggy behavior. Attaching a loom. Am I missing something? [ Pynapple | WeWeb - 18 September 2023 - Watch Video ](https://www.loom.com/share/5d4ddc686d1a4312ad111ea1931a00d8)[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/0897e48f4b88815dccb1442de53f9c6252cf67ef.gif) ](https://www.loom.com/share/5d4ddc686d1a4312ad111ea1931a00d8) ---
**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:** [September 18, 2023, 9:07pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/11 "2023-09-18T21:07:17Z")
Could you look at the value of the unwanted checkbox? What is it bound to? ---
**Author:** ![mriganka](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mriganka](https://community.weweb.io/u/mriganka)\ **Post date:** [September 18, 2023, 9:22pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/12 "2023-09-18T21:22:08Z")
For the checkbox element, I have craeted two states. One is the default one and the other is checked. In the ā€œcheckedā€ state, in the ā€œconditionā€ section, I have binded it using the formula item.data.complete=true ![Screenshot 2023-09-18 at 17.19.19](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/03bfb3abb94e9e6c1ed3323bbc4ad7dfe4631dc5.png) ---
**Author:** ![mriganka](https://avatars.discourse-cdn.com/v4/letter/m/b3f665/32.png) [@mriganka](https://community.weweb.io/u/mriganka)\ **Post date:** [September 18, 2023, 9:27pm UTC](https://community.weweb.io/t/move-position-of-row-in-a-table-based-on-checkbox-value/4396/13 "2023-09-18T21:27:05Z")
Hey! I just managed to resolve the issue. I deleted the entire table and started from scratch and now itā€™s working šŸ˜… I donā€™t know what went wrong here, but its working now. Thank you so much Broberto for pointing me in the right direction, especially with the sort and filter function. I learned a lot in the last few hours thanks to you šŸ™Œ