# Circular reference when try to update a table depending on selected rows

**URL:** <https://talk.observablehq.com/t/circular-reference-when-try-to-update-a-table-depending-on-selected-rows/4709>\
**Category:** Help\
**Created:** [February 25, 2021, 8:35pm UTC](https://talk.observablehq.com/t/circular-reference-when-try-to-update-a-table-depending-on-selected-rows/4709 "2021-02-25T20:35:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lorenzos](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lorenzos/32/7988_2.png) [@lorenzos](https://talk.observablehq.com/u/lorenzos)\
**Post date:** [February 25, 2021, 8:35pm UTC](https://talk.observablehq.com/t/circular-reference-when-try-to-update-a-table-depending-on-selected-rows/4709/1 "2021-02-25T20:35:22Z")

</div>

Sorry for the title, with some more words everything should be clear. Let’s say I have an array of cards to build a deck from. I choose some cards randomly and display them in a `Table`. Then I want to select some of them using the checkbox on the left, and rebuild the deck choosing random cards again, but for the non-checked positions. Think the checkbox like a “lock” command. It’s clear to me why I get a circular reference error, but I can’t find how to fix it. I tried `mutable`s with no look.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [February 25, 2021, 10:18pm UTC](https://talk.observablehq.com/t/circular-reference-when-try-to-update-a-table-depending-on-selected-rows/4709/2 "2021-02-25T22:18:42Z")

</div>

Here’s my take:

> **[Constrained Shuffler / Mike Bostock / Observable](https://observablehq.com/d/2c3ff33c3cc0a4c5)**
>
> Explore and visualize data. Share and publish your insights. Discover and be inspired.

I used a mutable to represent the deck of cards, assigning to the mutable in an event listener that is triggered by clicking a button. The Table show’s the mutable’s value, and thus reacts to the deck being shuffled. Lastly, I used Observable’s “this” to preserve the Table’s selection even when it is redrawn. Using “this” is generally not recommended… but it seems to work well here.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![lorenzos](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lorenzos/32/7988_2.png) [@lorenzos](https://talk.observablehq.com/u/lorenzos)\
**Post date:** [February 25, 2021, 11:30pm UTC](https://talk.observablehq.com/t/circular-reference-when-try-to-update-a-table-depending-on-selected-rows/4709/3 "2021-02-25T23:30:52Z")

</div>

Thanks! I didn’t knew about `onclick=${function}` and `this` as last value, these were the keys to the problem.

I was able to make some progress by making the deck `mutable`, but had issues in refreshing it using `Button`'s `viewof` pattern. Then, I was giving up altogether when I realized I couldn’t preserve the `Table` selection state across shuffles, but the `this` trick is great.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [February 25, 2021, 11:44pm UTC](https://talk.observablehq.com/t/circular-reference-when-try-to-update-a-table-depending-on-selected-rows/4709/4 "2021-02-25T23:44:30Z")

</div>

> [@lorenzos](#):
>
> onclick=${function}

This is something you get with [Hypertext Literal](https://observablehq.com/@observablehq/htl), which Observable Inputs provides so I imported from there. The current `html` tagged template literal doesn’t support this (though there are workarounds with Object.assign), but eventually our hope is to upgrade the standard library to Hypertext Literal once we implement standard library versioning.

`this` is sometimes useful if used minimally, as here. Just be careful with it. 🙂