shinyjqui

You can install the stable version of shinyjqui from CRAN or the development version from GitHub using devtools.

# install from CRAN
install.packages('shinyjqui')

# for the development version
devtools::install_github("yang-tang/shinyjqui")

Use jqui_draggable() to wrap a Shiny UI element, allowing users to move it using the mouse.

server <- function(input, output) {}

ui <- fluidPage(
  jqui_draggable(fileInput('file', 'File'))
)

shinyApp(ui, server)

Use jqui_resizable() to wrap a Shiny UI element, allowing users to change its size using the mouse.

server <- function(input, output) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
  })
}

ui <- fluidPage(
  jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
)

shinyApp(ui, server)

Use sortableTableOutput() to render an HTML table where rows can be reordered. The selected row indices are available via input<id>_row_index.

ui <- fluidPage(
  verbatimTextOutput("index"),
  sortableTableOutput("tbl")
)

server <- function(input, output) {
  output$index <- renderPrint({
    cat("Row index:\n")
    input$tbl_row_index
  })
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
}

shinyApp(ui, server)

Apply animation effects to elements when showing or hiding them. You can retrieve available effects using get_jqui_effects().

server <- function(input, output) {
  observeEvent(input$show, {
    jqui_show('#gg', effect = input$effect)
  })
  
  observeEvent(input$hide, {
    jqui_hide('#gg', effect = input$effect)
  })
  
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg, color = factor(gear))) +
      geom_point() +
      theme(plot.background = element_rect(fill = "transparent",colour = NA))
  }, bg = "transparent")
}

ui <- fluidPage(
  div(style = 'width: 400px; height: 400px',
      plotOutput('gg', width = '100%', height = '100%')),
  selectInput('effect', NULL, choices = get_jqui_effects()),
  actionButton('show', 'Show'),
  actionButton('hide', 'Hide')
)

shinyApp(ui, server)

Add or remove CSS classes from an element while animating the style changes. Use duration (in milliseconds) to control the animation speed.

# Example usage within an observer
if(length(class_to_remove) > 0) {
  jqui_remove_class('#foo', paste(class_to_remove, collapse = ' '), duration = 1000)
}
if(length(class_to_add) > 0) {
  jqui_add_class('#foo', paste(class_to_add, collapse = ' '), duration = 1000)
}

Use orderInput() to display a list of items that can be reordered via drag and drop.

Key arguments:

• items: The list of items to display.
• as_source: Boolean indicating if the input acts as a source for other inputs.
• connect: The ID of the destination input to connect to (for drag-and-drop between lists).

ui <- fluidPage(
  orderInput('source', 'Source', items = month.abb,
             as_source = TRUE, connect = 'dest'),
  orderInput('dest', 'Dest', items = NULL, placeholder = 'Drag items here...'),
  verbatimTextOutput('order')
)

server <- function(input, output) {
  output$order <- renderPrint({ print(input$dest) })
}

shinyApp(ui, server)

Use selectableTableOutput() to render an HTML table where rows or cells can be selected.

Key arguments:

• selection_mode: Set to "cell" to allow cell selection, or use default for row selection.

The selection data is available via input<id>_selected.

ui <- fluidPage(
  selectableTableOutput("tbl", selection_mode = "cell"),
  verbatimTextOutput("selected")
)

server <- function(input, output) {
  output$selected <- renderPrint({
    cat("Selected:\n")
    input$tbl_selected
  })
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
}

shinyApp(ui, server)

Use jqui_sortable() to wrap a container (like a div) to allow reordering of its child elements in a list or grid using the mouse.

server <- function(input, output) {
  output$hc <- renderHighchart({
    hchart(mtcars, "scatter", hcaes(x = cyl, y = mpg, group = factor(vs))) %>% 
      hc_legend(enabled = FALSE)
  })
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg, color = factor(vs))) + 
      geom_point() + 
      theme(legend.position= "none")
  })
}

ui <- fluidPage(
  jqui_sortable(div(id = 'plots',
                     highchartOutput('hc', width = '200px', height = '200px'),
                     plotOutput('gg', width = '200px', height = '200px')))
)

shinyApp(ui, server)