Poor UX for Multi-Line Strings in Table

  1. My goal:
    Figure out a better way to display multi-line strings in tables

  2. Issue:
    I have a table that has a Markdown column which displays strings that contain line breaks. My issue is that the table doesn't display the full text right now, unless I increase the row height (manually or setting it to dynamic). I would expect (and this is the behavior of the old Retool Table) that when hovering over the cell, it would show me the entire contents of the cell.

This hover behavior seems to exist for JSON columns

I don't want to set row height to dynamic because that will make each row way too big.

  1. Steps I've taken to troubleshoot

  2. Additional info: (Cloud or Self-hosted, Screenshots)
    Cloud

Hey @sf_tech_bro

I try in retool with this JSON:

[
  {
    "id": 1,
    "team": "QA Team",
    "emails": "francisco.ortega@classicfinefoods.ae, laura.aboulker@classicfinefoods.ae, philip.tucker@classicfinefoods.ae, thilini.lewkebandara@classicfinefoods.ae, jeanette.maligad@classicfinefoods.ae"
  },
  {
    "id": 2,
    "team": "Dev Team",
    "emails": "alice@example.com, bob@example.com, charlie@example.com"
  },
  {
    "id": 3,
    "team": "Support",
    "emails": "support1@domain.com, support2@domain.com"
  }
]

From the inspect of the table row height should be dynamic :

And for the email problem you can use the

{{ item.split(',').map(email => email.trim()).join('\n') }}

And if you dont want the dynamic height then also you can use this code into the custom tooltip that can work for you.


Thanks for the suggestion!

Looks like adding a Cell tooltip Add-on to my Markdown cell with value Overflow worked

Produces this result