How can I introduce a new line within a column using DTedit and shiny::uiOutput?

Question

I am using the DTedit pckg to display a dataframe (mydata) in a shiny app, as this simple R pckg allows me to add/editing rows in a very simple way. So far so good. HOWEVER, I would like to introduce a new line (or line break) in the Var2 column, separating the FIRST from the SECOND line, and the THIRD from the FOURTH line.

I have been able to do this using DT::dataTableOutput (Option 1 below). However, the DTedit seems to only work with shiny::uiOutput, and I have been unable to introduce the new line there (Option 2). I have read about div(), but I am absolutely clueless for now.

Can someone shed some light how can I introduce a new line within a column of a dataframe using Dtedit- therefore shiny::uiOutput?

NB: I have concluded that shiny::uiOutput is the issue here because is the only "obvious" difference I can see between the two options. But that is just me, it could be something less obvious that I am missing.

PD: this is my first post so please educate me if something could be done better. Thanks!

# OPTION 1: using DT (DT::dataTableOutput) (WORKING)

    ui = fluidPage(
      h3("New line works when using DT (DT::dataTableOutput)",
      mainPanel(
        DT::dataTableOutput("mytable")
        )
      )
    )

    server = function(input, output){

      #dataframe
      mydata <- data.frame(Var1 = c("a", "b"),
                           Var2 = c("FIRST LINE: first; SECOND LINE: second", 
                                    "THIRD LINE: third; FOUR LINE: four"))

      #Subtitute semicolon by break line based on 
      #https://stackoverflow.com/questions/26368192/how-to-insert-new-line-in-r-shiny-string
      mydata$Var2 <- gsub(pattern = "; ", replacement = "<br/>", mydata$Var2)

      #render table
      output$mytable = DT::renderDataTable(escape = F,
            mydata
        )
    }

shinyApp(ui = ui, server = server, options = list(height = 1080))

# OPTION 2: using DTedit, therefore shiny::uiOutput, (not working)

    ui = fluidPage(
      h3("New line does not work when using DTedit-shiny::uiOutput"),
      mainPanel(
        shiny::uiOutput("mytable")
      )
    )

    server = function(input, output){

      #dataframe
      mydata <- data.frame(Var1 = c("a", "b"),
                           Var2 = c("FIRST LINE: first; SECOND LINE: second", 
                                    "THIRD LINE: third; FOUR LINE: four"))

      #Subtitute semicolon by break line based on 
      #https://stackoverflow.com/questions/26368192/how-to-insert-new-line-in-r-shiny-string
      mydata$Var2 <- gsub(pattern = "; ", replacement = "<br/>", mydata$Var2)

      #render table
      output$mytable = DT::renderDataTable(escape = F,
                                           DTedit::dtedit(input, output,
                                                          name = 'mytable',
                                                          thedata = mydata)
      )

    }

shinyApp(ui = ui, server = server, options = list(height = 1080))

WANTED OUTCOME:

Wanted outcome

ACTUAL OUTCOME so far:

Actual outcome

Welcome to SO! Have you tried wrapping e.g. `mydata$Var2` in `HTML()`? Btw. you can also display your pictures within your question. — Tonio Liebrand, Jun 14 '19 at 07:10
thanks for your suggestion @BigDataScientist! Will do next time. I did try to wrap it in html, but it did not work for me, potentially I could be doing it wrong. In any case, the solution provided below by @Stéphane Laurent worked, so that's what I am implementing. — Miriam, Jun 17 '19 at 06:00

score 4 · Accepted Answer · answered Jun 14 '19 at 09:29

This works by doing the replacement in JavaScript in a render function:

server = function(input, output){

  #dataframe
  mydata <- data.frame(Var1 = c("a", "b"),
                       Var2 = c("FIRST LINE: first; SECOND LINE: second", 
                                "THIRD LINE: third; FOUR LINE: four"))

  #render table
  DTedit::dtedit(
    input, output,
    name = 'mytable',
    thedata = mydata, 
    datatable.options = list(
      columnDefs = list(
        list(targets=1, 
             render = JS("function(data){return data.replace(/;/g, '<br>');}"))
      )))

}

How can I introduce a new line within a column using DTedit and shiny::uiOutput?

1 Answers1