• Stars
    star
    124
  • Rank 281,259 (Top 6 %)
  • Language
    R
  • License
    Other
  • Created over 9 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

R htmlwidget for Sortable.js

sortable

R build status CRAN version sortable downloads per month Codecov test coverage Lifecycle: maturing RStudio Community: Teaching RStudio Ask a question: sortable

The sortable package enables drag-and-drop behaviour in your Shiny apps. It does this by exposing the functionality of the SortableJS JavaScript library as an htmlwidget in R, so you can use this in Shiny apps and widgets, learnr tutorials as well as R Markdown. In addition, provides a custom learnr question type - question_rank() that allows ranking questions with drag-and-drop.

Installation

You can install the released version of sortable from CRAN with:

install.packages("sortable")

And the development version from GitHub with:

# install.packages("remotes")
remotes::install_github("rstudio/sortable")

Examples

Rank list

You can create a drag-and-drop input object in Shiny, using the rank_list() function.

## Example shiny app with rank list

library(shiny)
library(sortable)

labels <- list(
  "one",
  "two",
  "three",
  htmltools::tags$div(
    htmltools::em("Complex"), " html tag without a name"
  ),
  "five" = htmltools::tags$div(
    htmltools::em("Complex"), " html tag with name: 'five'"
  )
)

rank_list_basic <- rank_list(
  text = "Drag the items in any desired order",
  labels = labels,
  input_id = "rank_list_basic"
)

rank_list_swap <- rank_list(
  text = "Notice that dragging causes items to swap",
  labels = labels,
  input_id = "rank_list_swap",
  options = sortable_options(swap = TRUE)
)

rank_list_multi <- rank_list(
  text = "You can select multiple items, then drag as a group",
  labels = labels,
  input_id = "rank_list_multi",
  options = sortable_options(multiDrag = TRUE)
)



ui <- fluidPage(
  fluidRow(
    column(
      width = 12,
    tags$h2("Default, multi-drag and swapping behaviour"),
      tabsetPanel(
        type = "tabs",
        tabPanel(
          "Default",
            tags$b("Exercise"),
            actionButton("btnUpdate", label = "Update rank list title"),
            rank_list_basic,
            tags$b("Result"),
            verbatimTextOutput("results_basic")
        ),
        tabPanel(
          "Multi-drag",
            tags$b("Exercise"),
            rank_list_multi,
            tags$b("Result"),
            verbatimTextOutput("results_multi")
        ),
        tabPanel(
          "Swap",
            tags$b("Exercise"),
            rank_list_swap,
            tags$b("Result"),
            verbatimTextOutput("results_swap")
        )
      )
    )
  )
)

server <- function(input, output, session) {
  output$results_basic <- renderPrint({
    input$rank_list_basic # This matches the input_id of the rank list
  })
  output$results_multi <- renderPrint({
    input$rank_list_multi # This matches the input_id of the rank list
  })
  output$results_swap <- renderPrint({
    input$rank_list_swap # This matches the input_id of the rank list
  })
  # test updating the rank list label
  observe({
    update_rank_list(
      "rank_list_basic",
      text = paste("You pressed the button at", as.character(Sys.time())),
      session = session
    )
  }) %>%
    bindEvent(input$btnUpdate)
}

shinyApp(ui, server)

Bucket list

With a bucket list you can have more than one rank lists in a single object. This can be useful for bucketing tasks, e.g.ย asking your students to classify objects into multiple categories.

## Example shiny app with bucket list

library(shiny)
library(sortable)


ui <- fluidPage(
  tags$head(
    tags$style(HTML(".bucket-list-container {min-height: 350px;}"))
  ),
  fluidRow(
    column(
      tags$b("Exercise"),
      actionButton("btnUpdateBucket", label = "Update bucket list title"),
      actionButton("btnUpdateRank", label = "Update rank list title"),
      width = 12,
      bucket_list(
        header = "Drag the items in any desired bucket",
        group_name = "bucket_list_group",
        orientation = "horizontal",
        add_rank_list(
          text = "Drag from here",
          labels = list(
            "one",
            "two",
            "three",
            htmltools::tags$div(
              htmltools::em("Complex"), " html tag without a name"
            ),
            "five" = htmltools::tags$div(
              htmltools::em("Complex"), " html tag with name: 'five'"
            )
          ),
          input_id = "rank_list_1"
        ),
        add_rank_list(
          text = "to here",
          labels = NULL,
          input_id = "rank_list_2"
        )
      )
    )
  ),
  fluidRow(
    column(
      width = 12,
      tags$b("Result"),
      column(
        width = 12,

        tags$p("input$rank_list_1"),
        verbatimTextOutput("results_1"),

        tags$p("input$rank_list_2"),
        verbatimTextOutput("results_2"),

        tags$p("input$bucket_list_group"),
        verbatimTextOutput("results_3")
      )
    )
  )
)

server <- function(input, output, session) {
  output$results_1 <-
    renderPrint(
      input$rank_list_1 # This matches the input_id of the first rank list
    )
  output$results_2 <-
    renderPrint(
      input$rank_list_2 # This matches the input_id of the second rank list
    )
  output$results_3 <-
    renderPrint(
      input$bucket_list_group # Matches the group_name of the bucket list
    )

  # test updating the bucket list label
  counter_bucket <- reactiveVal(1)
  observe({
    update_bucket_list(
      "bucket_list_group",
      text = paste("You pressed the button", counter_bucket(), "times"),
      session = session
    )
    counter_bucket(counter_bucket() + 1)
  }) %>%
    bindEvent(input$btnUpdateBucket)

  # test updating the rank list label
  counter_rank <- reactiveVal(1)
  observe({
    update_rank_list(
      "rank_list_1",
      text = paste("You pressed the button", counter_rank(), "times"),
      session = session
    )
    counter_rank(counter_rank() + 1)
  }) %>%
    bindEvent(input$btnUpdateRank)
}


shinyApp(ui, server)

Add drag-and-drop to any HTML element

You can also use sortable_js() to drag and drop other widgets:

library(DiagrammeR)
library(htmltools)

html_print(tagList(
  tags$p("You can drag and drop the diagrams to switch order:"),
  tags$div(
    id = "aUniqueId",
    tags$div(
      style = "border: solid 0.2em gray; float:left; margin: 5px",
      mermaid("graph LR; S[SortableJS] -->|sortable| R ",
              height = 250, width = 300)
    ),
    tags$div(
      style = "border: solid 0.2em gray; float:left; margin: 5px",
      mermaid("graph TD; JavaScript -->|htmlwidgets| R ",
              height = 250, width = 150)
    )
  ),
  sortable_js("aUniqueId") # the CSS id
))

Related work

I learnt about the following related work after starting on sortable:

  • The esquisse package:

    โ€œThe purpose of this add-in is to let you explore your data quickly to extract the information they hold. You can only create simple plots, you wonโ€™t be able to use custom scales and all the power of ggplot2.โ€

  • There is also the shinyjqui package:

    โ€œAn R wrapper for jQuery UI javascript library. It allows user to easily add interactions and animation effects to a shiny app.โ€

  • The shinyDND package:

    Adds functionality to create drag and drop div elements in shiny.

More Repositories

1

cheatsheets

Posit Cheat Sheets - Can also be found at https://posit.co/resources/cheatsheets/.
TeX
5,673
star
2

shiny

Easy interactive web applications with R
R
5,281
star
3

rstudio

RStudio is an integrated development environment (IDE) for R
Java
4,432
star
4

bookdown

Authoring Books and Technical Documents with R Markdown
JavaScript
3,613
star
5

rmarkdown

Dynamic Documents for R
R
2,737
star
6

gt

Easily generate information-rich, publication-quality tables from R
R
1,932
star
7

shiny-examples

JavaScript
1,927
star
8

blogdown

Create Blogs and Websites with R Markdown
R
1,710
star
9

reticulate

R Interface to Python
R
1,634
star
10

webinars

Code and slides for RStudio webinars
HTML
1,510
star
11

rticles

LaTeX Journal Article Templates for R Markdown
TeX
1,402
star
12

plumber

Turn your R code into a web API.
R
1,373
star
13

tensorflow

TensorFlow for R
R
1,322
star
14

renv

renv: Project environments for R.
R
975
star
15

pagedown

Paginate the HTML Output of R Markdown with CSS for Print
R
861
star
16

shinydashboard

Shiny Dashboarding framework
CSS
852
star
17

pointblank

Data quality assessment and metadata reporting for data frames and database tables
R
826
star
18

keras

R Interface to Keras
R
823
star
19

flexdashboard

Easy interactive dashboards for R
JavaScript
804
star
20

leaflet

R Interface to Leaflet Maps
JavaScript
793
star
21

rmarkdown-book

R Markdown: The Definitive Guide (published by Chapman & Hall/CRC in July 2018)
RMarkdown
738
star
22

ggvis

Interactive grammar of graphics for R
R
709
star
23

shiny-server

Host Shiny applications over the web.
JavaScript
707
star
24

learnr

Interactive Tutorials with R Markdown
R
704
star
25

rstudio-conf

Materials for rstudio::conf
HTML
699
star
26

RStartHere

A guide to some of the most useful R Packages that we know about
R
661
star
27

py-shiny

Shiny for Python
Python
627
star
28

DT

R Interface to the jQuery Plug-in DataTables
JavaScript
581
star
29

rmarkdown-cookbook

R Markdown Cookbook. A range of tips and tricks to make better use of R Markdown.
RMarkdown
568
star
30

blastula

Easily send great-looking HTML email messages from R
R
530
star
31

r2d3

R Interface to D3 Visualizations
R
514
star
32

bookdown-demo

A minimal book example using bookdown
CSS
476
star
33

bslib

Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5.
SCSS
441
star
34

hex-stickers

RStudio hex stickers
R
434
star
35

distill

Distill for R Markdown
HTML
419
star
36

packrat

Packrat is a dependency management system for R
R
394
star
37

tufte

Tufte Styles for R Markdown Documents
R
385
star
38

dygraphs

R interface to dygraphs
JavaScript
361
star
39

revealjs

R Markdown Format for reveal.js Presentations
JavaScript
316
star
40

pins-r

Pin, Discover and Share Resources
R
301
star
41

fontawesome

Easily insert FontAwesome icons into R Markdown docs and Shiny apps
R
290
star
42

profvis

Visualize R profiling data
JavaScript
285
star
43

crosstalk

Inter-htmlwidget communication for R (with and without Shiny)
JavaScript
284
star
44

config

config package for R
R
247
star
45

tinytex-releases

Windows/macOS/Linux binaries and installation methods of TinyTeX
PowerShell
245
star
46

pool

Object Pooling in R
R
244
star
47

thematic

Theme ggplot2, lattice, and base graphics based on a few simple settings.
R
242
star
48

Intro

Course materials for "Introduction to Data Science with R", a video course by RStudio and O'Reilly Media
R
234
star
49

shinytest

Automated testing for shiny apps
JavaScript
224
star
50

shinymeta

Record and expose Shiny app logic using metaprogramming
R
220
star
51

httpuv

HTTP and WebSocket server package for R
C
217
star
52

nomnoml

Sassy 'UML' Diagrams for R
JavaScript
217
star
53

shinyuieditor

A GUI for laying out a Shiny application that generates clean and human-readable UI code
JavaScript
208
star
54

htmltools

Tools for HTML generation and output
R
201
star
55

promises

A promise library for R
R
195
star
56

vetiver-r

Version, share, deploy, and monitor models
R
176
star
57

rstudioapi

Safely access RStudio's API (when available)
R
161
star
58

gradethis

Tools for teachers to use with learnr
R
160
star
59

concept-maps

Concept maps for all things data science
HTML
158
star
60

master-the-tidyverse

Course contents for Master the Tidyverse
155
star
61

shinythemes

Themes for Shiny
R
152
star
62

ShinyDeveloperConference

Materials collected from the First Shiny Developer Conference Palo Alto, CA January 30-31 2016
HTML
152
star
63

chromote

Chrome Remote Interface for R
R
151
star
64

shiny-gallery

Code and other documentation for apps in the Shiny Gallery โœจ
HTML
145
star
65

reactlog

Shiny Reactivity Visualizer
JavaScript
121
star
66

rsconnect

Publish Shiny Applications, RMarkdown Documents, Jupyter Notebooks, Plumber APIs, and more
R
120
star
67

redx

dynamic nginx configuration
Lua
118
star
68

r-docker

Docker images for R
Dockerfile
117
star
69

bigdataclass

Two-day workshop that covers how to use R to interact databases and Spark
R
114
star
70

r-system-requirements

System requirements for R packages
Shell
111
star
71

shinyapps

Deploy Shiny applications to ShinyApps
110
star
72

webshot2

Take screenshots of web pages from R
R
109
star
73

shinyloadtest

Tools for load testing Shiny applications
HTML
108
star
74

shinyvalidate

Input validation package for the Shiny web framework
JavaScript
108
star
75

miniUI

R
102
star
76

sass

Sass compiler package for R
C++
102
star
77

shinytest2

R
100
star
78

keras-customer-churn

Customer Churn Shiny Application
R
99
star
79

r-builds

an opinionated environment for compiling R
Shell
92
star
80

r-manuals

A re-styled version of the R manuals
R
85
star
81

addinexamples

An R package showcasing how RStudio addins can be registered and used.
R
85
star
82

shinyapps-package-dependencies

Collection of bash scripts that install R package system dependencies
R
74
star
83

markdown

The first generation of Markdown rendering for R (born in 2012). Originally based on the C library sundown. Now based on commonmark. Note that this package is markdown, not *rmarkdown*.
R
72
star
84

R-Websockets

HTML 5 Websockets implementation for R
R
68
star
85

webdriver

WebDriver client in R
R
68
star
86

beyond-dashboard-fatigue

Materials for the RStudio webinar 'Beyond Dashboard Fatigue'
R
66
star
87

cloudml

R interface to Google Cloud Machine Learning Engine
R
65
star
88

rstudio-docker-products

Docker images for RStudio Professional Products
Shell
62
star
89

shinylive

Run Shiny on Python (compiled to wasm) in the browser
TypeScript
61
star
90

rstudio-conf-2022-program

rstudio::conf(2022, "program")
R
60
star
91

bookdown.org

Source documents to generate the bookdown.org website
R
59
star
92

vetiver-python

Version, share, deploy, and monitor models.
Python
58
star
93

education.rstudio.com

CSS
57
star
94

tfestimators

R interface to TensorFlow Estimators
R
57
star
95

connections

https://rstudio.github.io/connections/
R
54
star
96

tfprobability

R interface to TensorFlow Probability
R
54
star
97

sparkDemos

HTML
53
star
98

shiny-incubator

Examples and ideas that don't belong in the core Shiny package and aren't officially supported.
JavaScript
53
star
99

swagger

Swagger is a collection of HTML, Javascript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
HTML
51
star
100

leaflet.mapboxgl

Extends the R Leaflet package with a Mapbox GL JS plugin to allow easy drawing of vector tile layers.
R
49
star