This is an issue with the package DT in R, for Shiny apps.
I noticed that with the option fixedHeader = TRUE, the frozen header will appear on all tabs of a Shiny app. Here is an example illustrating the problem. Simply go to "Tab2" and scroll down, and the header from "Tab1" should be visible (unwanted). I would like the header to only appear on "Tab1".
library(shiny)
library(DT)
data("volcano")
ui = shinyUI(navbarPage(title = 'Navbar',
tabPanel('Table',
fluidPage(
fluidRow(
column(width = 12,
DT::dataTableOutput('table'))
)
)
),
tabPanel('Tab2',
fluidPage(
fluidRow(
column(width = 4,
style = "height:1500px;background-color:#f0f0f5;border-radius:6px 0px 0px 6px;
box-shadow:1px 1px 8px #888888")
)
)
)
))
server = shinyServer(function(input, output){
output$table <- DT::renderDataTable(
volcano,
extensions = c('Buttons', 'FixedHeader'),
options = list(
pageLength = 100,
fixedHeader = TRUE
)
)
})
runApp(list(ui=ui, server=server), launch.browser = TRUE)
Related
In the DT::datatable of the shiny app below Im trying to display only one cell at a time using scrollY but adjust the lineHeight as well in order to show only one cell when I scroll.It does not seem to work well.
## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
selectInput("ir","Select",choices = unique(iris$Species),selected=unique(iris$Species),multiple = T)
),
dashboardBody(
div(DT::dataTableOutput("table"), style = "font-size: 80%; width: 10%")
)
)
server <- function(input, output) {
output$table<-renderDataTable({
ir<-data.frame(input$ir)
colnames(ir)<-""
datatable(ir,rownames = F,escape = F,
options = list(dom="t",scrollY = "25px",pageLength=nrow(ir)))%>%
formatStyle( 0, target= 'row', lineHeight="25px")
})
}
shinyApp(ui, server)
How can I increase the size of the WellPanel to have my table completely inside the "grey" box?
image here
(I'm new in Shiny and edited the table due to confidential data).
I tried
wellPanel(
fluidRow(
fluidPage(
and only
wellPanel(
fluidRow(
None of then works
wellPanel(
fluidRow(
fluidPage(
headerPanel(""),
column(12, align="center",
output$dataprint_controles <- DT::renderDataTable({
datatable(data,
rownames = FALSE,
options = list(paging = TRUE,
scrollX = TRUE,
searching = TRUE,
ordering = FALSE,
autoWidth = FALSE,
names = TRUE,
columnDefs = list(list(visible = FALSE, targets = esconder),
list(className = 'dt-center', targets = "_all")
),
dom = '<"sep">',
headerCallback = DT::JS(stringr::str_glue(
"function(thead) {{",
" $(thead).closest('thead').find('th').css('border-top', '2px solid black');",
" $(thead).closest('thead').find('th').css('border-left', '0px solid black');",
" $(thead).closest('thead').find('th').css('background', '#D9D9D9');",
" $(thead).closest('thead').find('th').css('color', 'black');",
" $(thead).closest('thead').find('th').css('text-align', 'center');",
"}}"
))
)
)
}),
),
)
), # fecha fluid
), # fecha well panel
fluidPage should be the most outer element of the UI, and column must be contained in fluidRow. The wellPanel does not go beyond a width of 100%, so you have to add the CSS propert width: fit-content;.
library(shiny)
library(DT)
mat <- matrix(rnorm(5*14), nrow = 5, ncol = 14)
ui <- fluidPage(
fluidRow(
column(
12,
wellPanel(
style = "width: fit-content;",
DTOutput("dtable")
)
)
)
)
server <- function(input, output, session) {
output$dtable <- renderDT({
datatable(mat)
})
}
shinyApp(ui, server)
I have a tabpanelSet in a shiny application. One of the tabs contains a datatable. Id like the number of rows in the datatable to show in a nice circular icon next to the the tab header text so the user can see see the number in the datatable within the tab before clicking on the tab.
Here is the basic app. Its the 'Details' tab that I would like the circular notification icon library
library(shiny)
library(DT)
library(data.table)
ui <- fluidPage(
# Application title
titlePanel("Circular notification icon app"),
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Empty"),
tabPanel("Details",
DT::dataTableOutput("iris"))
)
)
)
server <- function(input, output) {
output$iris = DT::renderDT({
datatable(iris,class = "display wrap",selection = "single",
options = list(
scrollX = TRUE,
scrollY = TRUE,
pageLength = 15,
select = "api",
dom = 'Bfrtip')
)
})
}
# Run the application
shinyApp(ui = ui, server = server)
Like this?
library(shiny)
library(DT)
library(shinyjs)
CSS <- "
#tabHeader {
display: inline-block;
}
.circle {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 25px;
text-align: center;
background: #000
}"
js <- function(nrows){
sprintf("$('#tabHeader .circle').html('%s');", nrows)
}
ui <- fluidPage(
useShinyjs(),
tags$head(
tags$style(HTML(CSS))
),
# Application title
titlePanel("Circular notification icon app"),
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Empty"),
tabPanel(div(id = "tabHeader", span("Details"),
div(class = "circle")),
DTOutput("iris"))
)
)
)
server <- function(input, output) {
runjs(js(nrow(iris)))
output$iris = renderDT({
datatable(iris, class = "display wrap", selection = "single",
options = list(
scrollX = TRUE,
scrollY = TRUE,
pageLength = 15,
select = "api",
dom = 'Bfrtip')
)
})
}
# Run the application
shinyApp(ui = ui, server = server)
I'm trying to add an X scroll bar for datatable when it's wrapped around a fixedPanel. See the following example:
library(shiny)
library(shinydashboard)
library(DT)
ui <- function(request) {
dashboardPage(
skin = "black",
dashboardHeader(),
dashboardSidebar(disable = TRUE),
dashboardBody(
fluidRow(
uiOutput("table")
),
fluidRow(
DT::dataTableOutput("data2")
)
)
)
}
server <- function(input, output, session) {
output[["data"]] <-
DT::renderDataTable({
cbind(iris, iris, iris, iris, iris)[1, ]
},
selection = "none",
options = list(
searching = FALSE,
lengthChange = FALSE,
paginate = FALSE,
scroller = TRUE,
scrollX = TRUE
))
output[["table"]] <-
renderUI({
fixedPanel(
wellPanel(div(style = 'overflow-x: scroll', DT::dataTableOutput("data"))),
style = "z-index: 10;"
)
})
output[["data2"]] <-
DT::renderDataTable({
cbind(iris, iris, iris, iris, iris)
},
options = list(
scroller = TRUE,
scrollX = TRUE,
pageLength = 25
))
}
shinyApp(ui, server)
In the opposite I could use the shiny box object and the scrolling works but then I don't have this datatable on top of other ui (style = "z-index: 10;") that I need in my app:
output[["table"]] <-
renderUI({
box(div(style = 'overflow-x: scroll', DT::dataTableOutput("data")),
width = 12,
style = "z-index: 10;") # this line doesn't work
})
Is it possible to combine the two? I'd rather use fixedPanel than box, but I need both components from datatable: scrolling and being on top of other ui output.
See this post: https://stackoverflow.com/a/55574864/3439739
renderUI({
fixedPanel(
wellPanel(div(style = 'overflow-x: scroll', DT::dataTableOutput("data"))),
style = "z-index: 10; left:0; right:0; overflow-y:hidden; overflow-xy:auto"
)
})
seems to do the job.
I am currently developing a shiny app and I face an issue with the dynamic alignment of the data table.
The code used is
ui.R
shinyUI(fluidPage(
dashboardPage(
dashboardBody(
tabItems(
tabItem(tabName = "view_id",
sidebarLayout(
sidebarPanel(width = 2, checkboxGroupInput("sidebar", "People Viewer",
sidebar_content)
),
mainPanel(width=10,style ="background-color:RGB(255,255,255); border-color:RGB(255,255,255);align:left;",
wellPanel(DTOutput("tab") )
)
)
)
)
)))
server.R
shinyServer(function(input, output) {
output$tab <- {
renderDT(datatable(pep_view[ ,input$sidebar, drop = FALSE ], filter = 'top', extensions = 'FixedColumns',
options = list(scrollX = TRUE,scrollY = "400px" ,fixedColumns = TRUE, pageLength = 10, autoWidth = TRUE
), class = 'cell-border stripe')
)
}
})
The output obtained is
Can anyone resolve this issue? Thanks in advance!!