0

I was hoping to make a table that has expandable rows that may stay open when toggled.

I wanted to put the columns with long amounts of text as expandable row details. The problem is when I use "details" in reactable to expand that column it's so wide that it goes off-screen making it hard to read. Is there a way to limit the max-width of the expandable row so it only expands approximately where the column is located?

library(reactable)
library(tidyverse)
library(shiny)
library(tippy)

library(htmltools)
library(webshot)
library(htmlwidgets)

iris2 <- cbind(USArrests[1:32,], mtcars, iris[1:32,])

data2 <-  iris2 %>%
  mutate(Species = 'This text is long and should only show up entirely when hovering because it is making the shape of my table ugly
                    and difficult to read when expanded. This text is long and should only show up entirely when hovering because it 
                      is making the shape of my table ugly and difficult to read when expanded.This text is long and should only show
                      up entirely when hovering because it is making the shape of my table ugly and difficult to read when expanded. 
                      This text is long and should only show up entirely when hovering because it is making the shape of my table ugly 
                      and difficult to read when expanded.') 

data <- data2 %>% mutate(Species = word(data2$Species, start =1, end=8, sep = fixed(" ")))

dog2 <- reactable( data,
                   columns = list(
                     Species = colDef(details = function(index) {
                       paste(data2[index, "Species"])
                     })),
                   striped = TRUE,
                   bordered = TRUE)

saveWidget(dog2, "test.html")

Any help would be much appreciated! Thank you!

(I found this Q and A to be helpful however was still hoping for expandable rows instead of having to hover R reactable _ how to truncate cell content and display upon hovering? )

benson23
  • 16,369
  • 9
  • 19
  • 38
s.libes
  • 61
  • 3
  • 1
    You can add CSS to the HTML table. They use inline-flex and overflow, resulting in long text to be displayed beneath the row – danlooo Feb 22 '22 at 08:32
  • If there's another easier approach that doesn't involve reactable, I am happy to try anything in R – s.libes Feb 23 '22 at 03:43
  • Amazing thank you @danlooo! Would it be possible to show me this with the example code above by chance? Sorry I attempted to add CSS to the table with overflow: scroll but I can't seem to get it to work! – s.libes Feb 23 '22 at 05:07
  • 1
    It's not that easy. The expanded row is in a completely new div element and will be only present if one clicked on the button. There is also JavScript involved. I would search for another R package. Maybe DT has sth for you. – danlooo Feb 23 '22 at 08:14
  • Ok, thank you for weighing in Danloo, appreciate it! – s.libes Feb 23 '22 at 22:54

0 Answers0