I recently incorporated selectize capability into the selectInputs within a column of a DT datatable in my Shiny app. Following some guidance provided here, I implemented JavaScript to enhance the style and search functionality of selectize. However, due to the width of the table, horizontal scrolling is required to view all the selectInputs.
Upon making a selection in any selectInput for the first time, everything operates smoothly. Yet, when I click on a selectInput for a second time, the page abruptly scrolls back to the left, causing the selectInputs to become hidden from view. How can I maintain the desired style and search features while preventing this unexpected behavior?
UPDATE: As an alternative approach, I experimented with shinyWidgets::pickerInput, which resolved the scrollbar issue. Nonetheless, I encountered difficulties with the liveSearch feature not functioning as intended within the datatable. If a solution can be found for addressing this specific concern, I will deem this question fully addressed.
Example:
library(shiny)
library(DT)
# Function to selectize one or more input ids
selectize_ids <- function(ids) {
myStrings <- as.character(sapply(ids, function(id) {
paste0(" $('#", id, "').selectize();")
}))
c(
"function(settings){",
myStrings,
"}"
)
}
shinyApp(
ui = fluidPage(
div(style = "display: none;", selectInput(inputId = "dummy", label = NULL, choices = 1:2)),
fluidRow(DT::dataTableOutput("mytable"))
),
server = function(input, output, session) {
df <- as.data.frame(matrix(data = paste0("text", 1:60), ncol = 20))
colnames(df) <- paste0("column", 1:ncol(df))
df$myselect <- sapply(1:nrow(df), function(i) {
as.character(selectInput(
inputId = paste0("myselect_", i),
label = NULL,
choices = c("option1", "option2", "option3")
))
})
select_ids <- paste0("myselect_", 1:nrow(df))
output$mytable <- DT::renderDataTable({
DT::datatable(
data = df,
escape = F,
options = list(
initComplete = JS(selectize_ids(select_ids))
)
)
})
}
)