如何实现具有可调节列的 R shiny 表？

Question

I am looking for a way to have table columns that can handle data/text of different unknown size.

The desired behavior of the table is basically like Excel cells/colums, ie

1. No wrapping by default
2. For long texts only show as much as fits within the specified column width (in the example below in row 1 column 2 show "A very ")
3. Column width can be adjusted by dragging the borders showing more or less of the text

The following example can handle 1.)

library(shiny)
library(DT)

shinyApp(
  ui <- fluidPage(
    #tags$head(tags$style("#table  {white-space: nowrap;  }")),
    DT::dataTableOutput("table"),
 
  ),
  
  server <- function(input, output) {
    
    output$table <- DT::renderDataTable({
      data.frame(a=c(1,2,3),
                 b=c("A very long text!!!!!!!","B","C"), 
                 c=c("A","B","C"))
    }, class="hover cell-border stripe nowrap",
    options = list(
      autoWidth = TRUE,
      columnDefs = list(list(width = '50px', targets = "_all"))
    ))
    
  }
)

The 2.) could be achived by rendering the column, ie trim the data as suggested here How to Truncate text in DataTable in R Shiny?

However 3.) seems to be tricky since I couldn't find a hint that dragging the column boarder is even possible with DT. Even if it was, seems to be not directly compatible with 2.) without rerendering the table after the column boarders are changed.

Any ideas or advise how to handle this?

Answer 1

Try using rhandsontable instead of Datatable. It has some amazing features. One of which is the manual column resizing. https://handsontable.com/docs/8.3.0/demo-resizing.html This documentation will help you with your problem.

Answer 2

I don't know a way to make 2 and 3 easily consistent but you can "manually" adjust (via slider input?) the number of characters to show & the width of the column.s

Using you example I added text truncation with slider input (default 10 chars) + centering + manual width ajustment (another slider input) for the 1st col.

library(shiny)
library(DT)


shinyApp(
  ui <- fluidPage(
    #tags$head(tags$style("#table  {white-space: nowrap;  }")),
    tagList(
      sliderInput("nb_chars","Number of chars to truncate to: ",min = 5,max = 80,step = 5,value = 10),
      sliderInput("col1_width","Width of col 1 in px :",min = 5,max = 100,step = 10,value = 50,post = "px")
    ),
    DT::dataTableOutput("table"),
    
  ),
  
  server <- function(input, output) {
    df = data.frame(
                    a=c(1,2,3),
                    b=c("A very long text!!!!!!!","B","C"), 
                    c=c("A","B","C"))
    nb_cols = ncol(df)+1#row names is 1 additional column
    col_widths <- reactive(c(input$col1_width,rep(50,nb_cols-1)))
    
    output$table <- DT::renderDataTable({
      df
    }, class="hover cell-border stripe nowrap",
    options = list(
      columnDefs = lapply(1:length(col_widths), function(i){
        width = col_widths()[i]
        list(
          width = paste0(width,"px"),
          targets = i-1
          ,className = 'dt-center'
          ,render =
            JS(
              "function(data, type, row, meta) {",
              sprintf("return type === 'display' && data && data.length > %s ?",input$nb_chars),
              sprintf("'<span title=\"' + data + '\">' + data.substr(0, %s) + '...</span>' : data;",input$nb_chars),
              "}"
            )
        )
      }

        )
    )
    )
    
  }
)