Table in r markdown is not printing correctly in shiny application

Question

Using this answer as a guide, I've been able to make custom text tables very easily in R Markdown. Here is an example r markdown document (saved as "test_rmd.Rmd"):

---
title: "Test"
output: html_document
theme: "yeti"

---

| Test 1 | Test 2 | Test 3 |
|--------|--------|--------|
| x      | x      | x      |
| x      | x      | x      |
| x      | x      | x      |
| x      | x      | x      |

When I knit the document in RStudio, it looks like this:

However, when I include this R Markdown file in my Shiny application, it presents the table completely differently. Here are the ui.R and server.R scripts and the resulting application:

ui.R:

library(shiny); library(shinythemes)
shinyUI(
  bootstrapPage('', 
            navbarPage(
              title = "Test", 
              theme = shinytheme("yeti"), 

              tabPanel("Example", 
                       fluidPage(
                         div(id = "about", 
                             class = "card",  
                             includeMarkdown("./test_rmd.Rmd"))
                         )
                       )
              )
            )
  )

server.R:

shinyServer(function(input, output, session) {})

runApp():

I have tried using kable and the various other methods of "manually" creating tables in R, and I get the same problem. I have not explored creating a data.frame and printing that in r markdown as the table I am making is all text and would be quite cumbersome in a data.frame.

Any ideas? What am I missing here?

EDIT: Well, to give an update - I had to "re-draw" the specific tables in CSS to override this. Still not sure how/why/where Shiny is overriding the default R Markdown table formatting.

This looks like a CSS issue. Presumably in your R Markdown document, that table has a certain class, and the CSS defines how that class should be displayed. In Shiny, it either gets a different class, or it doesn't get the CSS. You're going to have to learn to use the debugging features in your web browser to figure this one out. — user2554330, Sep 08 '18 at 22:04
@user2554330 You're right, I was just hoping there was a simple way to override the Shiny default CSS styling (or whatever it's doing) to have the R markdown document display as it normally would. I'm just building the table styling in CSS now. — fromtheloam, Sep 09 '18 at 00:06

score 1 · Answer 1 · answered Jul 17 '20 at 14:05

The following code worked for me. Here is the reference

<style>
.basic-styling td,
.basic-styling th {
  border: 1px solid #999;
  padding: 0.5rem;
}
</style>

<div class="ox-hugo-table basic-styling">
<div></div>
<div class="table-caption">
  <span class="table-number"></span>
</div>

| Test 1 | Test 2 | Test 3 |
|--------|--------|--------|
| x      | x      | x      |
| x      | x      | x      |
| x      | x      | x      |
| x      | x      | x      |

</div>

Table in r markdown is not printing correctly in shiny application

1 Answers1