CODEWITHSUNDEEP
rshinyflextable
GaryHill
GaryHill

Reputation: 115

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

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. Centered flextable

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

Editing table style in Rstudio DevTools

Upvotes: 2

Views: 1702

Answers (2)

David Gohel
David Gohel

Reputation: 10675

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)

enter image description here

Upvotes: 1

Bertil Baron
Bertil Baron

Reputation: 5003

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!!

Upvotes: 3

Related Questions