Output Table after using pickerInput is not showing as it should in ShinyDashboard
Introduction
In this post, we will explore the issue of the output table not displaying correctly when using pickerInput in a ShinyDashboard application. We will also go through some possible solutions to resolve this issue.
Understanding the Problem
The problem occurs when we select only two columns using pickerInput. The columns are displaced and do not display correctly. However, if we select all the columns (or more than two), the output table looks well.
We have been provided with an example code that demonstrates this issue.
library(shiny)
library(shinydashboard)
library(magrittr)
library(DT)
library(shinyWidgets)
library(dplyr)
ui <- dashboardPage(
# ... ...
mainPanel(
fluidRow(
tabItems(
# ...
mainPanel(
dataTableOutput("table")
)
)
)
)
)
server <- function(input, output, session) {
data <- reactive({
mtcars
})
data1 <- reactive({
dat <- data()
if(input$change_log2){
dat <- log2(dat)
}
if(input$run_sqrt){
dat <- sqrt(dat)
}
dat
})
# ... ...
output$table <- renderDataTable({
datatable(
selected_columns(),
filter = list(position = 'top', clear = FALSE),
selection = "none",
rownames = FALSE,
extensions = 'Buttons',
options = list(
scrollX = TRUE,
autoWidth = TRUE,
dom = 'Blrtip',
buttons =
list('copy', 'print', list(
extend = 'collection',
buttons = list(
list(extend = 'csv', filename = "Counts", title = NULL),
list(extend = 'excel', filename = "Counts", title = NULL)),
text = 'Download'
)),
lengthMenu = list(c(10, 30, 50, -1),
c('10', '30', '50', 'All'))
),
class = "display"
)
},rownames=FALSE)
}
Solution 1: Using fluidRow(column(align = "center", width=12, DTOutput("table")))
We can try to use a fluidRow with a centered column to solve this issue.
ui <- dashboardPage(
# ... ...
mainPanel(
fluidRow(
tabItems(
tabItem(tabName = "Table",
fluidRow(column(align = "center", width=12, DTOutput("table")))
)
)
)
)
)
server <- function(input, output, session) {
# ... ...
output$table <- renderDT({
datatable(
selected_columns(),
filter = list(position = 'top', clear = FALSE),
selection = "none",
rownames = FALSE,
extensions = 'Buttons',
options = list(
scrollX = TRUE,
autoWidth = TRUE,
dom = 'Blrtip',
buttons =
list('copy', 'print', list(
extend = 'collection',
buttons = list(
list(extend = 'csv', filename = "Counts", title = NULL),
list(extend = 'excel', filename = "Counts", title = NULL)),
text = 'Download'
)),
lengthMenu = list(c(10, 30, 50, -1),
c('10', '30', '50', 'All'))
),
class = "display"
)
},rownames=FALSE)
}
Conclusion
In this post, we explored the issue of the output table not displaying correctly when using pickerInput in a ShinyDashboard application. We also went through some possible solutions to resolve this issue, including using a fluidRow with a centered column.
If you are experiencing similar issues, we recommend trying out these solutions and experimenting with different approaches until you find one that works for your specific use case.
Last modified on 2025-04-26