Limitations of the table component or something I'm doing incorrectly?

💬 App Building
, , ,
1

  • Goal: I want cells in a table to dynamically show one string or another based on the state of another component (player.isPlaying) in the module.

  • Steps:

    1. Put a table and a custom component called player onto the page. This component has an isPlaying boolean state.
    2. Configured a string column with a mapped value of {{ player.isPlaying ? "foo" : "bar" }}. I also tried player?.isPlaying, but this made no difference (I didn't expect it to).
    3. :white_check_mark: The resulting mapped values look correct ["foo", "foo", "foo", ...]
    4. :x: The resulting cell shows an empty string.

  • Details: I'm self-hosted on version 3.178 and using the out-of-box Table component. The component it's inspecting (player) is a custom component. I receive no error messages. When I'm focused in the 'Mapped value' field, the results it shows me are correct, but only when I reference the isPlaying property.

Here's what I mean:

  • {{ player.title ? 'foo' : 'bar' }}
    • Mapped value result: ["foo", "foo", "foo", ...]
    • Cell contents: "foo"
  • {{ player ? 'foo' : 'bar' }}
    • Mapped value result: ["foo", "foo", "foo", ...]
    • Cell contents: "foo"
  • {{ player.isPlaying ? 'foo' : 'bar' }}
    • Mapped value result: ["foo", "foo", "foo", ...]
    • Cell contents: "" <--- :fire: why is this empty?

player.isPlaying exists. I see it in tooltips, I see it in state, I see it if I console.log(player.isPlaying) as part of my Mapped value code, and the mapped value result Retool shows me is consistent with it existing and being true. Everything looks correct except for the final cell contents display, and only for this one prop.

Please help.

Mark

2

After typing all of that up, I found that refreshing the editor fixed it. I'm leaving the thread for posterity in case anyone else gets stuck on this bug.

2 Likes