Add index to sortable object text in R Sortable

Question

I am attempting to build a tool where a user ranks items, and have come across the wonderful sortable package for R, which makes building and capturing the order of a custom drag-and-drop user interface very easy.

While it is very easy to capture the order of the objects in the interface behind the scenes, I am struggling with finding a way to display that index/row number immediately and within the sortable user interface (as opposed to just printing it somewhere else), as the user is ranking items, even though this is pretty conceptually simple.

I have experimented with the options/sortable_options() arguments and have not been able to get anything to work there. Is there any obvious way to display the index of a sortable object within the text of that object that I am missing?

library(shiny)
library(shinydashboard)
library(sortable)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
  htmlOutput("foodrankingform")
))

server <- function(input, output, session){
  output$foodrankingform <- renderUI({
    fluidRow(
      column(tags$b("Food Ranking"), width = 12,
             bucket_list(header = "Drag to the right from the foods below to rank.", group_name = "bucket_list_group", orientation = "horizontal",
                         add_rank_list("Food Pool:", labels = c("Apple", "Orange", "Lemon", "Captain Crunch", "Banana"), input_id = "rank_list_1"),
                         add_rank_list("Food Ranking:", labels = NULL,input_id = "rank_list_2")))
    )
  })
}



shinyApp(ui=ui, server=server)

Answer 1

Here is a solution with CSS

library(shiny)
library(shinydashboard)
library(sortable)   

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(tags$style(HTML("
      .column_2 {
        counter-reset: rank;                      
      }

      .column_2 .rank-list-item::before {
        counter-increment: rank;                   
        content: counter(rank) '. ';    
      }
    "))),
    htmlOutput("foodrankingform")
  )
)

server <- function(input, output, session) {
  output$foodrankingform <- renderUI({
    fluidRow(
      column(tags$b("Food Ranking"), width = 12,
             bucket_list(header = "Drag to the right from the foods below to rank.", 
                         group_name = "bucket_list_group", orientation = "horizontal",
                         add_rank_list("Food Pool:", 
                                       labels = c("Apple", "Orange", "Lemon", 
                                                  "Captain Crunch", "Banana"), 
                                       input_id = "rank_list_1"),
                         add_rank_list("Food Ranking:", labels = NULL,
                                       input_id = "rank_list_2"))
      )
    )
  })
}

shinyApp(ui=ui, server=server)