CODEWITHSUNDEEP
shinydt
Ketty
Ketty

Reputation: 851

Column headers of Shiny data table gets shifted

When I run my Shiny app, the headers of my data tables get shifted to the left. See below.enter image description hereSay this table is on Tab A.

The headers get aligned correctly when I click on a different tab (Tab B),then click on Tab A again. See below for the corrected headers.

enter image description here

Any idea what's causing it? Below is a simplified version of my code. Thanks in advance!

ui.R

    library("shinythemes")

    fluidPage(title = "Segmentation App", theme = shinytheme("spacelab"),

        navbarPage("Segmentation", id = "allResults",
            tabPanel(value='result_scorecard', title='ScoreCard', 
                     sidebarLayout(
                       sidebarPanel(
                         h4("Select a cluster solution to profile"),
                         width = 3
                       ),

                       mainPanel(
                         verticalLayout(
                           helpText(strong('Summary of Cluster Solutions')),
                           column(DT::dataTableOutput('out_best'), width = 12),                              
                           helpText(strong('ScoreCard Table')),
                           column(DT::dataTableOutput('out_scorecard'), width = 12)

                         )
                       )
                     )
            ),

            tabPanel(value='profile', title='Profile', 
                     verticalLayout(
                         column(DT::dataTableOutput('prop_by_cluster_ind'), width=10)
                      )
            )
        )
    )

server.R

function(input, output, session) {

    best_sols <- reactive({
     A <- c(100, 101, 201)
     B <- c(100, 101, 201)
     C <- c(100, 101, 201)
     temp <- as.matrix(cbind(A, B, C))
     colnames(temp) <- c("A", "B", "C")
     rownames(temp) <- c("k=1","k=2","k=3")
     return(temp)
    })

    score_seg <- reactive({
      A <- c("solution=1","solution=2","solution=3","solution=4","solution=5")
      B <- c(100, 101, 201, 333, 444)
      C <- c(100, 101, 201, 333, 444)
      temp <- data.frame(A, B, C)
      colnames(temp) <- c("A", "B", "score_seg")
      return(temp)

    })

    profile_result_ind <- reactive({
      A1 <- c("var1","var2","var3","var4","var5")
      A2 <- c("var1","var2","var3","var4","var5")
      B <- c(100, 101, 201, 333, 444)
      C <- c(100, 101, 201, 333, 444)
      temp <- data.frame(A1, A2, B, C)
      colnames(temp) <- c("","","1","2")
      return(temp)
    })


    # Table 1

    output$out_best <- DT::renderDataTable({
        DT::datatable(best_sols(), caption = "", rownames = TRUE, options = list(autoWidth = TRUE, scrollX = TRUE, columnDefs = list(list(width = '100px', targets = 1)), paging = FALSE, searching = FALSE), selection='none') %>% formatRound(1:5, 3)
      #}
    })

    # Table 2

    output$out_scorecard <- DT::renderDataTable({
        DT::datatable(score_seg(), caption = "", rownames = F, options = list(autoWidth = TRUE, scrollX = TRUE, columnDefs = list(list(width = '200px', targets = 1)), paging = FALSE, searching = FALSE), selection='single') %>% formatRound(1:5, 3)
    })


    # Table 3
    output$prop_by_cluster_ind <- DT::renderDataTable({
        DT::datatable(profile_result_ind(), class= 'compact stripe', caption = '', rownames = F, options = list(autoWidth = TRUE, scrollX = TRUE, columnDefs = list(list(width = '300px', targets = 1), list(className = 'dt-left', targets="_all")), paging = FALSE, searching = FALSE)) %>% formatStyle(as.character(seq(1:2)))   
    }) 
}

Upvotes: 9

Views: 3467

Answers (2)

Victor Burnett
Victor Burnett

Reputation: 628

I had a table with long rownames such as you and had a similar problem with offset column names, but setting autoWidth=FALSE did not solve the problem. I discovered that it was being caused by scrollX=TRUE. I changed ScrollX=FALSE and wrapped the datatable in a div with overflow-x=TRUE to regain the scroll feature:

div(style="overflow-x:auto",renderDataTable({tableName},options=list(scrollX=FALSE))

Upvotes: 2

Ketty
Ketty

Reputation: 851

I figured it out.

The headers will be aligned correctly if we change the autoWidth option to FALSE.

Upvotes: 4

Related Questions