Embedding Input.table() into HTML block

I want to embed an Input.table() into a block of HTML, but also be able to select a row and use the value of the selection to show other graphs.

I.e: I have a user table, and when I select the radio button on a row, a graph pops up to the right of the Input.table() corresponding to info for that user.

Right now, if want to know the value of a selected row, I need to do:

viewof selected_row = Input.table(user_table)

But I want to be able to do that in a HTML block like below:

<div style="display: flex; flex-direction: row">
  <div>
  ${Input.table(user_table)}
  </div>
  <div>
  ${/** Show some graph based on selected_row **/}
  </div>
</div>

I know I can’t include viewof ... in the html block, so i’m not sure how to get the value of the selected row.

Any help would be greatly appreciated!

1 Like

If you define a table using something like

viewof t = Inputs.table(...)

in one cell, then t refers to the value of the input and viewof t refers to the dom element. Thus, you can incorporate it into another cell by referring to viewof t.

Here’s an example:

4 Likes

Perfect! Thanks for the quick and clear reply @mcmcclur!