Home > other >  Set the width of datatable or the width of its columns in a shiny app
Set the width of datatable or the width of its columns in a shiny app

Time:06-16

In the shiny app below I display 3 tables in the same row.How can I set any table to be displayed as whole without having to use scrollX regardless of the screen resolution of any machine?Basically Im looking for a way to set its columns' width or its total width.

library(shiny)
library(DT)
library(dplyr)
dat<-structure(list(Population = c("p1", "p1", "p1", "p1", "p1", "p1", 
                                   "p1", "p1", "p1", "p1", "p2", "p2", "p2", "p2", "p2", "p2"), 
                    var1 = c("p1_1_a", "p1_1_b", "p1_2_a", "p1_2_b", "p1_3_a", 
                             "p1_3_b", "p1_4_a", "p1_4_b", "p1_5_a", "p1_5_b", "p2_a", 
                             "p2_b", "p2_c", "p2_d", "p2_e", "p2_f"), 
                    
                    Population2 = c("p1", "p1", "p1", "p1", "p1", "p1", 
                                   "p1", "p1", "p1", "p1", "p2", "p2", "p2", "p2", "p2", "p2"), 
                    var12 = c("p1_1_a", "p1_1_b", "p1_2_a", "p1_2_b", "p1_3_a", 
                             "p1_3_b", "p1_4_a", "p1_4_b", "p1_5_a", "p1_5_b", "p2_a", 
                             "p2_b", "p2_c", "p2_d", "p2_e", "p2_f"),U = c(1, 1, 0, 0, 
                                                                            1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0), D = c(25, 12, 14, 11, 
                                                                                                                       3, 3, 2, 4, 5, 0, 0, 0, 0, 25, 12, 14),
                    Udad = c(1, 1, 0, 0, 
                          1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0), Ddshgg = c(25, 12, 14, 11, 
                                                                     3, 3, 2, 4, 5, 0, 0, 0, 0, 25, 12, 14)), row.names = c(NA, 
                                                                                                                                                                              -16L), class = c("tbl_df", "tbl", "data.frame"))

ui <- fluidPage(
  fluidRow(
    column(4,
           DTOutput("table")),
    column(4,
           DTOutput("table2")
           ),
    column(4,
           DTOutput("table3"))
    
  )


)

server <- function(input, output){
  
  output[["table"]] <- renderDT({
    dtable <- datatable(dat, rownames = FALSE, 
                        options = list(
                          scrollX = TRUE,
                          order = list(list(1, 'asc')),
                          pageLength=16#ascending order
                          
                        ))
    
    
    dtable
  })
  output[["table2"]] <- renderDT({
    dtable <- datatable(dat, rownames = FALSE, 
                        options = list(
                          scrollX = TRUE,
                          order = list(list(1, 'asc')),
                          pageLength=16#ascending order
                          
                        ))
    
    
    dtable
  })
  output[["table3"]] <- renderDT({
    dat$Comparison1<-NA
    dat$cOMPARISON2<-NA
    dtable <- datatable(dat, rownames = FALSE, 
                        options = list(
                          scrollX = TRUE,
                          order = list(list(1, 'asc')),
                          pageLength=16#ascending order
                          
                        ))
    
    
    dtable
  })
}

shinyApp(ui, server)

CodePudding user response:

You could use splitLayout instead of column:

library(shiny)
library(DT)
library(dplyr)

dat <- structure(list(Population = c("p1", "p1", "p1", "p1", "p1", "p1", "p1",
                      "p1", "p1", "p1", "p2", "p2", "p2", "p2", "p2", "p2"), var1 = c("p1_1_a",
                      "p1_1_b", "p1_2_a", "p1_2_b", "p1_3_a", "p1_3_b", "p1_4_a", "p1_4_b",
                      "p1_5_a", "p1_5_b", "p2_a", "p2_b", "p2_c", "p2_d", "p2_e", "p2_f"),
                      Population2 = c("p1", "p1", "p1", "p1", "p1", "p1", "p1", "p1", "p1", "p1",
                      "p2", "p2", "p2", "p2", "p2", "p2"), var12 = c("p1_1_a", "p1_1_b", "p1_2_a",
                      "p1_2_b", "p1_3_a", "p1_3_b", "p1_4_a", "p1_4_b", "p1_5_a", "p1_5_b", "p2_a",
                      "p2_b", "p2_c", "p2_d", "p2_e", "p2_f"),U = c(1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1,
                      1, 0, 1, 1, 0), D = c(25, 12, 14, 11, 3, 3, 2, 4, 5, 0, 0, 0, 0, 25, 12, 14),
                      Udad = c(1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0), Ddshgg = c(25, 12,
                      14, 11, 3, 3, 2, 4, 5, 0, 0, 0, 0, 25, 12, 14)), row.names = c(NA, -16L),
                      class = c("tbl_df", "tbl", "data.frame"))

ui <- fluidPage(fluidRow(
  splitLayout(
    style = "margin-right: 0px;",
    DTOutput("table", width = "100%"),
    DTOutput("table2", width = "100%"),
    DTOutput("table3", width = "100%"),
    cellWidths = c("630px", "630px", "900px"),
    cellArgs = list(style = "margin-right: 15px;")
  )
))

server <- function(input, output) {
  output[["table"]] <- renderDT({
    dtable <- datatable(
      dat,
      rownames = FALSE,
      options = list(
        scrollX = FALSE,
        order = list(list(1, 'asc')),
        pageLength = 16 # ascending order
      )
    )
    dtable
  })
  output[["table2"]] <- renderDT({
    dtable <- datatable(
      dat,
      rownames = FALSE,
      options = list(
        scrollX = FALSE,
        order = list(list(1, 'asc')),
        pageLength = 16 # ascending order
      )
    )
    dtable
  })
  output[["table3"]] <- renderDT({
    dat$Comparison1 <- NA
    dat$cOMPARISON2 <- NA
    dtable <- datatable(
      dat,
      rownames = FALSE,
      options = list(
        scrollX = FALSE,
        order = list(list(1, 'asc')),
        pageLength = 16 # ascending order
      )
    )
    dtable
  })
}

shinyApp(ui, server)
  • Related