R Shiny communicate column sizes between R and Javascript with colResize

Question

I'm using this plugin to enable manual column resizing for the DataTables in R Shiny. Now I would like to save the column width state after the user resized the table. For this I would like to communicate the change into a Shiny input variable. However I am quite new to Javascript and jQuery which means I don't understand the instructions on the Github page. So I would like to ask how to achieve this.

Answer 1

library(shiny)
library(DT)
library(htmltools)

dep <- htmlDependency(
  name = "colResize", 
  version = "1.6.1", 
  src = normalizePath("colResize"),
  script = "jquery.dataTables.colResize.js",
  stylesheet = "jquery.dataTables.colResize.css",
  all_files = FALSE
)

js <- c(
  "function(column, columns){",
  "  Shiny.setInputValue('colwidth', column);",
  "}"
)

dat <- head(iris, 6)

ui <- fluidPage(
  br(),
  fluidRow(
    column(
      width = 8,
      DTOutput("dtable")
    ),
    column(
      width = 4,
      verbatimTextOutput("columnWidth")
    )
  )
)

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    dtable <- datatable(
      dat,
      options = list(
        colResize = list(
          onResizeEnd = JS(js)
        )
      )
    ) 
    deps <- dtable[["dependencies"]]
    deps <- c(deps, list(dep))
    dtable[["dependencies"]] <- deps
    dtable
  })
  
  output[["columnWidth"]] <- renderPrint({
    input[["colwidth"]]
  })
  
}

shinyApp(ui, server)