Is there a simple way to get the following tabBox to span the entire height of the dashboardBody?
app_ui <- function() {
shinydashboard::dashboardPage(
shinydashboard::dashboardHeader(title = "Baseball Statistics"),
shinydashboard::dashboardSidebar(
width = 250
),
shinydashboard::dashboardBody(
shinydashboard::box(title = "Individual"),
shinydashboard::tabBox(title = "Stats",
shiny::tabPanel("Batting", DT::DTOutput("batting")),
shiny::tabPanel("Pitching", DT::DTOutput("pitching")),
shiny::tabPanel("Fielding", DT::DTOutput("fielding"))
)
)
)
}
I would like the datatable to occupy as much vertical screen as possible:
The following answer was not successful - Shinydashboard Tabbox Height
I attempted to integrate the above answer by:
shinydashboard::dashboardBody(
shinydashboard::box(title = "Individual"),
shinydashboard::tabBox(title = "Stats",
shiny::tags$head(
shiny::tags$style(shiny::HTML(" #tabBox { height:90vh !important; } "))
),
id="tabBox",
shiny::tabPanel("Batting", DT::DTOutput("batting")),
shiny::tabPanel("Pitching", DT::DTOutput("pitching")),
shiny::tabPanel("Fielding", DT::DTOutput("fielding"))
)
)
The output looks like:
It probably depends on the oter DT options.
When I use only scrollX options
output$batting <- renderDT(iris,
options = list( scrollX = TRUE))
I get
This is my final try, it seems the other things didn't work out, so:
output$dataset <- DT::renderDT(dataframes$df.response,
callback = JS(js),
filter = "top",
rownames = FALSE,
selection = list(target = "row+column"),
extensions = c("ColReorder"),
options = list(
# scrollX = TRUE,
# lengthMenu = c(15, 50, 100, 200, 500),
# colReorder = list(realtime = FALSE),
pageLength = 1000,
scrollY=TRUE
)
)
the pagelength element to the max rows of your data set it will show it entirely when loading. like in this screen:. Is this a possible workaround for you?
Related
please I have the following example to show a layout issue I'm facing with my R shiny app. Example should be entirely reproducible:
ui <- dashboardPage(
title = "Dashboard test", # this is the name of the tab in Chrome browserr
dashboardHeader(title = "Web Portal"),
dashboardSidebar(
sidebarMenu(
menuItem('Retail', tabName = "retail", icon = icon("th"),
menuItem('Dashboard', tabName = 'retail_dashboard'))
)
),
dashboardBody(
tabItem(tabName = "retail_dashboard",
tabsetPanel(type = "tabs",
tabPanel("Dashboard",
h3("Test."),
fluidRow(column(3,
dataTableOutput("table_test1", width = '100%')),
column(3,
dataTableOutput("table_test2", width = '100%'))
)
)
)
)
)
)
server <- function(input, output, session) {
output$table_test1 <- renderDataTable({
df <- data.frame(BUCKET=c("1","2"), ITEM=c(48,53), VALUE = c(7.88, 5.12), stringsAsFactors = F)
datatable(df,
rownames= F,
#colnames = colnames_var,
filter = 'none',
extensions = 'Buttons',
caption = NULL,
options = list(scrollX = T
#, headerCallback = js_col_header # this is to show/hide column headers
, lengthChange = T
#, pagingType = "numbers" # this hides the Next and Previous buttons --> https://datatables.net/reference/option/pagingType
, paging = T # this completely hides the Next, Previous and Page number at the bottom of the table
, autoWidth = T
, pageLength = 5 # this determines how many rows we want to see per page
, dom = 'Blfrtip'
, buttons = NULL
, info = T # this will hide the "Showing 1 of 2..." at the bottom of the table --> https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
, searching = T # this removes the search box -> https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
, ordering = F # https://stackoverflow.com/questions/54318475/hide-the-column-names-in-dtdatatable useful especially when we want to hide column names
))
})
output$table_test2 <- renderDataTable({
df <- data.frame(BUCKET=c("1","2"), ITEM=c(48,53), VALUE = c(7.88, 5.12), stringsAsFactors = F)
datatable(df,
rownames= F,
#colnames = colnames_var,
filter = 'none',
extensions = 'Buttons',
caption = NULL,
options = list(scrollX = F
#, headerCallback = js_col_header # this is to show/hide column headers
, lengthChange = T
#, pagingType = "numbers" # this hides the Next and Previous buttons --> https://datatables.net/reference/option/pagingType
, paging = T # this completely hides the Next, Previous and Page number at the bottom of the table
, autoWidth = T
, pageLength = 5 # this determines how many rows we want to see per page
, dom = 'Blfrtip'
, buttons = NULL
, info = T # this will hide the "Showing 1 of 2..." at the bottom of the table --> https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
, searching = T # this removes the search box -> https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
, ordering = F # https://stackoverflow.com/questions/54318475/hide-the-column-names-in-dtdatatable useful especially when we want to hide column names
))
})
}
cat("\nLaunching 'shinyApp' ....")
shinyApp(ui, server)
Problem 1: if I open this app on a large screen, table_test2 is nicely taking all the expected real estate of the screen, ranging entirely within 3 columns.
However, table_test1 does not (see my screenshot).
Main difference is that table_test1 has scrollX =T vs table_test2 that has scrollX =F.
How can I keep scrollX = T and visualize table_test1 the same way I visualize table_test2 (meaning, with no empty side spaces)? (see red color in attached screenshot)
Problem 2:
How come the alignment of table_test1 is a bit messed up and column names are not aligned to table columns? (see blue color in attached screenshot)
Changing scrollX is not an option since some users have a smaller screen and with scrollX =F tables would not show up properly on some users' monitors.
Thanks
Take out the autoWidth option from datatable
datatable(
data = df,
rownames = FALSE,
filter = "none",
extensions = "Buttons",
caption = NULL,
options = list(
scrollX = TRUE,
lengthChange = TRUE,
paging = TRUE,
pageLength = 5,
dom = "Blfrtip",
buttons = NULL,
info = TRUE,
searching = TRUE,
ordering = FALSE
)
)
I am using the button colvis from the DT package to select which columns I would like to show in the table. Here you have more info about the button colvis.
It works perfectly fine, it hides the columns that I don't want to select and the result is shown to the user.
However, it seems that this info is not updated when I download the file.
If I only select "Petal.Width" and "Species":
Then, I download the file... and I open it. I still have all the columns and not the selected ones.
I have been trying to find a solution, but I haven't found anything.
Does anyone know how to fix it?
Thanks in advance.
Here is my code:
library(shiny)
library(DT)
ui <- fluidPage(
dataTableOutput("table")
)
server <- function(input, output, session) {
output$table <- renderDataTable({
datatable(
iris,
filter = list(position = 'top', clear = FALSE),
selection = "none", #this is to avoid select rows if you click on the rows
rownames = FALSE,
extensions = 'Buttons',
options = list(
scrollX = TRUE,
dom = 'Blrtip',
buttons =
list(I('colvis'),'copy', 'print', list(
extend = 'collection',
buttons = list(
list(extend = 'csv', filename = paste0("iris"), title = NULL),
list(extend = 'excel', filename = paste0("iris"), title = NULL)),
text = 'Download'
)),
lengthMenu = list(c(10, 30, 50, -1),
c('10', '30', '50', 'All'))
),
class = "display"
)
})
}
shinyApp(ui, server)
library(DT)
datatable(
iris,
extensions = "Buttons",
options = list(
dom = "Bfrtip",
buttons = list(
I("colvis"),
list(
extend = "collection",
text = "Download",
buttons = list(
list(
extend = "csv",
exportOptions = list(
columns = ":visible"
)
)
)
)
)
)
)
Thanks to Stéphane Laurent's answer, I managed to find an answer.
I had some problems to have both buttons (csv and excel) and how to organise the lists with the proposed solution, but I found the way to do it.
I will add the answer with the original code just in case someone has problems like me.
library(shiny)
library(DT)
ui <- fluidPage(
dataTableOutput("table")
)
server <- function(input, output, session) {
output$table <- renderDataTable({
datatable(
iris,
filter = list(position = 'top', clear = FALSE),
selection = "none", #this is to avoid select rows if you click on the rows
rownames = FALSE,
extensions = 'Buttons',
options = list(
scrollX = TRUE,
dom = 'Blrtip',
buttons =
list(I('colvis'),'copy', 'print', list(
extend = 'collection',
text = 'Download',
buttons = list(
list(
extend = "csv", filename = paste0("iris"), title=NULL,
exportOptions = list(
columns = ":visible")
),
list(
extend = "excel", filename = paste0("iris"), title=NULL,
exportOptions = list(
columns = ":visible")
)
)
)),
lengthMenu = list(c(10, 30, 50, -1),
c('10', '30', '50', 'All'))
),
class = "display"
)
})
}
shinyApp(ui, server)
I'm trying to change the width of some columns in a DT::datatable, unfortunately using the columnDefs option only appears to work when there are a small number of columns in the data.
When I add all the columns to my data the column widths no longer follow what I put in the columnDefs options.
Here is an example, as you can see the 1st table the width are all constant, whereas in the second table I have been able to manual set the widths as I desire. Removing the scrollX argument doesn't work either, and given the number of columns my data has I need it in there.
library(MASS)
library(shiny)
library(DT)
ui <- fluidPage(
mainPanel(
DT::dataTableOutput("table1"),
br(),
br(),
br(),
DT::dataTableOutput("table2")
)
)
server <- function(input, output) {
output$table1 <- DT::renderDataTable({
DT::datatable(
Cars93[,-(20:27)],
rownames = FALSE,
options = list(
pageLength = 5,
autowidth = TRUE,
scrollX = TRUE,
searching = TRUE,
ordering = TRUE,
paging = TRUE,
columnDefs = list(list(width = "200px", targets = c(0:2)),
list(width = "20px", targets = 3),
list(width = "50px", targets = 4))
)
)
})
output$table2 <- DT::renderDataTable({
DT::datatable(
Cars93[,-(6:27)],
rownames = FALSE,
options = list(
pageLength = 5,
autowidth = TRUE,
scrollX = TRUE,
searching = TRUE,
ordering = TRUE,
paging = TRUE,
columnDefs = list(list(width = "200px", targets = c(0:2)),
list(width = "20px", targets = 3),
list(width = "50px", targets = 4))
)
)
})
}
shinyApp(ui, server)
What do I need to change in my code to be able to set the column widths in the 1st table like I have them in the 2nd table while will having all the columns and scrollX?
Thanks
Try:
ui <- fluidPage(
tags$head(
tags$style(
HTML("table {table-layout: fixed;}")
)
),
......
and replace autowidth with autoWidth.
The DT package in Shiny produces a table with a searchbar that searches over every column in the table. I have a column of metadata which I do not want to display in the table, but I still want the rows to come up if I search with the search bar.
For example, the app below contains a column titled searchCol . This column is just letters. I want to hide this column in the actual table, and I want to be able to search for the letter b , using the DT search bar, and have the second row show up.
Is there a way to hide the column but have it still work with the search bar?
library(shiny)
library(DT)
ui <- fluidPage(
DTOutput('tbl1'),
)
server <- function(input, output, session) {
output$tbl1 <- DT::renderDT(server = TRUE, {
datatable(
cbind(data.frame(replicate(3,sample(0:1,26,rep=TRUE))), data.frame(searchCol = letters)),
escape = FALSE,
rownames = FALSE,
filter = list(position = "top", clear = FALSE, plain = TRUE),
selection = "single",
options = list(
autoWidth = TRUE,
pageLength = 50,
lengthMenu = c(50, 100, 1000),
dom = 'Blfrtip',
buttons = c('copy', 'excel')
)
)
})
}
shinyApp(ui, server)
I've adapted the answer from here to the format you need to use in DT::datatable. You can use columnDefs to define the render options for the different columns, targets defines which column you mean. Please note that the JS library datatables starts counting columns at 0.
library(shiny)
library(DT)
ui <- fluidPage(
DTOutput('tbl1'),
)
server <- function(input, output, session) {
output$tbl1 <- DT::renderDT(server = TRUE, {
datatable(
cbind(data.frame(replicate(3,sample(0:1,26,rep=TRUE))), data.frame(searchCol = letters)),
escape = FALSE,
rownames = FALSE,
filter = list(position = "top", clear = FALSE, plain = TRUE),
selection = "single",
options = list(
autoWidth = TRUE,
pageLength = 50,
lengthMenu = c(50, 100, 1000),
dom = 'Blfrtip',
buttons = c('copy', 'excel'),
columnDefs = list(
list(
targets = 3,
searchable = TRUE,
visible = FALSE
)
)
)
)
})
}
shinyApp(ui, server)
I don't know how to make sure the size of my DT::renderDataTable fit in my box.
Here is a picture of my Shiny Render
Does anybody know how to make sure the table fit in the box ? Or can I add a slider under the table to scroll around other variables that are not on the screen ?
Here is my code:
server.R
output$table = DT::renderDataTable({
DT::datatable(
round(df,2),
rownames = TRUE,
extensions = 'Buttons',
options = list(
autoWidth = FALSE,
columnDefs = list(list(width = "125px", targets = "_all")),
dom = 'tpB',
lengthMenu = list(c(5, 15, -1), c('5', '15', 'All')),
pageLength = 15,
buttons = list(
list(
extend = "collection",
text = 'Show More',
action = DT::JS("function ( e, dt, node, config ) {
dt.page.len(50);
dt.ajax.reload();}")
),list(
extend = "collection",
text = 'Show Less',
action = DT::JS("function ( e, dt, node, config ) {
dt.page.len(10);
dt.ajax.reload();}")
)
)
)
)
})
body.R
box( title = "A little taste of the dataset",
width = 12,
DT::dataTableOutput("table") )
You can simply add scrollX = TRUE to the datatable options:
library(shiny)
library(shinydashboard)
DF <- data.frame(replicate(50, runif(1000, 0, 10)))
ui <- fluidPage(box(
title = "A little taste of the dataset",
width = 12,
DT::dataTableOutput("myTable")
))
server <- function(input, output, session) {
output$myTable = DT::renderDataTable({
DT::datatable(
round(DF, 2),
rownames = TRUE,
extensions = 'Buttons',
options = list(
autoWidth = FALSE, scrollX = TRUE,
columnDefs = list(list(
width = "125px", targets = "_all"
)),
dom = 'tpB',
lengthMenu = list(c(5, 15,-1), c('5', '15', 'All')),
pageLength = 15,
buttons = list(
list(
extend = "collection",
text = 'Show More',
action = DT::JS(
"function ( e, dt, node, config ) {
dt.page.len(50);
dt.ajax.reload();}"
)
),
list(
extend = "collection",
text = 'Show Less',
action = DT::JS(
"function ( e, dt, node, config ) {
dt.page.len(10);
dt.ajax.reload();}"
)
)
)
)
)
})
}
shinyApp(ui = ui, server = server)