Flextable horizontal align on Shiny page (the table, not the content)

Question

I've been trying to align flextable left on my shiny app, with no luck. I can do it in rmarkdown/Word - export (as explained here), but not on Shiny page.

Example code:

ui <- fluidPage(

    fluidRow(
      uiOutput("flex")
    )
)
ui

server <- function(input, output) {

output$flex <- renderUI({
    tbl <- head(mtcars)

    return(flextable(tbl)) %>%
             htmltools_value()        
  })
}
server

When running this, flextable is centered.

How to align it to left? (or margin-left: 0; margin-right: auto). I've been trying to play around with css, but seems something overrides my settings even if I tag it with !important in the .css file.

The below picture: If I go to Inspect mode and set the .tabwid table align-left property to 0, table gets aligned left. But if I set this property in my css file, and then load the app, the table first appears aligned on left side, but then quickly gets centered again.

Thanks for the help,

-Kari

score 3 · Accepted Answer · answered Apr 15 '20 at 11:25

I don't know how you define specify the table in the css file but I think thats the problem. I solved it with this code

ui <- fluidPage(
  shiny::tags$head(
    tags$style(
      ".tabwid table {margin-left: 0px !important;}"
    )
  ),

  fluidRow(
    uiOutput("flex")
  )
)
server <- function(input, output) {

  output$flex <- renderUI({
    tbl <- head(mtcars)

    return(flextable(tbl) %>%
      htmltools_value())        
  })
}
shinyApp(ui, server)

Please note the .tabwid table selector in the style tag I think this is the important step.

Hopes this helps!!

It actually helped, thank you! I can't comprehend why it didn't work in .css-file, since I had exactly that same .tabwid table defined in there. — GaryHill, Apr 15 '20 at 11:36

score 1 · Answer 2 · answered Apr 26 '20 at 22:01

You can also use the argument ft.align in the function htmltoools_value:

library(shiny)
library(flextable)
library(magrittr)

ui <- fluidPage(

  fluidRow(
    uiOutput("flex")
  )
)
ui
server <- function(input, output) {

  output$flex <- renderUI({
    tbl <- head(mtcars)

    return(flextable(tbl)) %>%
      htmltools_value(ft.align = "left")        
  })
}
shinyApp(ui, server)

Flextable horizontal align on Shiny page (the table, not the content)

2 Answers2