rshinydt

Adding a line wrap to a column containing strings without a space


I am creating a shiny app with a data table containing one column with long strings without spaces (sequence). This column does not line wrap the enclosing strings and expands to the entire width of the table, hiding other successive columns (e.g. extra_column). Please guide me on how to fix the width of the problematic column.

Here is a minimal example:

library(shiny)
library(DT)

ui <- fluidPage(
  DT::DTOutput("table")
)

server <- function(input, output, session) {
  df <- data.frame(chr=c(1, 2, 3), sequence=c("ATCCACACTCCCCTCACACACACCCCACACACATTACATACACTCTCCCTACACACACTCCCCTCACACACACAGACCCACACACCCACACTCCCC
", "TGAAATCAAGGCCGGGCGCGGTGGCTCACGCCTGTAATCCCAGCACTTTGGGAGGCCGAGGCGGGTGGATCATGAGGTCAGGAGATCGAGACCATCCTGGCTAACAAGGTGAAACCCCGTCTCTACTAAAAATACAAAAAATTAGCCGGGCGCGGTGGCGGGCGCCTGTAGTCCCAGCTACTCGGGAGGCTGAGGCAGGAGAATGGCGTGAACCCGGGAAGCGGAGCTTGCAGTGAGCCGAGATTGCGCCACTGCAGTCCGCAGTCCGGCCTGGGCGACAGAGCGAGACTCCGTCTCAAAAAAAAAAAAA",
                                              "CAAAAAATTAGCCGGGCGCGGTGGCAGGCGCCTGTAGTCCCAGCTACTCGGGAGGCTGAGGCAGGAGAATGGCGTGAACCCGGGAAGCGGAGCTTGCAGTGAGCCGAGATTGCGCCACTGCAGTCCGCAGTCCGGCCTGGGCGACAGAGCGAGACTCCGTCTCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"), extra_columns=c("name1", "name2", "name3"))
  output$table <- DT::renderDataTable(df, 
                                      options=list(
                                        columnDefs = list(list(
                                          width = '10%', targets ='_all')))
  )
}

shinyApp(ui, server)

Solution

  • Option 1, text break

    library(shiny)
    library(DT)
    
    ui <- fluidPage(
        DT::DTOutput("table")
    )
    
    server <- function(input, output, session) {
        df <- data.frame(
            chr=c(1, 2, 3), 
            sequence=c(
            "ATCCACACTCCCCTCACACACACCCCACACACATTACATACACTCTCCCTACACACACTCCCCTCACACACACAGACCCACACACCCACACTCCCC", 
            "TGAAATCAAGGCCGGGCGCGGTGGCTCACGCCTGTAATCCCAGCACTTTGGGAGGCCGAGGCGGGTGGATCATGAGGTCAGGAGATCGAGACCATCCTGGCTAACAAGGTGAAACCCCGTCTCTACTAAAAATACAAAAAATTAGCCGGGCGCGGTGGCGGGCGCCTGTAGTCCCAGCTACTCGGGAGGCTGAGGCAGGAGAATGGCGTGAACCCGGGAAGCGGAGCTTGCAGTGAGCCGAGATTGCGCCACTGCAGTCCGCAGTCCGGCCTGGGCGACAGAGCGAGACTCCGTCTCAAAAAAAAAAAAA",
            "CAAAAAATTAGCCGGGCGCGGTGGCAGGCGCCTGTAGTCCCAGCTACTCGGGAGGCTGAGGCAGGAGAATGGCGTGAACCCGGGAAGCGGAGCTTGCAGTGAGCCGAGATTGCGCCACTGCAGTCCGCAGTCCGGCCTGGGCGACAGAGCGAGACTCCGTCTCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
            ),
            extra_columns=c("name1", "name2", "name3")
        )
        output$table <- DT::renderDataTable(
            DT::datatable(df) |>
                DT::formatStyle(
                    columns = "sequence", 
                    display = "block", 
                    `overflow-wrap`= 'break-word',
                    overflow = 'hidden',
                    width = "300px"
                )
        )
    }
    
    shinyApp(ui, server)
    

    enter image description here

    Option 2 truncate text

    library(shiny)
    library(DT)
    
    ui <- fluidPage(
        DT::DTOutput("table")
    )
    
    server <- function(input, output, session) {
        df <- data.frame(
            chr=c(1, 2, 3), 
            sequence=c(
            "ATCCACACTCCCCTCACACACACCCCACACACATTACATACACTCTCCCTACACACACTCCCCTCACACACACAGACCCACACACCCACACTCCCC", 
            "TGAAATCAAGGCCGGGCGCGGTGGCTCACGCCTGTAATCCCAGCACTTTGGGAGGCCGAGGCGGGTGGATCATGAGGTCAGGAGATCGAGACCATCCTGGCTAACAAGGTGAAACCCCGTCTCTACTAAAAATACAAAAAATTAGCCGGGCGCGGTGGCGGGCGCCTGTAGTCCCAGCTACTCGGGAGGCTGAGGCAGGAGAATGGCGTGAACCCGGGAAGCGGAGCTTGCAGTGAGCCGAGATTGCGCCACTGCAGTCCGCAGTCCGGCCTGGGCGACAGAGCGAGACTCCGTCTCAAAAAAAAAAAAA",
            "CAAAAAATTAGCCGGGCGCGGTGGCAGGCGCCTGTAGTCCCAGCTACTCGGGAGGCTGAGGCAGGAGAATGGCGTGAACCCGGGAAGCGGAGCTTGCAGTGAGCCGAGATTGCGCCACTGCAGTCCGCAGTCCGGCCTGGGCGACAGAGCGAGACTCCGTCTCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
            ) |> stringr::str_trunc(width = 80), 
            extra_columns=c("name1", "name2", "name3")
        )
        output$table <- DT::renderDataTable(df)
    }
    
    shinyApp(ui, server)
    

    enter image description here