• Stars
    star
    124
  • Rank 272,730 (Top 6 %)
  • Language
    R
  • License
    Other
  • Created almost 9 years ago
  • Updated 9 months 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,382
star
2

shiny

Easy interactive web applications with R
R
5,139
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,525
star
5

rmarkdown

Dynamic Documents for R
R
2,737
star
6

shiny-examples

JavaScript
1,909
star
7

gt

Easily generate information-rich, publication-quality tables from R
R
1,853
star
8

blogdown

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

reticulate

R Interface to Python
R
1,604
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,352
star
13

tensorflow

TensorFlow for R
R
1,313
star
14

renv

renv: Project environments for R.
R
949
star
15

shinydashboard

Shiny Dashboarding framework
CSS
852
star
16

pagedown

Paginate the HTML Output of R Markdown with CSS for Print
R
850
star
17

keras

R Interface to Keras
R
811
star
18

pointblank

Data quality assessment and metadata reporting for data frames and database tables
R
794
star
19

flexdashboard

Easy interactive dashboards for R
JavaScript
778
star
20

leaflet

R Interface to Leaflet Maps
JavaScript
775
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

rstudio-conf

Materials for rstudio::conf
HTML
694
star
24

learnr

Interactive Tutorials with R Markdown
R
692
star
25

shiny-server

Host Shiny applications over the web.
JavaScript
686
star
26

RStartHere

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

py-shiny

Shiny for Python
Python
627
star
28

DT

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

rmarkdown-cookbook

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

blastula

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

r2d3

R Interface to D3 Visualizations
R
506
star
32

bookdown-demo

A minimal book example using bookdown
CSS
476
star
33

hex-stickers

RStudio hex stickers
R
426
star
34

distill

Distill for R Markdown
HTML
418
star
35

bslib

Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5.
SCSS
408
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
358
star
39

revealjs

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

pins-r

Pin, Discover and Share Resources
R
295
star
41

fontawesome

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

profvis

Visualize R profiling data
JavaScript
285
star
43

crosstalk

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

config

config package for R
R
248
star
45

pool

Object Pooling in R
R
241
star
46

thematic

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

Intro

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

shinytest

Automated testing for shiny apps
JavaScript
227
star
49

tinytex-releases

Windows/macOS/Linux binaries and installation methods of TinyTeX
PowerShell
226
star
50

httpuv

HTTP and WebSocket server package for R
C
217
star
51

nomnoml

Sassy 'UML' Diagrams for R
JavaScript
216
star
52

shinymeta

Record and expose Shiny app logic using metaprogramming
R
212
star
53

htmltools

Tools for HTML generation and output
R
201
star
54

shinyuieditor

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

promises

A promise library for R
R
191
star
56

vetiver-r

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

rstudioapi

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

gradethis

Tools for teachers to use with learnr
R
161
star
59

concept-maps

Concept maps for all things data science
HTML
158
star
60

master-the-tidyverse

Course contents for Master the Tidyverse
158
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
151
star
63

chromote

Chrome Remote Interface for R
R
143
star
64

shiny-gallery

Code and other documentation for apps in the Shiny Gallery ✨
HTML
139
star
65

rsconnect

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

reactlog

Shiny Reactivity Visualizer
JavaScript
119
star
67

redx

dynamic nginx configuration
Lua
118
star
68

bigdataclass

Two-day workshop that covers how to use R to interact databases and Spark
R
113
star
69

shinyapps

Deploy Shiny applications to ShinyApps
110
star
70

shinyloadtest

Tools for load testing Shiny applications
HTML
109
star
71

webshot2

Take screenshots of web pages from R
R
108
star
72

shinyvalidate

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

r-docker

Docker images for R
Dockerfile
105
star
74

miniUI

R
102
star
75

sass

Sass compiler package for R
C++
102
star
76

r-system-requirements

System requirements for R packages
Shell
100
star
77

shinytest2

R
96
star
78

keras-customer-churn

Customer Churn Shiny Application
R
96
star
79

r-builds

an opinionated environment for compiling R
Shell
91
star
80

addinexamples

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

r-manuals

A re-styled version of the R manuals
R
83
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

shinylive

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

rstudio-conf-2022-program

rstudio::conf(2022, "program")
R
61
star
90

rstudio-docker-products

Docker images for RStudio Professional Products
Just
59
star
91

bookdown.org

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

education.rstudio.com

CSS
57
star
93

tfestimators

R interface to TensorFlow Estimators
R
57
star
94

sparkDemos

HTML
54
star
95

vetiver-python

Version, share, deploy, and monitor models.
Python
54
star
96

tfprobability

R interface to TensorFlow Probability
R
54
star
97

shiny-incubator

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

connections

https://rstudio.github.io/connections/
R
52
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