Is there any way, in R Shiny, to set the scroll bar from a datatable automatically to the right side when rendered (i.e. to the last column), instead of the left side as it is set by default ?
Base example :
library(shiny)
runApp(shinyApp(
ui = fluidPage(
DT::dataTableOutput("results", width = 300)
),
server = function(input, output, session) {
output$results <- DT::renderDataTable(
mtcars,
options = list(scrollX = TRUE, bPaginate = F)
)
}
))
library(shiny)
runApp(shinyApp(
ui = fluidPage(
tags$div(id = "parent",
DT::dataTableOutput("results", width = 300)
),
tags$style("
#parent {direction: rtl; max-height: 80vh; overflow: auto; margin: 0 auto}
#results {direction: ltr; float: left}")
),
server = function(input, output, session) {
output$results <- DT::renderDataTable(
mtcars,
options = list(scrollX = TRUE, bPaginate = F)
)
}
))
EDIT
Here is what you want:
library(shiny)
library(DT)
callback <- "
$('div.dataTables_scrollBody').animate({scrollLeft: '+=500'}, 1000);
"
runApp(shinyApp(
ui = fluidPage(
DTOutput("results", width = 300)
),
server = function(input, output, session) {
output$results <- renderDT(
datatable(
mtcars,
callback = JS(callback),
options = list(scrollX = TRUE)
)
)
}
))
1000 is 1000ms, this is the duration of the animation. I don't understand why +=300 is not enough.
Add this line in the ui: tags$style('#results {direction: rtl;}')
library(shiny)
runApp(shinyApp(
ui = fluidPage(
DT::dataTableOutput("results", width = 300),
tags$style('#results {direction: rtl;}')
),
server = function(input, output, session) {
output$results <- DT::renderDataTable(
mtcars,
options = list(scrollX = TRUE, bPaginate = F)
)
}
))
Related
I'd like to use shinyWidgets::materialSwitch instead of a checkbox in my app for an improved UI.
However, I can't seem to get materialSwitch to work when used with renderUI/uiOutput. The input displays properly but doesn't seem to register a click to "switch".
For the purposes of my app - I need this to be inside a renderUI.
Pkg Versions:
shinyWidgets_0.7.2
shiny_1.7.2
library(shiny)
library(shinyWidgets)
# library(shinyjs)
ui <- fluidPage(
div(class="row",
column(width = 3,
uiOutput("switch")
)
)
)
server <- function(input, output, session) {
output$switch = renderUI({
materialSwitch(
inputId = "switch",
label = "Show Count",
right = TRUE,
status = "primary",
value = FALSE
)
})
}
shinyApp(ui = ui, server = server)
Why is this happening, and how can the problem be fixed?
The issue is that you give same name "switch" to both uiOutput.outputId and materiaSwitch.inputId.
It works OK when they get different ids:
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
div(class="row",
column(width = 3,
uiOutput("switch"),
textOutput("result")
)
)
)
server <- function(input, output, session) {
output$switch = renderUI({
materialSwitch(
inputId = "switchButton",
label = "Show Count",
right = TRUE,
status = "primary",
value = FALSE
)
})
output$result = renderText(input$switchButton)
}
shinyApp(ui = ui, server = server)
Here is how it should work:
library(shiny)
library(shinyWidgets)
# library(shinyjs)
ui <- fluidPage(
div(style = 'position: absolute;left: 50px; top:100px; width:950px;margin:auto',
materialSwitch(inputId = "switch",
label = "Show Count",
right = TRUE,
status = "primary",
value = FALSE)
)
)
server <- function(input, output, session) {
output$value1 <- renderText({ input$switch })
}
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 trying to use a package that allows users to graph their data in shiny (esquiss). It works fine. However the user interface for the shiny module in the package requires a fixed height container. I have therefore placed the call to the module in tag$div (inside a modal) called by a button.
The problem is that this call to this module seems to get rid of all the scrollbars for the main page of the app (so I can't scroll to the bottom of the main page (it is a one page app).
How can I limit the html of the module to prevent it from overriding the rest of the app? The code for the module being called is here.
My reproducible example follows:
ui.R
library(shiny)
library(esquisse)
library(shinyBS)
ui <- fluidPage(
dashboardPage(
dashboardHeader(title = ''),
dashboardSidebar(
sidebarMenu(
menuItem("Dashboard")
)),
dashboardBody(
actionButton(inputId = "esquissGraphs",label = "esquissGraphs"),
DT::dataTableOutput("mytable"),
bsModal("modalExample", "Data Table", "esquissGraphs", size = "large",
tags$h1("Use esquisse as a Shiny module"),
radioButtons(
inputId = "data",
label = "Data to use:",
choices = c("Mydftbbinnit", "mtcars"),
inline = TRUE
),
tags$div(
style = "height: 700px;", # needs to be in fixed height container
esquisserUI(
id = "esquisse",
header = FALSE, # dont display gadget title
choose_data = FALSE # dont display button to change data
)
)
)
)
)
)
server.R
RV <- reactiveValues(data = data.frame())
RV2 <- reactiveValues(data = data.frame())
server <- function(input, output, session) {
n<-c("1","434","101")
t<-c("Bugs","Mugs","Thugs")
RV$data<-data.frame(n,t,stringsAsFactors = FALSE)
o<-c("1","434","101")
p<-c("Bugs","Mugs","Thugs")
RV2$data<-data.frame(o,p,stringsAsFactors = FALSE)
output$mytable = DT::renderDataTable({
mtcars
})
data_r <-reactiveValues(data = data.frame())
observeEvent(input$data, {
if (input$data == "Mydftbbinnit") {
data_r$data <- RV$data
data_r$name <- "Mydftbbinnit"
} else {
data_r$data <- RV2$data
data_r$name <- "The rest"
}
})
callModule(module = esquisserServer, id = "esquisse", data = data_r)
}
shinyApp(ui, server)
You need to add
tags$style("html, body {overflow: visible !important;")
in your UI to force scrollbar to appear.
Source : https://github.com/dreamRs/esquisse/blob/master/R/esquisserUI.R
Full example gives :
library(shiny)
library(shinydashboard)
library(esquisse)
library(shinyBS)
library(shiny)
library(esquisse)
library(shinyBS)
ui <- fluidPage(
dashboardPage(
dashboardHeader(title = ""),
dashboardSidebar(
sidebarMenu(
menuItem("Dashboard")
)
),
dashboardBody(
tags$style("html, body {overflow: visible !important;"),
actionButton(inputId = "esquissGraphs", label = "esquissGraphs"),
DT::dataTableOutput("mytable"),
bsModal("modalExample", "Data Table", "esquissGraphs",
size = "large",
tags$h1("Use esquisse as a Shiny module"),
radioButtons(
inputId = "data",
label = "Data to use:",
choices = c("Mydftbbinnit", "mtcars"),
inline = TRUE
),
tags$div(
style = "height: 700px;", # needs to be in fixed height container
esquisserUI(
id = "esquisse",
header = FALSE, # dont display gadget title
choose_data = FALSE # dont display button to change data
)
)
)
)
)
)
RV <- reactiveValues(data = data.frame())
RV2 <- reactiveValues(data = data.frame())
server <- function(input, output, session) {
n <- c("1", "434", "101")
t <- c("Bugs", "Mugs", "Thugs")
RV$data <- data.frame(n, t, stringsAsFactors = FALSE)
o <- c("1", "434", "101")
p <- c("Bugs", "Mugs", "Thugs")
RV2$data <- data.frame(o, p, stringsAsFactors = FALSE)
output$mytable <- DT::renderDataTable({
mtcars
})
data_r <- reactiveValues(data = data.frame())
observeEvent(input$data, {
if (input$data == "Mydftbbinnit") {
data_r$data <- RV$data
data_r$name <- "Mydftbbinnit"
} else {
data_r$data <- RV2$data
data_r$name <- "The rest"
}
})
callModule(module = esquisserServer, id = "esquisse", data = data_r)
}
shinyApp(ui, server)
I am developing a Shiny app with a plot (plot1 in the code) that is reactive to a data table (rhandsontable) and it displays the item selected on the table.
The table is very large so you have to scroll down to see everything. But I want the plot to be always visible, so to be fixed in the layout while you scroll down the table.
There is anyway to do it? I have done a lot of research but any answer that can help me.
My UI code is that:
ui <- dashboardPage(
dashboardHeader(title = "IG Suppliers: Tim"),
dashboardSidebar(
sidebarMenu(
menuItem("Data Cleansing", tabName = "DataCleansing", icon = icon("dashboard")),
selectInput("supplier","Supplier:", choices = unique(dt_revision_tool$Supplier)),
#selectInput("supplier","Supplier:", choices = 'Phillips'),
selectInput("segment","Segment:", choices = unique(dt_revision_tool$Segment_Name), multiple = TRUE, selected = unique(dt_revision_tool$Segment_Name)[1]),
#selectInput("segment","Segment:", choices = sgm),
selectInput("alert","Alert", choices = unique(dt_revision_tool$Alert),selected = "Yes"),
#selectInput("alert","Alert", choices = c('Yes','No'),selected = "Yes"),
selectInput("dfu","DFU", choices = c("NULL",unique(dt_revision_tool$DFU)),selected = "NULL"),
tags$hr()
# h5("Save table",align="center"),
#
# div(class="col-sm-6",style="display:inline-block",
# actionButton("save", "Save"),style="float:center")
)
),
dashboardBody(
shinyjs::useShinyjs(),
#First Tab
tabItems(
tabItem(tabName= "DataCleansing",
fluidPage(theme="bootstrap.css",
fluidRow(
plotOutput('plot1')
),
fluidRow(
verbatimTextOutput('selected'),
rHandsontableOutput("hot")
)
)
)
# #Second Tab
# tabItem(tabName = "Forecast",
# h2('TBA')
# )
)
)
)
The server code is that:
server <- shinyServer(function(input, output) {
if (file.exists("DF.RData")==TRUE){
load("DF.RData")
}else{
load("DF1.RData")
}
rv <- reactiveValues(x=dt_revision_tool)
dt <- reactiveValues(y = DF)
observe({
output$hot <- renderRHandsontable({
view = data.table(update_view(rv$x,input$alert,input$segment,input$supplier,dt$y,input$dfu))
if (nrow(view)>0){
rhandsontable(view,
readOnly = FALSE, selectCallback = TRUE, contextMenu = FALSE) %>%
hot_col(c(1:12,14),type="autocomplete", readOnly = TRUE)
}
})
})
observe({
if (!is.null(input$hot)) {
aux = hot_to_r(input$hot)
aux = subset(aux, !is.na(Cleansing_Suggestion) | Accept_Cleansing,select=c('DFU','Week','Cleansing_Suggestion',
'Accept_Cleansing'))
names(aux) = c('DFU','Week','Cleansing_Suggestion_new','Accept_Cleansing_new')
dt$y = update_validations(dt$y,aux)
DF = dt$y
save(DF, file = 'DF.RData')
}
})
output$plot1 <- renderPlot({
view = data.table(update_view(rv$x,input$alert,input$segment,input$supplier,dt$y,input$dfu))
if (nrow(view)>0){
if (!is.null(( data.table(update_view(rv$x,input$alert,input$segment,input$supplier,dt$y,input$dfu)))[input$hot_select$select$r]$DFU)) {
s = make_plot2(rv$x,(data.table(update_view(rv$x,input$alert,input$segment,input$supplier,dt$y,input$dfu)))[input$hot_select$select$r]$DFU,(data.table(update_view(rv$x,input$alert,input$segment,input$supplier,dt$y,input$dfu)))[input$hot_select$select$r]$Article_Name)
print(s)
}
}
})
})
Any help or idea will be welcome!
Thanks!
Aida
Here is an example of using CSS position: fixed to do this. You can adjust the position top and margin-top according to your requirement.
library(shiny)
ui <- shinyUI(fluidPage(
titlePanel("Example"),
sidebarLayout(
sidebarPanel(
tags$div(p("Example of fixed plot position"))
),
mainPanel(
plotOutput("plot"),
tableOutput("table"),
tags$head(tags$style(HTML("
#plot {
position: fixed;
top: 0px;
}
#table {
margin-top: 400px;
}
")))
)
)
))
server <- shinyServer(function(input, output, session) {
output$plot <- renderPlot({
plot(iris$Sepal.Length, iris$Sepal.Width)
})
output$table <- renderTable({
iris
})
})
shinyApp(ui = ui, server = server)
my server.R
shinyServer(function(input, output) {
output$table0 <- renderPrint({
confusionMatrix(sms_results$predict_type,
sms_results$actual_type, positive = "spam")
})
output$table <- renderDataTable({
table(sms_results$actual_type, sms_results$predict_type)
})
output$table1 <- renderDataTable({
CrossTable(sms_test_pred, sms_test_labels,
prop.chisq = FALSE, prop.t = FALSE, prop.r = FALSE,
dnn = c('predicted', 'actual'))
})
ui.R
shinyUI(fluidPage(
# Application title
titlePanel("Evaluating Model Performance"),
mainPanel(
plotOutput("plot"),
column(12,
dataTableOutput('table')
)
),
dataTableOutput('table0')
)
)
So, how to external view Crosstable and confusion matrix in shiny?
presuming all global variable loaded and library, runapp with this code
uir.r
library(shiny)
shinyUI(fluidPage(
# Application title
titlePanel("Machine Learning - Evaluating Model Performance"),
br(),br(),
sidebarLayout(
sidebarPanel(
h2("Davin", align = "center"),
h2("(>..<)", align = "center", style = "color:blue"),
img(src = "40.png", height = 150, width = 300,style="display: block; margin-left: auto; margin-right: auto;")
),
mainPanel(
plotOutput("plot"),
column(12,dataTableOutput('table')),
h2("Kappa Table", align = "center"),verbatimTextOutput('tabkapp'),
h2("xTable", align = "center"),verbatimTextOutput('table1'),
h2("ROC prob", align = "center"),
column(12,dataTableOutput('tables'))
))))
# column(12,tableOutput('tables'))
with verbatimtextoutput seems can show this server.r
shinyServer(function(input, output) {
output$table1 <- renderPrint({
ctab <- CrossTable(sms_test_pred, sms_test_labels,
prop.chisq = FALSE, prop.t = FALSE, prop.r = FALSE,
dnn = c('predicted', 'actual'))
})
output$tabkapp <- renderPrint({
tbkp <- Kappa(table(sms_results$actual_type, sms_results$predict_type))
tbkp
})
})
to web external view
output in web external view
output in web external view
any way to make it better ? its on ascii style (i think)... i want it like "datatableoutput"
i am okay