How can I add copy button just next to a value so that I can copy the value by one click in R shiny?

Shiny
, ,
1

I am trying to add an actionButton which will copy a text. I am using rclipButton fuction but the button alignment and the copied value are not coming correctly.

library(shiny)
library(rclipboard)



app <- shinyApp(
  ui = fluidPage(
    DT::dataTableOutput("mydatatable")
  ),
  
  
  server =  shinyServer(function(input, output, session) {
    
    mycars <- reactive({ head(mtcars)})
    output$mydatatable = DT::renderDataTable(mycars(), selection = 'single',  
                                             rownames = FALSE, options = list(dom = 't'))
    selected_row <- reactiveVal(value = NULL)
    observeEvent(input$mydatatable_rows_selected,{
      selected_row(input$mydatatable_rows_selected)
    })

    observeEvent(selected_row(), {
      showModal( modalDialog(
        title = "Selected a row!",
        fluidRow(
          column(3, tags$p(strong("mpg : "), mycars()$mpg[selected_row()])),
          column(2, rclipButton("copy", label = "", clipText = as.character(mycars()[selected_row(), 'mpg']), icon = icon("clipboard"), modal = TRUE, width = "30px")),
          column(12, tags$p(strong("cyl : "), mycars()$cyl[selected_row()]))
        )
      )) 
    })
  })
)
app

I wanted to have a copy icon just next to the mpg value and the mpg valued will get copied by clicking the icon.
Capture

How is it possible using rclipButton or any other function?

2

your ui has to setup the rclipboard for it to work.

ui = fluidPage(  rclipboardSetup(),
    DT::dataTableOutput("mydatatable")
  )

I don't know what you want to achieve with alignment maybe like this ?

showModal( modalDialog(
        title = "Selected a row!",
        fluidRow(
          column(5, 
          div(style="display:flex;",
              tags$p(strong("mpg : "), mycars()$mpg[selected_row()]),
          rclipButton("copy", label = "",
                      clipText = as.character(mycars()[selected_row(), 'mpg']), 
                      icon = icon("clipboard"), modal = TRUE, width = "30px")),
          tags$style("
                     #copy {position: relative;
                     top: 3px;
                     left:1rem;
                     height: 1.5rem;}")),
          column(7, tags$p(strong("cyl : "), mycars()$cyl[selected_row()]))
        )
      ))
3

This is perfect. Just one thing that I observed that the icon placed outside the rclipButton box. Is it possible to show only icon like the image I have attached? Thanks for the reply.

4

Manage to solve it =)

showModal( modalDialog(
        title = "Selected a row!",
        fluidRow(
          column(7, 
                 div(style="display:flex;",
                     tags$p(strong("mpg : "), mycars()$mpg[selected_row()]),
                     rclipButton("copy", label = "",
                                 clipText = as.character(mycars()[selected_row(), 'mpg']), 
                                 icon = icon("copy", style = "position: relative;
                     top: -9px;
                     left:-1rem;
                     height: 1.5rem"), modal = TRUE, width = "5px")),
                 tags$style("
                     #copy {position: relative;
                     top: 3px;
                     left:1rem;
                     border-color: white;
                     height: 1.5rem;}")),
          column(7, tags$p(strong("cyl : "), mycars()$cyl[selected_row()]))
        )
      ))

Thanks @nirgrahamuk for the guidance. Please comment if you know any better solution.