Centering rHandsontableOutput - Shiny

Question

I'm trying to center two tables created using rhandsontable in column and get two weirdly split tables:

When I do not try to center, everything is fine.

Does anyone know what is going wrong and how to center my tables?

Here is my MWE:

rm(list=ls())
library(shiny)
library(rhandsontable)

# Create initial data frames 
x1 <- x2 <- x3 <- x4 <- data.frame(v1=c(1,2), v2 <- c(3,4))

# Server
server <- shinyServer(function(input, output, session) {

  # Data frame 1 to hot 
  previousX1 <- reactive({x1})
  changeX1 <- reactive({
    if(is.null(input$hot_x1)){return(previousX1())}
    else{X1 <- as.data.frame(hot_to_r(input$hot_x1))
    # Perform some operations on X1
    }
  })
  output$hot_x1 <- renderRHandsontable({rhandsontable(changeX1())})

  # Data frame 2 to hot
  previousX2 <- reactive({x2})
  changeX2 <- reactive({
    if(is.null(input$hot_x2)){return(previousX2())}
    else{X2 <- as.data.frame(hot_to_r(input$hot_x2))
    # Perform some operations on X2
    }
  })
  output$hot_x2 <- renderRHandsontable({rhandsontable(changeX2())})

  # Data frame 3 to hot
  previousX3 <- reactive({x3})
  changeX3 <- reactive({
    if(is.null(input$hot_x3)){return(previousX3())}
    else{X3 <- as.data.frame(hot_to_r(input$hot_x3))
    # Perform some operations on X3
    }
  })
  output$hot_x3 <- renderRHandsontable({rhandsontable(changeX3())})

  # Data frame 4 to hot
  previousX4 <- reactive({x4})
  changeX4 <- reactive({
    if(is.null(input$hot_x4)){return(previousX4())}
    else{X4 <- as.data.frame(hot_to_r(input$hot_x4))
    # Perform some operations on X2
    }
  })
  output$hot_x4 <- renderRHandsontable({rhandsontable(changeX4())})
})

# User interface
ui <- shinyUI(fluidPage(
  navbarPage("MWE",
  tabPanel("Center",
            fluidRow(
              column(width=12, align="center", "Alignment (center) with split")),
            fluidRow(
              column(width = 6, align="center", rHandsontableOutput("hot_x1")),
              column(width = 6, align="center", rHandsontableOutput("hot_x2")))
           ),

  tabPanel("Left",

            fluidRow(
              column(width=12, align="center", "Alignment (left) without split")),
            fluidRow(
              column(width = 6, rHandsontableOutput("hot_x3")),
              column(width = 6, rHandsontableOutput("hot_x4")))
           )

  , fluid=TRUE)))

  shinyApp(ui=ui, server=server)

score 2 · Accepted Answer · answered Dec 03 '18 at 14:28

I'm not sure why your table is split on using align="center"; maybe this is something you should post here.

Nevertheless, here is a workaround using offset:

library(shiny)
library(rhandsontable)

# Create initial data frames
x1 <- data.frame(v1 = c(1, 2), v2 <- c(3, 4))

# Server
server <- shinyServer(function(input, output, session) {

  # Data frame 1 to hot
  previousX1 <- reactive({
    x1
  })

  changeX1 <- reactive({
    if (is.null(input$hot_x1)) {
      return(previousX1())
    }
    else{
      X1 <- as.data.frame(hot_to_r(input$hot_x1))
      # Perform some operations on X1
    }
  })

  output$hot_x6 <- output$hot_x5 <- output$hot_x4 <- output$hot_x3 <- output$hot_x2 <- output$hot_x1 <- renderRHandsontable({
      rhandsontable(changeX1())
    })

})



# User interface
ui <- shinyUI(fluidPage(navbarPage(
  "MWE",
  tabPanel("Center",
           fluidRow(
             column(
               width = 12,
               align = "center",
               "Alignment (center) with split"
             )
           ),
           fluidRow(
             column(
               width = 6,
               align = "center",
               rHandsontableOutput("hot_x1")
             ),
             column(
               width = 6,
               align = "center",
               rHandsontableOutput("hot_x2")
             )
           )),

  tabPanel("Left",
           fluidRow(
             column(
               width = 12,
               align = "center",
               "Alignment (left) without split"
             )
           ),
           fluidRow(
             column(width = 6, rHandsontableOutput("hot_x3")),
             column(width = 6, rHandsontableOutput("hot_x4"))
           )),

  tabPanel("Offset",
           fluidRow(
             column(
               width = 12,
               align = "center",
               "column offset without split"
             )
           ),
           fluidRow(
             column(
               width = 4,
               offset = 2,
               rHandsontableOutput("hot_x5")
             ),
             column(
               width = 4,
               offset = 2,
               rHandsontableOutput("hot_x6")
             )
           )),
  fluid = TRUE
)))

shinyApp(ui = ui, server = server)

score 0 · Answer 2 · answered Dec 26 '20 at 10:39

If there is just one table on a page, and the table has a fixed with, you can center with:

style = "margin-left: calc(50vw - 400px); margin-right: calc(50vw - 400px);"

For example:

df = ... some data frame ...

ui <- fluidPage(
  br(),

  style = "margin-left: calc(50vw - 400px); margin-right: calc(50vw - 400px);",
  rHandsontableOutput('table')
)

server = function(input, output, session) 
{
  output$table <- renderRHandsontable({
    rhandsontable(df, width = 800)
  })
}

shinyApp(ui, server)

Centering rHandsontableOutput - Shiny

2 Answers2