1

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)
firmo23
  • 7,490
  • 2
  • 38
  • 114

1 Answers1

1

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)
ismirsehregal
  • 30,045
  • 5
  • 31
  • 78
  • interesting solution.is it guaranteed that the tables will fit in any screen resolution though since they have static cellwidths? – firmo23 Jun 16 '22 at 12:14
  • I thought you wanted to keep the table size independent from the screen resolution. Otherwise you'd have to use some relative css units. – ismirsehregal Jun 16 '22 at 12:19
  • so with your solution its independent from the screen resolution? – firmo23 Jun 16 '22 at 12:49
  • The tables will always have the same size (in px). For smaller screens this will result in a horizontal scrollbar for the whole web page. Just run the app and resize the browser window to test it. – ismirsehregal Jun 16 '22 at 12:52
  • could u check that? https://stackoverflow.com/questions/73097631/dataframe-is-subseted-by-row-number-and-not-by-cell-value-after-clicking-on-dt – firmo23 Jul 24 '22 at 12:44
  • could u check this shiny issue ? https://stackoverflow.com/questions/73744699/use-the-edges-dataframe-which-is-included-inside-a-process-map-object-to-subse – firmo23 Sep 16 '22 at 14:08