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

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?

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()]))
        )
      ))

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.

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.

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.