Добавить индекс в текст сортируемого объекта в R Sortable

Question

Я пытаюсь создать инструмент, в котором пользователь оценивает элементы, и натолкнулся на замечательный сортируемый пакет для R, который очень упрощает создание и отслеживание порядка пользовательского интерфейса перетаскивания.

Несмотря на то, что очень просто определить порядок объектов в интерфейсе за кулисами, я пытаюсь найти способ немедленного отображения этого номера индекса / строки в сортируемом пользовательском интерфейсе (в отличие от простой его печати). где-то еще), поскольку пользователь ранжирует элементы, хотя это довольно концептуально просто.

Я экспериментировал с аргументами options / sortable_options () и не смог заставить что-то там работать. Есть ли какой-нибудь очевидный способ отобразить индекс сортируемого объекта в тексте этого объекта, который мне не хватает?

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

Вот решение с 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)