Adjust scrollY height with row lineHeight in DT::datatable - r

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)

Related

Hide the sorting arrows of the column names in DT::datatable

How can we hide the sorting arrows that are next to the column names in DT::datatable()?
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
datatableOutput("table"))
)
server <- function(input, output) { }
output$table<-renderDataTable({
datatable("iris")
})
shinyApp(ui, server)
options = list(ordering = FALSE)
in the datatable function.
This turns off the sorting for all columns.
If you want to disable for some columns only, say column 2:
options = list(
columnDefs = list(
list(targets = 2, orderable = FALSE)
)
)

How to keep DT table borders within tabBox()

I want to control the position of a DT table output within a tabBox():
This example app gives this:
library(shiny)
library(bs4Dash)
library(DT)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody(
tabBox(
id = "tabset1",
height = 750,
tabPanel("Hello", "This is the hello tab",
DT::DTOutput("myTable")
))
)
),
server = function(input, output, session) {
output$myTable <- DT::renderDT({
DT::datatable(
mtcars)
})
}
)
As you can see the DT table is exceeding the borders of tabBox panel. How can we force DT to keep inside tabBox panel (width and height).
Desired output:
You can include in your tabBox the width parameter, in shiny max allowed is 12. Then, your ui part is:
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody(
tabBox(
id = "tabset1",
height = 750,
width = 12,
tabPanel("Hello", "This is the hello tab",
DT::DTOutput("myTable")
))
)
),
That look like this:
Another option its include an horizontal scroll to your tabBox:
shinyApp(
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody(
tabBox(
id = "tabset1",
height = 750,
#width = 12,
tabPanel("Hello", "This is the hello tab",
div(style = 'overflow-x: scroll', DT::dataTableOutput('myTable'))
))
)
),
server = function(input, output, session) {
output$myTable <- DT::renderDT({
DT::datatable(
mtcars)
})
}
)
That look like this:
We can also use scrollX option:
output$myTable <- DT::renderDT({
DT::datatable(
mtcars,
options = list(
scrollX = TRUE
)
)
})

Add a scroll bar for datatable in shiny when using wellPanel

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.

Adding a vertical and horizontal scroll bar to the DT table in R shiny

Please check the data table "Case Analyses Details" on the right. I want to fit the data table within the box, such that it aligns from right and bottom border in the box, such that we add a horizontal and vertical scroll bar to the DT which can be used to span the rows that overshoot the box.
## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
ui <- dashboardPage(
dashboardHeader(title = "My Chart"),
dashboardSidebar(
width = 0
),
dashboardBody(
box(title = "Data Path", status = "primary",height = "595" ,solidHeader = T,
plotOutput("trace_plot")),
box( title = "Case Analyses Details", status = "primary", height =
"595",width = "6",solidHeader = T,
div(DT::dataTableOutput("trace_table",width = 220)))
))
server <- function(input, output)
{
#Plot for Trace Explorer
output$trace_plot <- renderPlot({
plot(iris$Sepal.Length,iris$Sepal.Width)
})
output$trace_table <- renderDataTable({
mtcars
})
}
shinyApp(ui, server)
Something like this do?
rm(list = ls())
## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
ui <- dashboardPage(
dashboardHeader(title = "My Chart"),
dashboardSidebar(
width = 0
),
dashboardBody(
box(title = "Data Path", status = "primary",height = "595" ,solidHeader = T,
plotOutput("trace_plot")),
box( title = "Case Analyses Details", status = "primary", height =
"595",width = "6",solidHeader = T,
column(width = 12,
DT::dataTableOutput("trace_table"),style = "height:500px; overflow-y: scroll;overflow-x: scroll;"
)
)))
server <- function(input, output) {
#Plot for Trace Explorer
output$trace_plot <- renderPlot({
plot(iris$Sepal.Length,iris$Sepal.Width)
})
output$trace_table <- renderDataTable({
datatable(cbind(mtcars,mtcars), options = list(paging = FALSE))
})
}
shinyApp(ui, server)
This is an old question, but we can also use the dedicated options scrollX and scrollY to add scrollbars to the datatable:
library(shiny)
library(shinydashboard)
library(DT)
ui <- dashboardPage(
dashboardHeader(title = "My Chart"),
dashboardSidebar(
width = 0
),
dashboardBody(
box(title = "Data Path", height = 450,
plotOutput("trace_plot")),
box(title = "Case Analyses Details", height = 450,
DTOutput("trace_table")
))
)
server <- function(input, output) {
output$trace_plot <- renderPlot({
plot(iris$Sepal.Length,iris$Sepal.Width)
})
output$trace_table <- renderDataTable({
datatable(
cbind(mtcars, mtcars),
options = list(
scrollX = TRUE,
scrollY = "250px"
)
)
})
}
shinyApp(ui, server)

DT Fixed Header Frozen on all Tabs of Shiny App R

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)

Resources